-Versions of the `sentry-cli` **before v2.19.0** are using the legacy API endpoints. [Please upgrade](/product/cli/installation/#updating-and-uninstalling) to the latest version.
+Versions of the `sentry-cli` **before v2.19.0** are using the legacy API endpoints. [Please upgrade](/cli/installation/#updating-and-uninstalling) to the latest version.
If your CLI is configured with an auth token, it will use the legacy API endpoints. Please update your CLI configuration to utilize your project's DSN instead. Refer to the [configuration guide](https://docs.sentry.io/cli/crons/#configuration) for more information.
diff --git a/docs/product/dashboards/custom-dashboards/img/dashboard-template.png b/docs/product/dashboards/custom-dashboards/img/dashboard-template.png
new file mode 100644
index 0000000000000..9ab5d8eb14732
Binary files /dev/null and b/docs/product/dashboards/custom-dashboards/img/dashboard-template.png differ
diff --git a/docs/product/dashboards/custom-dashboards/index.mdx b/docs/product/dashboards/custom-dashboards/index.mdx
index 2d4f701251f6b..a94cfc98a4c3e 100644
--- a/docs/product/dashboards/custom-dashboards/index.mdx
+++ b/docs/product/dashboards/custom-dashboards/index.mdx
@@ -28,7 +28,7 @@ Clicking "Create Dashboard" takes you to a new dashboard where you can immediate
- Rearrange existing widgets
- Resize existing widgets
-![Edit mode.](./img/dashboard-edit.png)
+![Edit mode.](./img/dashboard-template.png)
### Create Dashboards From Templates
@@ -38,6 +38,10 @@ When the "Show Templates" toggle is enabled, several default dashboard templates
Dashboard filters are applied to all the widgets in your dashboard. They consist of [page filters](/concepts/search/#page-filters) that allow you to narrow down the widget results to certain projects, environments, and date ranges, and a release filter that restricts the data to certain releases. Changing a dashboard filter will prompt you to "Save" or "Cancel". To persist filter changes to your dashboard, click "Save", or click "Cancel" to discard the changes.
+### Dashboard Edit Access
+
+To restrict who can edit or delete your dashboard, go to the "Edit Access" selector. As the dashboard creator, you can limit access to specific teams by selecting the checkboxes in the Edit Access Selector and clicking Save Changes to apply the updates. Dashboard creators and organization owners always retain edit access.
+
## Widget Builder
When adding a widget or editing an existing one, you will be taken to a new page where you can see the dashboard widget builder. The widget builder has several configuration options that you can use to shape data and add information to your dashboard. Learn more in the [Widget Builder documentation](/product/dashboards/widget-builder/).
@@ -52,4 +56,4 @@ Learn more about the feature and limitations of [metrics extraction](/product/da
## Widget Library
-The widget library contains a collection of prebuilt widgets you can add to your [custom dashboards](/product/dashboards/custom-dashboards/). Learn more in the [Widget Library documentation](/product/dashboards/widget-library/).
+The widget library contains a collection of prebuilt widgets you can add to your custom dashboards. Learn more by reading our [Widget Library docs](/product/dashboards/widget-library/).
diff --git a/docs/product/dashboards/img/dashboard-customise.png b/docs/product/dashboards/img/dashboard-customise.png
new file mode 100644
index 0000000000000..81b30321f3d64
Binary files /dev/null and b/docs/product/dashboards/img/dashboard-customise.png differ
diff --git a/docs/product/dashboards/index.mdx b/docs/product/dashboards/index.mdx
index b9db36a7a7b84..174175abad77f 100644
--- a/docs/product/dashboards/index.mdx
+++ b/docs/product/dashboards/index.mdx
@@ -8,7 +8,7 @@ description: "Sentry's Dashboards provide a single view of your application's he
Sentry's Dashboards provide you with a broad overview of your application’s health by allowing you to navigate through error and performance data across multiple projects. Dashboards are made up of one or more widgets, and each widget visualizes one or more [dataset](/product/dashboards/widget-builder/#choose-your-dataset).
-![Widgets visualizing events, errors by country, affected users, and handled vs unhandled issues.](./img/dashboard-default.png)
+![Widgets visualizing events, errors by country, affected users, and handled vs unhandled issues.](./img/dashboard-customise.png)
All widgets in the same view reflect the date range indicated in date time range filter and update synchronously if you update that date range. You can also zoom in on any time series visualizations you may want to investigate, and all of the widgets reflect the time period that you’ve zoomed in on.
@@ -16,11 +16,9 @@ All widgets in the same view reflect the date range indicated in date time range
If you’d like to edit the default dashboard or build out multiple ones, each with their own set of unique widgets, you may want to consider our [Custom Dashboards](/product/dashboards/custom-dashboards/) feature which enables you to create more robust views such as the one below.
-![Widgets visualizing key page performance, Web Vitals, and user misery.](./img/dashboard-custom.png)
+## Open Dashboard Widgets in Discover and Issues
-## Open Dashboard Widgets in Discover, Issues, and Metrics
-
-Each Dashboard widget has an ellipsis that opens a context menu. From here, depending on the type of data the widget shows, you can open the widget in [Discover](/product/explore/discover-queries/), [Issues](/product/issues/), or [Metrics](/product/explore/metrics/) to get more information.
+Each Dashboard widget has an ellipsis that opens a context menu. From here, depending on the type of data the widget shows, you can open the widget in [Discover](/product/explore/discover-queries/) or [Issues](/product/issues/) to get more information.
## Widget Viewer
diff --git a/docs/product/dashboards/widget-builder/img/widget-builder-overview.png b/docs/product/dashboards/widget-builder/img/widget-builder-overview.png
index baf91ad07dfac..2086f09b07b3f 100644
Binary files a/docs/product/dashboards/widget-builder/img/widget-builder-overview.png and b/docs/product/dashboards/widget-builder/img/widget-builder-overview.png differ
diff --git a/docs/product/dashboards/widget-builder/index.mdx b/docs/product/dashboards/widget-builder/index.mdx
index 99beb93e290c2..9d6e556594bc8 100644
--- a/docs/product/dashboards/widget-builder/index.mdx
+++ b/docs/product/dashboards/widget-builder/index.mdx
@@ -36,7 +36,7 @@ Each chart type allows you to solve different problems:
- Area charts are ideal for showing results that are cumulative or where you want to show a breakdown. An example would be “count of errors for each major browser”.
- Bar charts will group results by day, making them good for daily roll-ups or as “big picture” summaries. An example would be “count of errors per day”.
-- Line charts are a general-purpose visualization. Make sure the Y-Axis units match if you add multiple overlays. Mixing count with duration will not yield useful results.
+- Line charts are a general-purpose visualization. Make sure the Y-Axis units match if you add multiple data series. Mixing count with duration will not yield useful results.
### Table
@@ -44,19 +44,23 @@ Table charts display the results of a [Discover Query](/product/explore/discover
### Big Number
-A big number visualization displays the current value of a single function. This visualization is well suited for high-level aggregates. An example scenario would be “p95 of all transactions”.
+A big number visualization displays the current value of a single function or [equation](/product/explore/discover-queries/query-builder/query-equations/). This visualization is well suited for high-level aggregates. An example scenario would be “p95 of all transactions”.
## Choose Your Dataset
-In the dataset selection step, choose which type of data you would like to use in your widget. This data is classified into two different datasets: [errors and transactions](#errors--transactions) and [issues](#issues).
+In the dataset selection step, choose which type of data you would like to use in your widget. This data is classified into four different datasets: [errors](#error), [transactions](#transactions), [issues](#issues), and [releases](#releases).
-### Errors & Transactions
+### Errors
+Choosing "Errors" allows you to query and aggregate error events in the same way you would for a [Discover Query](/product/explore/discover-queries/). This data is comprised of errors that occur in your application, which Sentry will use to group into issues, for example:
-Choosing "Errors and Transactions" allows you to query and aggregate error and transaction events in the same way you would for a [Discover Query](/product/explore/discover-queries/). Some widget examples include:
+- Users most affected by errors
+
+### Transactions
+
+Choosing "Transactions" allows you to query and aggregate transaction events in the same way you would for a [Discover Query](/product/explore/discover-queries/). This data is comprised of events that track the performance of operations in your application. Some widget examples include:
- Tracking performance of an endpoint
- Throughput by country
-- Users most affected by errors
### Issues
diff --git a/docs/product/dashboards/widget-library/index.mdx b/docs/product/dashboards/widget-library/index.mdx
index 9efbca3f07ca2..bed5a37f59a47 100644
--- a/docs/product/dashboards/widget-library/index.mdx
+++ b/docs/product/dashboards/widget-library/index.mdx
@@ -10,7 +10,7 @@ The widget library contains a collection of prebuilt widgets you can add to your
The library includes the following widgets:
-- **Duration Distribution**: A multi-overlay chart visualizing the distribution of transaction duration across various percentiles (p50, p75, and p95)
+- **Duration Distribution**: A multiple data series chart visualizing the distribution of transaction duration across various percentiles (p50, p75, and p95)
- **High Throughput Transactions**: The top five transactions with the largest number of events, represented in an area chart
- **LCP by Country**: Table showing the p75 of page load times for each country
- **Miserable Users**: The total number of unique users who have experienced slow transactions (transaction duration greater than 1200ms)
@@ -29,16 +29,16 @@ You can change the title, queries, fields, visualization types, sort order, and
To monitor how your app is performing on a certain release, you can modify the "Duration Distribution" widget by adding the release version to the search condition:
-- Search condition 1: `event.type:transaction release.version:{version}`
+- Search condition 1: `release.version:{version}`
To compare performance with another release version, you can add another query by clicking the "Add Query" button and querying for a different release version:
-- Search condition 2: `event.type:transaction release.version:{another_version}`
+- Search condition 2: `release.version:{another_version}`
You can also compare performance before and after a certain version with the following conditions:
-- Search condition 1: `event.type:transaction release.version:<{version}`
-- Search condition 2: `event.type:transaction release.version:>={version}`
+- Search condition 1: `release.version:<{version}`
+- Search condition 2: `release.version:>={version}`
### Response thresholds
@@ -52,15 +52,15 @@ Set one of the y-axis values to `count()` and remove the other two axes:
To the first query, add the search condition for satisfactory transaction duration (this example uses 300ms as the satisfactory response threshold):
-- Search condition 1: `event.type:transaction transaction.duration:<300`
+- Search condition 1: `transaction.duration:<300`
Add another query for the tolerable condition by clicking the "Add Query" button. In this example, we're using the [Apdex](/product/performance/metrics/#apdex) definition where tolerable response times are between the satisfactory threshold and four times the satisfactory threshold:
-- Search condition 2: `event.type:transaction (transaction.duration:<1200 AND transaction.duration:>=300)`
+- Search condition 2: `transaction.duration:<1200 AND transaction.duration:>=300`
Finally, add a third query for for the frustrating transaction duration:
-- Search condition 3: `event.type:transaction transaction.duration:>=1200`
+- Search condition 3: `transaction.duration:>=1200`
The chart now shows cumulative counts at different response time thresholds.
diff --git a/docs/product/dev-toolbar/faq.mdx b/docs/product/dev-toolbar/faq.mdx
new file mode 100644
index 0000000000000..366709c78de19
--- /dev/null
+++ b/docs/product/dev-toolbar/faq.mdx
@@ -0,0 +1,16 @@
+---
+title: FAQ
+sidebar_order: 30
+description: "Frequently asked questions about the Dev Toolbar."
+---
+
+
+
+The [Dev Toolbar](https://github.com/getsentry/sentry-toolbar) and the [JavaScript SDK](https://github.com/getsentry/sentry-javascript) are distinct features that we intentionally keep separated.
+
+Some of the differences between the two include:
+ - The toolbar is a UI product focused on making it easier to find and take action on existing data, while the SDK functions as infrastructure to collect and send data to the server.
+ - The toolbar has a different set of [dependencies](https://github.com/getsentry/sentry-toolbar/blob/main/package.json) and uses different browser APIs that the JavaScript SDK does not use. For example: the toolbar will interact with things like cookies and local storage. By keeping these pieces of code separate, it's easier to audit the [SDK code on GitHub](https://github.com/getsentry/sentry-javascript) to verify that it is not persisting information inside end-users' browsers.
+ - The setup and deploy instruction are very different. The SDK is best deployed on staging and production environments, and can be configured easily with environment variables. The Dev Toolbar requires special considerations to deploy it into production, usually by creating a condition so that it's only included for members of your own Sentry organization.
+
+
diff --git a/docs/product/dev-toolbar/img/configure-domain.png b/docs/product/dev-toolbar/img/configure-domain.png
new file mode 100644
index 0000000000000..40ce31e9bd27e
Binary files /dev/null and b/docs/product/dev-toolbar/img/configure-domain.png differ
diff --git a/docs/product/dev-toolbar/img/feature-flags-panel.png b/docs/product/dev-toolbar/img/feature-flags-panel.png
new file mode 100644
index 0000000000000..af2d506423660
Binary files /dev/null and b/docs/product/dev-toolbar/img/feature-flags-panel.png differ
diff --git a/docs/product/dev-toolbar/img/feedback-panel.png b/docs/product/dev-toolbar/img/feedback-panel.png
new file mode 100644
index 0000000000000..337e04f5d7475
Binary files /dev/null and b/docs/product/dev-toolbar/img/feedback-panel.png differ
diff --git a/docs/product/dev-toolbar/img/issues-panel.png b/docs/product/dev-toolbar/img/issues-panel.png
new file mode 100644
index 0000000000000..849d78412f248
Binary files /dev/null and b/docs/product/dev-toolbar/img/issues-panel.png differ
diff --git a/docs/product/dev-toolbar/img/login-button.png b/docs/product/dev-toolbar/img/login-button.png
new file mode 100644
index 0000000000000..edafd29443e42
Binary files /dev/null and b/docs/product/dev-toolbar/img/login-button.png differ
diff --git a/docs/product/dev-toolbar/img/login-popup.png b/docs/product/dev-toolbar/img/login-popup.png
new file mode 100644
index 0000000000000..e86a18c6353d3
Binary files /dev/null and b/docs/product/dev-toolbar/img/login-popup.png differ
diff --git a/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png b/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png
new file mode 100644
index 0000000000000..b1c33770251e7
Binary files /dev/null and b/docs/product/dev-toolbar/img/sentry-project-settings-toolbar.png differ
diff --git a/docs/product/dev-toolbar/img/toolbar-collapsed.png b/docs/product/dev-toolbar/img/toolbar-collapsed.png
new file mode 100644
index 0000000000000..0e9434e734f14
Binary files /dev/null and b/docs/product/dev-toolbar/img/toolbar-collapsed.png differ
diff --git a/docs/product/dev-toolbar/index.mdx b/docs/product/dev-toolbar/index.mdx
new file mode 100644
index 0000000000000..1f1af9fd4a6c0
--- /dev/null
+++ b/docs/product/dev-toolbar/index.mdx
@@ -0,0 +1,46 @@
+---
+title: Dev Toolbar
+sidebar_order: 120
+description: "Bring critical Sentry insights and tools directly into your web app for easier troubleshooting with the Dev Toolbar."
+---
+
+
+ The Dev Toolbar is currently in **beta**. Beta features are still in progress and may have bugs. Please reach out on
+ [GitHub](https://github.com/getsentry/sentry-toolbar/issues) if you have any feedback or concerns.
+
+
+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 (examples: Sentry project, issue title, description, and when the issue was first and last seen) and take action (examples: 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 it. The feedback often describes suboptimal experiences that are not strictly code-thrown errors, such as misleading UX, broken links, and typos. The feedback panel works by pulling feedback messages from [Sentry’s User Feedback Widget](https://docs.sentry.io/product/user-feedback/#user-feedback-widget). Just like with the Issues panel, clicking on a particular user feedback will take you to the full detailed User Feedback page within Sentry.
+
+![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 locally. 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) and [what data Sentry can track](/product/explore/feature-flags/) related to your feature flagging system.
+
+
+![Dev Toolbar with the Feature Flags Panel open](./img/feature-flags-panel.png)
+
+## Login Flow
+
+After setting up the Dev Toolbar you’ll see a “Login to Sentry” button floating in the center of the page. To access any information from your Sentry organization, you have to click this button and login to Sentry.
+![Dev Toolbar login button](./img/login-button.png)
+
+After clicking the button, you will see a pop-up window for logging in to Sentry.
+![Sentry log in pop up](./img/login-popup.png)
+
+If it's your first time [setting up the Dev Toolbar](/product/dev-toolbar/setup) , there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain.
+![Dev Toolbar configure domains button](./img/configure-domain.png)
+
+Learn more about setting up the toolbar, including configuring a feature flag provider and integrating the toolbar in different environments, on the next page.
diff --git a/docs/product/dev-toolbar/setup.mdx b/docs/product/dev-toolbar/setup.mdx
new file mode 100644
index 0000000000000..c98d6ffe0a307
--- /dev/null
+++ b/docs/product/dev-toolbar/setup.mdx
@@ -0,0 +1,147 @@
+---
+title: "Set Up"
+sidebar_order: 10
+description: "Get started with Sentry's Dev Toolbar, bringing critical Sentry insights and tools into your web app to help your team troubleshoot more effectively."
+---
+
+
+ The Dev Toolbar is currently in **beta**. Beta features are still in progress and may have bugs. Please reach out on
+ [GitHub](https://github.com/getsentry/sentry-toolbar/issues) if you have any feedback or concerns.
+
+
+## Set Up Your Web App
+
+
+ [Enabling tracing](/platforms/javascript/tracing/) is a prerequisite to using the Dev Toolbar. Tracing is used to collect page-specific issues and feedback through transactions.
+
+
+You need to complete two steps to get the toolbar rendered on the page:
+1. Add or dynamically inject the following script into your web app:
+ ```html
+
+ ```
+ It is recommended that you add the script tag 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. Take care to also [conditionally load the toolbar in your production environment](#deploying-to-production-environments).
+ ```html
+
+ ...
+
+ ...
+
+
+
+
+ ```
+
+3. Edit [Project Settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/) in Sentry so the Toolbar is allowed to connect from your dev, staging, and production domains.
+ ![Sentry's Dev Toolbar Settings Page](./img/sentry-project-settings-toolbar.png)
+
+
+### 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.
+```javascript
+const unmountToolbar = window.SentryToolbar.init({ ... });
+
+// sometime later...
+unmountToolbar();
+```
+
+## Init Configuration Options
+
+The following options can be passed into the `.init()` function.
+
+At minimum, you should be calling `.init()` with these two options:
+```javascript
+window.SentryToolbar.init({
+ organizationSlug: 'acme',
+ projectIdOrSlug: 'website',
+});
+```
+And you can include any additional options from this list:
+
+| Option | Type | Description | Default Value |
+| ----- | ----- | ----- | ----- |
+| `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'` |
+| `featureFlags (optional)` | `FeatureFlagAdapter \| undefined` | See [Implement FeatureFlagAdapter](/product/dev-toolbar/setup//#implement-feature-flag-adapter) below | `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 \ 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` |
+
+## 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.
+
+We plan to [create adapters for OpenFeature and LaunchDarkly](https://github.com/getsentry/sentry-toolbar/issues/150) soon.
+
+The adapter interface is:
+```javascript
+type FlagValue = boolean | string | number | undefined;
+type FlagMap = Record;
+interface FeatureFlagAdapter {
+ /**
+ * All known flag names and their evaluated values.
+ */
+ getFlagMap: () => Promise;
+
+ /**
+ * Any overridden or manually set flags and values.
+ */
+ getOverrides: () => Promise;
+
+ /**
+ * Manually set a flag to be a specific value, overriding the evaluated value.
+ */
+ setOverride: (name: string, override: FlagValue) => void;
+
+ /**
+ * A callback to clear all overrides from this browser.
+ */
+ clearOverrides: () => void;
+
+ /**
+ * Deeplink into your external feature-flag provider and find out more about
+ * this specific flag.
+ */
+ urlTemplate?: undefined | ((name: string) => string | URL | undefined);
+}
+```
+
+[MockFeatureFlagAdapter.tsx](https://github.com/getsentry/sentry-toolbar/blob/main/src/env/demo/MockFeatureFlagAdapter.tsx) is an example adapter to use as a reference.
+
+
+## Deploying To Dev and Staging Environments
+Since the Dev Toolbar is deployed onto specific pages, it's strongly recommended that you consider which environments the toolbar should apply to.
+
+In dev and staging environments, you might want to *unconditionally* include the toolbar so that all developers and testers can use it and quickly go from the page they're looking at back to Sentry for further debugging.
+
+The code might look like this:
+```javascript
+const env = process.env.SENTRY_ENVIRONMENT || 'development';
+
+const isDev = env === 'development' || env === 'staging';
+if (isDev ) {
+ SentryToolbar.init({ ... });
+}
+```
+
+## Deploying to Production Environments
+
+In production, it's strongly recommended to *conditionally* include the Dev Toolbar `
+
+