Dev Toolbar

Bring critical Sentry insights and tools directly into your web app for easier troubleshooting with the Dev Toolbar.

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 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

The issues panel shows you your highest priority frontend 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

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.

Dev Toolbar with the Feedback Panel open

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.

Learn more about what data Sentry can track related to your feature flagging system.

Dev Toolbar with the Feature Flags Panel open

After setting up the Dev Toolbar you’ll see a “Login to Sentry” button floating in the center of the page. Your team will need to click this button and login to sentry before they can access any information from your Sentry organization. Dev Toolbar login button

After clicking the button, you should see a pop up for logging in to Sentry. Sentry log in pop up

If it's your first time setting up the Dev Toolbar, there will be a button with a link to Sentry's Dev Toolbar settings page to configure your domain. Dev Toolbar configure domains button

You'll need to add your domain URL to Allowed Origins on Sentry's Dev Toolbar settings page. Sentry's Dev Toolbar Settings Page

Learn more about deploying the toolbar to different environments, and conditionally inserting the toolbar script tag.

Set Up

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").