Now In Open Beta: Surface Sentry Context While Debugging Your Own Site with the Dev Toolbar #82166

jas-kas · 2024-12-16T18:19:11Z

jas-kas
Dec 16, 2024
Maintainer

🛠️ Background

The Dev Toolbar, now in open beta, 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. Quickly surface relevant, actionable issues when you have the most context for understanding them: as you browse your own site. Note that all Sentry data is only accessible through the toolbar to your development team.

The Dev Toolbar contains the following panels:

Issues: your highest priority frontend issues for the page you are currently viewing.
Feedback: shows you the most recent user feedback messages for the page you are on, so you can more easily contextualize user feedback coming from Sentry’s User Feedback Widget.
Feature Flags: quickly view and locally override feature flags that your team has enabled for your web application, so you can verify their behavior and observe the impact they might have on errors.

🔨 Set up

Here’s how you can get started with a few quick steps:

Add or dynamically inject the following script into your web app: <script src="https://browser.sentry-cdn.com/sentry-toolbar/latest/toolbar.min.js"></script>
Call window.SentryToolbar.init(initConfig) to set up a toolbar instance on each page where you want to see the Dev Toolbar. You can read about our configuration options here.

Here’s what it should look like when you’re setting up the toolbar on a page:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="https://browser.sentry-cdn.com/sentry-toolbar/latest/toolbar.min.js"></script>
    <script>
      window.SentryToolbar.init({ ... });
    </script>
  </body>
</html>

To learn how to set up the toolbar for specific environments, instrument your feature flags, and do additional customization, see our documentation.

👋 We want to hear from you

What other tooling or Sentry context would you like to see available inside the Dev Toolbar?
After setting this up, which panel has been most useful for your development team and why?
Were there any challenges in the setting up process?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Now In Open Beta: Surface Sentry Context While Debugging Your Own Site with the Dev Toolbar #82166

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Now In Open Beta: Surface Sentry Context While Debugging Your Own Site with the Dev Toolbar #82166

jas-kas Dec 16, 2024 Maintainer

🛠️ Background

🔨 Set up

👋 We want to hear from you

⭐ Please comment down below your thoughts and reflections 👇 Thank you! ⭐

Replies: 0 comments

jas-kas
Dec 16, 2024
Maintainer