diff --git a/docs/product/sentry-toolbar/faq.mdx b/docs/product/sentry-toolbar/faq.mdx index 0051584fac417b..a2060365331535 100644 --- a/docs/product/sentry-toolbar/faq.mdx +++ b/docs/product/sentry-toolbar/faq.mdx @@ -50,7 +50,18 @@ useSentryToolbar({ }, }) ``` + + + + +If you're seeing the message "Connecting to ...' in the Toolbar, it means that the Toolbar is unable to connect to the Sentry server. This can happen for a few reasons: + +1. Check your browser console for a message like `Refused to frame 'https://my-org.sentry.io/toolbar/sentry/javascript/iframe/' because it violates the following Content Security Policy directive: "frame-src 'self'".` This means your site is not allowing the toolbar's iframe to load. To fix this you can add your sentry domain into the [`frame-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src) directive in your CSP. The result would be a response header that says `Content-Security-Policy: frame-src my-org.sentry.io;` +2. The Sentry server is down or unreachable. If this is the case check the following: + - Check the [Sentry status page](https://status.sentry.io/) to see if there are any issues. + - If the Sentry server is down, you can try again later. + - If the Sentry server is unreachable, you can try again later. diff --git a/docs/product/sentry-toolbar/setup.mdx b/docs/product/sentry-toolbar/setup.mdx index e113b961abd5e3..78757b21a8ce0d 100644 --- a/docs/product/sentry-toolbar/setup.mdx +++ b/docs/product/sentry-toolbar/setup.mdx @@ -21,6 +21,8 @@ You will need to edit the [Project Settings](https://sentry.io/orgredirect/organ ![Sentry's Toolbar Settings Page](./img/sentry-project-settings-toolbar.png) +You may also need to add your Sentry domain to the [`frame-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src) directive in your CSP response headers. See the [FAQ: _"Why is the Toolbar stuck saying 'Connecting to ...'?"_](/product/sentry-toolbar/faq/#why-is-the-toolbar-stuck-saying-connecting-to-) for more information. + ## 2. Install If you are developing a React based application, it's time to add the Toolbar into your `package.json` file.