PR comments

Author: c298lee

docs/product/dev-toolbar/index.mdx

@@ -9,25 +9,25 @@ description: "Bring critical Sentry insights and tools directly into your web ap
   [GitHub](https://github.com/getsentry/sentry-toolbar/issues) if you have any feedback or concerns.
 </Alert>
 
-Developers spend a lot of time troubleshooting their web apps on local, staging, and production environments. The Sentry Dev Toolbar pulls data from [sentry.io](http://sentry.io) and surfaces relevant actionable issues to you when you have the most context for understanding it: as you browse your own site. The Dev Toolbar is a floating widget in your web app, offering meaningful Sentry insights for the specific page being viewed through three different **page-aware** panels: Issues, Feedback and Feature Flags.
+Developers spend a lot of time troubleshooting their web apps on local, staging, and production environments. The Sentry Dev Toolbar pulls data from [sentry.io](http://sentry.io) and surfaces relevant actionable issues to you when you have the most context for understanding it: as you browse your own site. The Dev Toolbar is a floating widget in your web app, offering meaningful Sentry insights for the specific page being viewed through three different **page-aware** panels: Issues, Feedback, and Feature Flags.
 
 ![Collapsed Dev Toolbar in context of a website](./img/toolbar-collapsed.png)
 
 ## Issues Panel
 
-The issues panel shows you your highest priority frontend [issues](https://docs.sentry.io/product/issues/) for the page you are currently viewing. From the Dev Toolbar, you can quickly jump into specific issues in Sentry to get more detailed information and take action (for example, assign to a team member or mark as resolved). With the issues panel, you can browse the pages that are most important to your business and understand the top issues impacting your userbase.
+The issues panel shows you your highest priority frontend [issues](https://docs.sentry.io/product/issues/) for the page you are currently viewing. From the Dev Toolbar, you can quickly jump into specific issues in Sentry to get more detailed information and take action (for example, assign to a team member or mark as resolved). With the issues panel, you can browse the pages that are most important to your business and understand the top issues impacting your user base.
 
 ![Dev Toolbar with the Issues Panel open](./img/issues-panel.png)
 
 ## Feedback Panel
 
-The feedback panel shows you the most recent user feedback messages for the page you are on, so you can more easily contextualize user feedback. The feedback can  include misleading UX, broken links, typos, and so on, covering more bugs and suboptimal experiences than code thrown errors. The feedback panel works by pulling feedback messages from [Sentry’s User Feedback Widget](https://docs.sentry.io/product/user-feedback/#user-feedback-widget).
+The feedback panel shows you the most recent user feedback messages for the page you are on, so you can more easily contextualize user feedback. The feedback can  include misleading UX, broken links, typos, and so on, covering more bugs and suboptimal experiences than code-thrown errors. The feedback panel works by pulling feedback messages from [Sentry’s User Feedback Widget](https://docs.sentry.io/product/user-feedback/#user-feedback-widget).
 
 ![Dev Toolbar with the Feedback Panel open](./img/feedback-panel.png)
 
 ## Feature Flags Panel
 
-Feature flags are a powerful tool that allow you to control the visibility of features in your app, enabling you to ship, test, and experiment with confidence. The feature flag panel allows you to quickly view and override feature flags that your team has enabled for your web application. You can override any feature flag to be ‘true’ or ‘false’ for your browser session, so you can verify its behavior and observe the impact it might have on errors. Learn more about how to [configure the feature flag panel](/product/dev-toolbar/setup/#implement-feature-flag-adapter).
+Feature flags are a powerful tool that allow you to control the visibility of features in your app, enabling you to ship, test, and experiment with confidence. The feature flag panel allows you to quickly view and override feature flags locally that your team has enabled for your web application. You can override any feature flag to be ‘true’ or ‘false’ for your browser session, so you can verify its behavior and observe the impact it might have on errors. Learn more about how to [configure the feature flag panel](/product/dev-toolbar/setup/#implement-feature-flag-adapter).
 
 [Learn more](/product/explore/feature-flags/) about what data Sentry can track related to your feature flagging system.
 
@@ -48,3 +48,5 @@ You'll need to add your domain URL to Allowed Origins on Sentry's Dev Toolbar se
 ![Sentry's Dev Toolbar Settings Page](./img/sentry-toolbar-settings.png)
 
 Learn more about [deploying the toolbar to different environments](/product/dev-toolbar/setup/#deploying-to-production--dev-environments), and [conditionally inserting the toolbar script tag](/product/dev-toolbar/setup/#conditionally-inserting-script-tag).
+
+### [Set Up](/product/dev-toolbar/setup)

docs/product/dev-toolbar/setup.mdx

@@ -12,11 +12,11 @@ description: "Get started with Sentry's Dev Toolbar, bringing critical Sentry in
 ## Set Up Your Web App
 
 <Alert title="Note" level="warning">
-    Enabling performance is a prerequisite for having page-aware panels, as it allows us to collect page-specific issues and feedback through transactions.
+    [Enabling tracing](/platforms/javascript/tracing/) is a prerequisite for having page-aware panels, as it allows us to collect page-specific issues and feedback through transactions.
 </Alert>
 
-You need to do two things to get the toolbar rendered on the page:
-1. Add or dynamically inject `<script defer src="https://browser.sentry-cdn.com/sentry-toolbar/latest/toolbar.min.js"></script>` into your web app. This script uses the `defer` attribute so that it does not block document parsing. The script tag can be inserted at the bottom of the page so it doesn’t block other critical javascript.
+You need to complete two steps to get the toolbar rendered on the page:
+1. Add or dynamically inject `<script defer src="https://browser.sentry-cdn.com/sentry-toolbar/latest/toolbar.min.js"></script>` into your web app. This script uses the `defer` attribute so that it does not block document parsing. The script tag can be inserted at the bottom of the page so it doesn’t block other critical Javascript.
 2. Call `window.SentryToolbar.init(initConfig)` to set up a toolbar instance on each page where you want to see the Dev Toolbar.
     ```html
     <html>
@@ -33,7 +33,7 @@ You need to do two things to get the toolbar rendered on the page:
 
 ### Unmounting The Toolbar
 
-If you have called `SentryToolbar.init({...})` to render the toolbar but now want to manually remove or unmount it from the page you can call the cleanup function that is returned from `init()`. This will unmount all the injected HTML and CSS. Login credentials will not be removed, so you can re-insert the toolbar and still be authenticated.
+If you have called `SentryToolbar.init({...})` to render the toolbar, but now want to manually remove or unmount it from the page, you can call the cleanup function that is returned from `init()`. This will unmount all the injected HTML and CSS. Login credentials will not be removed, so you can re-insert the toolbar and still be authenticated.
 ```html
 <script defer src="https://browser.sentry-cdn.com/sentry-toolbar/latest/toolbar.min.js"></script>
 <script>
@@ -46,9 +46,9 @@ If you have called `SentryToolbar.init({...})` to render the toolbar but now wan
 
 ## Implement Feature Flag Adapter
 
-In order to integrate your Feature Flagging platform with the Dev Toolbar you will need an Adapter that can read flag data from your provider, and also store and retrieve a list of overrides to apply to your local browser session.
+In order to integrate your Feature Flagging platform with the Dev Toolbar, you will need an Adapter that can read flag data from your provider, and also store and retrieve a list of overrides to apply to your local browser session.
 
-We plan to create adapters for OpenFeature and LaunchDarkly, coming soon!
+We plan to create adapters for OpenFeature and LaunchDarkly soon!
 
 The interface you need to implement for an Adapter is:
 ```javascript
@@ -103,12 +103,12 @@ window.SentryToolbar.init({
 | `organizationSlug` | `string` | The organization that users should login to. For example \`acme\` | *Required Value* |
 | `projectIdOrSlug` | `string \| number` | The project for which this website/webapp is associated. | *Required Value* |
 | `environment (optional)` | `string \| string[] \| undefined` | The environment of this deployment. Used to narrow search results in the Toolbar UI. Set to \`undefined\` or \`””\` or \`\[\]\` if you want to see results from all environments. | `undefined` |
-| `placement (optional)` | `‘right-edge’ \| ‘bottom-right-corner’` | Where to render the toolbar on the screen. | `”right-edge”` |
-| `theme (optional)` | `‘system’ \| ‘dark’ \| ‘light’` | Whether to use dark or light mode. | `”system”` |
+| `placement (optional)` | `'right-edge' \| 'bottom-right-corner'` | Where to render the toolbar on the screen. | `"right-edge"` |
+| `theme (optional)` | `'system' \| 'dark' \| 'light'` | Whether to use dark or light mode. | `"system"` |
 | `featureFlags (optional)` | `FeatureFlagAdapter \| undefined` | See [Implement FeatureFlagAdapter](/product/dev-toolbar/setup//#implement-feature-flag-adapter) above | `undefined` |
-| `sentryOrigin (optional)` | `string \| undefined` | The origin where sentry can be found. Used for loading the connection to sentry, and generating links to the website. For example: \`"[https://acme.sentry.io](https://acme.sentry.io)"\` | `"https://sentry.io"` |
-| `domId (optional)` | `string \| undefined` | The \`id\` given to the \<div\> that is created to contain the toolbar html. | `”sentry-toolbar”` |
-| `debug (optional)` | `string \| undefined`  | A comma separated string of debug targets to enable.  Example: `”logging,state”`  If the list contains ”all” or ”true” then all targets will be enabled. Valid targets: `”logging” ”login-success” “settings” ”state”` | `undefined` |
+| `sentryOrigin (optional)` | `string \| undefined` | The origin where Sentry can be found. Used for loading the connection to Sentry, and generating links to the website. For example: \`"[https://acme.sentry.io]"\` | `"https://sentry.io"` |
+| `domId (optional)` | `string \| undefined` | The \`id\` given to the \<div\> that is created to contain the toolbar html. | `"sentry-toolbar"` |
+| `debug (optional)` | `string \| undefined`  | A comma separated string of debug targets to enable.  Example: `"logging,state"`  If the list contains ”all” or ”true” then all targets will be enabled. Valid targets: `"logging" "login-success" "settings" "state"` | `undefined` |
 | `mountPoint (optional)` | `HTMLElement \| () => HTMLElement \| undefined` | Where to mount the toolbar in the DOM. | `document.body` |
 
 
@@ -136,7 +136,7 @@ if (isDev || isEmployeeInProd) {
 }
 ```
 
-If the toolbar `<script>` is accidentally included on your site, and `SentryToolbar.init()` is called, then a "Login to Sentry" button will be visible to the public. This is not ideal, but your data in Sentry will still be safe as users outside of your sentry organization will not be able to authenticate themselves.
+If the toolbar `<script>` is accidentally included on your site, and `SentryToolbar.init()` is called, then a "Login to Sentry" button will be visible to the public. This is not ideal, but your data in Sentry will still be safe as users outside of your Sentry organization will not be able to authenticate themselves.
 
 ## Conditionally Inserting Script Tag