JavaScript SDK

For browser JavaScript applications. Works with any frontend framework.

Installation#

npm install @sentry/browser

Setup#

Initialize once, before any other code runs:

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

Sentry.init({
  dsn: 'https://your-key@your-hostname.tindra.sh/1',
  environment: 'production',
  release: '1.4.2',
  tracesSampleRate: 0.1,
});

Framework wrappers#

Use a framework-specific package if you are using React, Vue, Angular, or Svelte. They wrap @sentry/browser with additional integrations.

React#

npm install @sentry/react

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: '...',
  tracesSampleRate: 0.1,
});

const App = Sentry.withProfiler(MyApp);

Vue#

npm install @sentry/vue

import { createApp } from 'vue';
import * as Sentry from '@sentry/vue';

const app = createApp(App);

Sentry.init({
  app,
  dsn: '...',
  tracesSampleRate: 0.1,
});

Manual error capturing#

try {
  processData(input);
} catch (error) {
  Sentry.captureException(error);
}

Capture a message#

Sentry.captureMessage('User reached the quota limit', 'warning');

User context#

Use a stable application ID to follow the same user across errors, logs, and traces. Email is optional; keep the identity consistent between related applications.

Sentry.setUser({
  id: user.id,
  email: user.email,
});

Clear on logout:

Sentry.setUser(null);

Extra context#

Sentry.setExtra('cart_item_count', cart.items.length);
Sentry.setTag('checkout_flow', 'express');

Source maps#

Minified stacktraces are unreadable without source maps. See the Source Maps guide to upload them with each deploy.

Performance monitoring#

Browser performance tracing is enabled automatically when tracesSampleRate > 0. It captures page loads, navigation, and Web Vitals.

To trace outbound requests, add the BrowserTracing integration:

Sentry.init({
  dsn: '...',
  tracesSampleRate: 0.1,
  integrations: [Sentry.browserTracingIntegration()],
  tracePropagationTargets: ['your-api-hostname.com'],
});

Profiling#

Browser profiling uses the JS Self-Profiling API, so it only works in Chromium browsers (Chrome, Edge). Your server must also send a Document-Policy: js-profiling header on the HTML document, or the browser refuses to start the profiler.

Sentry.init({
  dsn: 'https://your-key@your-hostname.tindra.sh/1',
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.browserProfilingIntegration(),
  ],
  tracesSampleRate: 0.1,
  profileSessionSampleRate: 1.0,
});

See Profiling.

Testing#

Open your browser console and run:

Sentry.captureException(new Error('Hello Tindra'));

The event should appear in your dashboard within a few seconds.

Verify project setup#

After configuring the SDK, open Check setup for your project in Settings > Projects. Start a fresh check and capture an exception with the displayed tindra_setup tag, then wait for confirmed storage. The Project Setup guide covers generated browser/Node.js snippets, other SDKs, missing data, and optional transaction, profile, and source-map checks.