Share on Twitter
Share on Facebook
Share on HackerNews
Share on LinkedIn

Spotlight: Sentry for Development

A long time ago I worked on a project called Django Debug Toolbar (DJDT). It was a local development plugin that would give you a debug overlay within Django’s development environment, helping you diagnose things like the SQL queries being made, environment configuration, and what templates were rendered. In general, it made the local dev experience much better, helping you prevent or more easily fix things like N+1 queries. Something that has long bothered me is how this concept was lost over time, and what we’re left with in modern frameworks (e.g.JavaScript) is mostly whatever the browser ships with. In some situations that’s totally fine, but our applications aren’t just made up of a web UI. Enter Spotlight.

spotlight hero

I wrote a bit about why now when we launched this project internally recently:

Spotlight is a re-imagining of DJDT built on top of Sentry’s open source telemetry collection. It’s a proof point that our SDKs can provide a meaningful experience even when they’re not connected to our cloud service. Importantly, it’s within arms reach. You probably saw me demo an MVP I built during Hackweek, but what you might not know is that I had that working within the first day. The rest of the week I spent building a formalized trace view, messing around with ring buffers, and in general just polishing up. One day is all it took. So what could we do if we really spent some time on it?

We’re launching Spotlight in collaboration with Astro, where we’ve built a first-class experience on top of Astro 4.0’s new Dev Toolbar. The Astro partnership has allowed us to create an extremely low-friction install for Spotlight and Astro:

npx astro add @sentry/astro @spotlightjs/astro

Then it’s simply a matter of enabling the integrations, Sentry (which doesn’t require a DSN), and Spotlight:

// astro.config.mjs
import { defineConfig } from 'astro/config';

import sentry from "@sentry/astro";
import spotlightjs from "@spotlightjs/astro";

export default defineConfig({
  // Order matters here! `spotlightjs()` should come after `sentry()`
  integrations: [sentry(), spotlightjs()]

In the background, this enables us to automatically spin up the sidecar which Spotlight requires, as well as remove the need for a standard if DEVELOPMENT check.

astro and sentry dev overlay

We’ve got a lot we want to bring to Spotlight, but it’s available today, and Open Source on GitHub. If you’re interested in helping bring this to your technology favorite language or framework, or have some great ideas that you think would fit, join us on Discord in #spotlight.

Your code is broken. Let's Fix it.
Get Started

More from the Sentry blog

ChangelogCodecovDashboardsDiscoverDogfooding ChroniclesEcosystemError MonitoringEventsGuest PostsMobileOpen SourcePerformance MonitoringRelease HealthResourceSDK UpdatesSentry
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.