Quickstart

Get started with Sentry JavaScript SDK in under 5 minutes

This quickstart guide will help you set up Sentry in a browser application. For platform-specific instructions, see the Installation section.

Prerequisites

Before you begin, make sure you have:

• A Sentry account and project (sign up at sentry.io)
• Your Sentry DSN (Data Source Name) from your project settings
• Node.js installed (for package management)

Don’t have a Sentry account? Sign up for free to get started.

Step 1: Install the SDK

Choose your preferred package manager to install the Sentry SDK:

npm

npm install @sentry/browser

Step 2: Initialize Sentry

Initialize Sentry as early as possible in your application, before any other code runs:

main.ts

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  
  // Performance Monitoring
  integrations: [
    Sentry.browserTracingIntegration(),
  ],
  tracesSampleRate: 1.0, // Capture 100% of transactions for performance monitoring
  
  // Session Replay (optional)
  replaysSessionSampleRate: 0.1, // Sample 10% of sessions
  replaysOnErrorSampleRate: 1.0, // Sample 100% of sessions with errors
  
  // Environment
  environment: 'production',
  
  // Release tracking
  release: 'my-project@1.0.0',
});

Replace YOUR_DSN_HERE with your actual Sentry DSN from your project settings.

Step 3: Verify Installation

Test that Sentry is working correctly by triggering a test error:

// This button click will send a test error to Sentry
document.getElementById('test-button')?.addEventListener('click', () => {
  Sentry.captureException(new Error('Test error from Sentry quickstart'));
});

Alternatively, you can trigger an error directly in your code:

try {
  // This will throw an error
  throw new Error('This is a test error');
} catch (error) {
  Sentry.captureException(error);
}

Step 4: View Your Error

After triggering the test error:

1. Go to your Sentry dashboard
2. Select your project
3. Navigate to Issues
4. You should see your test error appear within seconds

If you see your error in Sentry, congratulations! Your integration is working correctly.

What’s Next?

Now that you have Sentry set up, explore these features to get the most out of error monitoring:

Add Context

Attach user information, tags, and custom context to errors

Track Breadcrumbs

Automatically track user actions leading up to errors

Monitor Performance

Set up distributed tracing and performance monitoring

Session Replay

Enable session replay to see exactly what users experienced

Platform-Specific Quickstarts

Choose your framework for more detailed installation instructions:

React

npm install @sentry/react

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

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
});

See the full React installation guide for ErrorBoundary setup and more.

Next.js

npx @sentry/wizard@latest -i nextjs

The Sentry wizard will automatically configure your Next.js project with both client and server monitoring.

See the full Next.js installation guide for manual setup and configuration options.

Node.js

npm install @sentry/node

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

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

See the full Node.js installation guide for OpenTelemetry integration and more.

Vue

npm install @sentry/vue

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

const app = createApp(App);

Sentry.init({
  app,
  dsn: 'YOUR_DSN_HERE',
  integrations: [
    Sentry.browserTracingIntegration(),
  ],
  tracesSampleRate: 1.0,
});

See the full Vue installation guide for router integration and more.

Common Configuration Options

Here are some commonly used configuration options:

dsn · string · required

Your project’s DSN (Data Source Name) from Sentry

environment · string · default: "production"

The environment your application is running in (e.g., production, staging, development)

release · string

The release version of your application for tracking deployments

tracesSampleRate · number · default: "0"

Sample rate for performance monitoring (0.0 to 1.0, where 1.0 = 100%)

beforeSend · function

Callback function to filter or modify events before sending to Sentry

integrations · Integration[]

Array of integration objects to enable additional features

See the full Configuration Options reference for all available options.

Advanced Setup

Source Maps

Upload source maps to see readable stack traces in production:

npm install @sentry/webpack-plugin --save-dev

See the Source Maps guide for detailed instructions.

Filtering Errors

Use beforeSend to filter out unwanted errors:

Sentry.init({
  dsn: 'YOUR_DSN_HERE',
  beforeSend(event, hint) {
    // Don't send errors from localhost
    if (window.location.hostname === 'localhost') {
      return null;
    }
    return event;
  },
});

See the Filtering guide for more examples.

User Context

Add user information to all captured errors:

Sentry.setUser({
  id: '12345',
  email: '[e-mail]',
  username: 'john_doe',
});

See the Context guide for more details.

Custom Tags

Add custom tags to organize and filter errors:

Sentry.setTag('page_locale', 'en-US');
Sentry.setTag('environment', 'staging');

See the Tags documentation for best practices.

Getting Help

Documentation

Explore the full documentation

GitHub

View source code and examples

Discord

Join our community chat

Having issues? Check out our troubleshooting guide or ask for help in our Discord community.