JavaScript

Catch errors in the browser with @sentry/browser, or the Sentry SDK for your framework, like @sentry/react or @sentry/vue. Upload source maps and stack traces point at your original code instead of the minified bundle.

1. Install the SDK

npm install @sentry/browser

2. Initialize it as early as you can

At the top of your app's entry point, before anything else runs:

import * as Sentry from "@sentry/browser"

Sentry.init({
  dsn: "https://<key>@uncaught.thistinct.tools/<project-id>",
  release: import.meta.env.VITE_RELEASE, // the release you upload source maps for
  environment: "production"
})

Uncaught projects accept events from any website, so the DSN is safe to ship in your bundle.

No bundler?

Load the SDK from Sentry's CDN instead:

<script src="https://browser.sentry-cdn.com/8.55.0/bundle.min.js" crossorigin="anonymous"></script>
<script>
  Sentry.init({ dsn: "https://<key>@uncaught.thistinct.tools/<project-id>" })
</script>

Rails with import maps

Pin the SDK's ESM build and initialize it in app/javascript/application.js:

bin/importmap pin @sentry/browser

3. Check that it works

Open your site, then run this in the browser console:

Sentry.captureException(new Error("Hello from the browser"))

Add context

Sentry.setUser({ id: currentUser.id, email: currentUser.email })
Sentry.setTag("plan", currentUser.plan)

Source maps

Minified stack traces are hard to read. Uncaught turns them back into your original files, lines and function names with the source maps from your build. It finds the right map in one of two ways:

• Debug IDs (recommended). sentry-cli sourcemaps inject or Sentry's Vite and webpack plugins write the same ID into each bundle and its map, so maps match even without a release.
• File names in a release. A map uploaded as ~/assets/app.js.map matches app.js on any host, for events from that release.

With Vite

Sentry's Vite plugin injects Debug IDs and uploads the maps on every production build. Point it at Uncaught with an API token:

import { defineConfig } from "vite"
import { sentryVitePlugin } from "@sentry/vite-plugin"

export default defineConfig({
  build: { sourcemap: true },
  plugins: [
    sentryVitePlugin({
      url: "https://uncaught.thistinct.tools/",
      org: "your-organization",
      project: "your-project",
      authToken: process.env.SENTRY_AUTH_TOKEN,
      release: { name: process.env.VITE_RELEASE }
    })
  ]
})

The webpack, Rollup and esbuild plugins take the same options.

With sentry-cli

For any other build, run these after it, in CI:

npx @sentry/cli sourcemaps inject ./dist
npx @sentry/cli sourcemaps upload --release "$RELEASE" ./dist

See Releases and sentry-cli for the environment variables it needs. You can also upload a map by hand from a project's Source maps page, which is handy to try it out.