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#

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'],
});

Testing#

Open your browser console and run:

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

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