Skip to main content
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 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: '[email protected]',
});
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: 
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.

​
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

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.
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.
Add user information to all captured errors:
Sentry.setUser({
  id: '12345',
  email: '[email protected]',
  username: 'john_doe',
});
See the Context guide for more details.
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.

Build docs developers (and LLMs) love

Get started for freeTalk to us