> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/getsentry/sentry-javascript/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/installation/browser) section.

## Prerequisites

Before you begin, make sure you have:

* A Sentry account and project (sign up at [sentry.io](https://sentry.io))
* Your Sentry DSN (Data Source Name) from your project settings
* Node.js installed (for package management)

<Note>
  Don't have a Sentry account? [Sign up for free](https://sentry.io/signup/) to get started.
</Note>

## Step 1: Install the SDK

Choose your preferred package manager to install the Sentry SDK:

<CodeGroup>
  ```bash npm theme={null}
  npm install @sentry/browser
  ```

  ```bash yarn theme={null}
  yarn add @sentry/browser
  ```

  ```bash pnpm theme={null}
  pnpm add @sentry/browser
  ```
</CodeGroup>

## Step 2: Initialize Sentry

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

```typescript main.ts theme={null}
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',
});
```

<Warning>
  Replace `YOUR_DSN_HERE` with your actual Sentry DSN from your project settings.
</Warning>

## Step 3: Verify Installation

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

```javascript theme={null}
// 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:

```javascript theme={null}
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](https://sentry.io)
2. Select your project
3. Navigate to **Issues**
4. You should see your test error appear within seconds

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

## What's Next?

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

<CardGroup cols={2}>
  <Card title="Add Context" icon="tags" href="/core/context">
    Attach user information, tags, and custom context to errors
  </Card>

  <Card title="Track Breadcrumbs" icon="list" href="/core/breadcrumbs">
    Automatically track user actions leading up to errors
  </Card>

  <Card title="Monitor Performance" icon="gauge-high" href="/core/performance">
    Set up distributed tracing and performance monitoring
  </Card>

  <Card title="Session Replay" icon="video" href="/core/session-replay">
    Enable session replay to see exactly what users experienced
  </Card>
</CardGroup>

## Platform-Specific Quickstarts

Choose your framework for more detailed installation instructions:

<Tabs>
  <Tab title="React">
    ```bash theme={null}
    npm install @sentry/react
    ```

    ```typescript theme={null}
    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](/installation/react) for ErrorBoundary setup and more.
  </Tab>

  <Tab title="Next.js">
    ```bash theme={null}
    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](/installation/nextjs) for manual setup and configuration options.
  </Tab>

  <Tab title="Node.js">
    ```bash theme={null}
    npm install @sentry/node
    ```

    ```typescript theme={null}
    import * as Sentry from '@sentry/node';

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

    See the full [Node.js installation guide](/installation/node) for OpenTelemetry integration and more.
  </Tab>

  <Tab title="Vue">
    ```bash theme={null}
    npm install @sentry/vue
    ```

    ```typescript theme={null}
    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](/installation/vue) for router integration and more.
  </Tab>
</Tabs>

## Common Configuration Options

Here are some commonly used configuration options:

<ParamField path="dsn" type="string" required>
  Your project's DSN (Data Source Name) from Sentry
</ParamField>

<ParamField path="environment" type="string" default="production">
  The environment your application is running in (e.g., `production`, `staging`, `development`)
</ParamField>

<ParamField path="release" type="string">
  The release version of your application for tracking deployments
</ParamField>

<ParamField path="tracesSampleRate" type="number" default="0">
  Sample rate for performance monitoring (0.0 to 1.0, where 1.0 = 100%)
</ParamField>

<ParamField path="beforeSend" type="function">
  Callback function to filter or modify events before sending to Sentry
</ParamField>

<ParamField path="integrations" type="Integration[]">
  Array of integration objects to enable additional features
</ParamField>

See the full [Configuration Options](/api/configuration/options) reference for all available options.

## Advanced Setup

<AccordionGroup>
  <Accordion title="Source Maps" icon="map">
    Upload source maps to see readable stack traces in production:

    ```bash theme={null}
    npm install @sentry/webpack-plugin --save-dev
    ```

    See the [Source Maps guide](/guides/best-practices/sourcemaps) for detailed instructions.
  </Accordion>

  <Accordion title="Filtering Errors" icon="filter">
    Use `beforeSend` to filter out unwanted errors:

    ```typescript theme={null}
    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](/guides/configuration/filtering) for more examples.
  </Accordion>

  <Accordion title="User Context" icon="user">
    Add user information to all captured errors:

    ```typescript theme={null}
    Sentry.setUser({
      id: '12345',
      email: 'user@example.com',
      username: 'john_doe',
    });
    ```

    See the [Context guide](/core/context) for more details.
  </Accordion>

  <Accordion title="Custom Tags" icon="tag">
    Add custom tags to organize and filter errors:

    ```typescript theme={null}
    Sentry.setTag('page_locale', 'en-US');
    Sentry.setTag('environment', 'staging');
    ```

    See the [Tags documentation](/core/context#tags) for best practices.
  </Accordion>
</AccordionGroup>

## Getting Help

<CardGroup cols={3}>
  <Card title="Documentation" icon="book" href="/core/error-monitoring">
    Explore the full documentation
  </Card>

  <Card title="GitHub" icon="github" href="https://github.com/getsentry/sentry-javascript">
    View source code and examples
  </Card>

  <Card title="Discord" icon="discord" href="https://discord.gg/Ww9hbqr">
    Join our community chat
  </Card>
</CardGroup>

<Info>
  Having issues? Check out our [troubleshooting guide](/guides/best-practices/error-handling) or ask for help in our [Discord community](https://discord.gg/Ww9hbqr).
</Info>