Skip to main content

JavaScript (browser)

Works with @sentry/browser, @sentry/react, @sentry/vue, @sentry/nextjs, @sentry/angular and friends — they share the same core options.

Install​

npm install @sentry/browser
# or the framework package: @sentry/react, @sentry/vue, @sentry/nextjs …

Initialize​

Call init as early as possible — before your app renders.

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://<public_key>@<your-errora-host>/<project_id>",
  environment: import.meta.env.MODE,
  release: `web@${__APP_VERSION__}`,

  // Tracing
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.feedbackIntegration({ colorScheme: "system", showBranding: false }),
  ],
  tracesSampleRate: 0.2,
  tracePropagationTargets: ["localhost", /^https:\/\/api\.example\.com/],

  // Session replay
  replaysSessionSampleRate: 0.1,   // 10% of ordinary sessions
  replaysOnErrorSampleRate: 1.0,   // every session that hits an error

  // Structured logs
  _experiments: { enableLogs: true },

  sendDefaultPii: false,
});

What each block turns on​

  • browserTracingIntegration() → page loads, navigations, fetch/XHR spans → Performance.
  • replayIntegration() → rrweb recordings → Session replay.
  • feedbackIntegration() → the feedback button/widget → User feedback.
  • enableLogs → Sentry.logger.* calls → Logs.

Content Security Policy​

If your site sends a CSP, allow the Errora host as a connect-src:

Content-Security-Policy: connect-src 'self' https://<your-errora-host>;

While you are editing the policy, point report-uri at Errora as well — violations become issues. See Security policy reports.

Capturing manually​

try {
  risky();
} catch (err) {
  Sentry.captureException(err, { tags: { area: "checkout" } });
}

Sentry.captureMessage("Cart total mismatch", "warning");

Sentry.setUser({ id: "42", username: "nima" });
Sentry.addBreadcrumb({ category: "ui", message: "Clicked pay", level: "info" });

Source maps​

Minified frames are useless without source maps. Upload the maps for each release from CI:

curl -X POST "$ERRORA/api/v1/projects/$PROJECT_ID/release-files" \
  -H "Authorization: Bearer $ERRORA_TOKEN" \
  -F "release=web@1.4.2" \
  -F "name=~/assets/app.4f2c.js.map" \
  -F "sourcemap=1" \
  -F "file=@dist/assets/app.4f2c.js.map"

Full guide: Source maps & releases.

Ad blockers and tunnelling​

Ad blockers sometimes block requests to paths containing sentry. If you see events go missing only in the browser, route them through your own domain with the SDK's tunnel option, pointing at a small proxy endpoint on your server that forwards the body to https://<your-errora-host>/api/<project_id>/envelope/. Errora reads the DSN from the envelope header, so tunnelled envelopes authenticate correctly.

Verify​

Sentry.captureException(new Error("Errora smoke test"));

Open Issues — the error should be there within a couple of seconds, with a session replay attached if replay sampling caught it.