-
-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Now In Open Beta: Surface Sentry Context While Debugging Your Own Site with the Dev Toolbar #82166
-
🛠️ 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?
⭐ Please comment down below your thoughts and reflections 👇 Thank you! ⭐
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 10 -
👎 1 -
😄 6 -
🎉 11 -
😕 1 -
❤️ 10 -
🚀 8 -
👀 2