> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traceback.cc/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Start capturing production errors and performance telemetry in under 5 minutes.

This guide walks you through setting up Traceback in a modern full-stack web application.

## Prerequisites

* A Traceback account ([Sign up free](https://app.traceback.dev/signup))
* Your Project DSN (Data Source Name) from **Project Settings > Keys**
* Node.js 18+ or your preferred runtime

***

## 1. Install the SDK

Install the core SDK package for your framework:

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

  ```bash pnpm theme={null}
  pnpm add @traceback/node @traceback/browser
  ```

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

  ```bash bun theme={null}
  bun add @traceback/node @traceback/browser
  ```
</CodeGroup>

***

## 2. Initialize Traceback

Add the initialization code as early as possible in your application's entry point.

<Tabs>
  <Tab title="TypeScript / Node.js">
    ```typescript index.ts theme={null}
    import * as Traceback from "@traceback/node";

    Traceback.init({
      dsn: process.env.TRACEBACK_DSN,
      environment: process.env.NODE_ENV || "development",
      release: "backend@1.0.0",
      tracesSampleRate: 1.0, // Capture 100% of performance traces in dev
    });
    ```
  </Tab>

  <Tab title="React / Browser">
    ```typescript index.tsx theme={null}
    import React from "react";
    import ReactDOM from "react-dom/client";
    import * as Traceback from "@traceback/browser";
    import App from "./App";

    Traceback.init({
      dsn: "https://tb_live_example@ingest.traceback.dev/1",
      integrations: [
        new Traceback.BrowserTracing(),
        new Traceback.Replay({ maskAllInputs: true }),
      ],
      tracesSampleRate: 0.2,
      replaysOnErrorSampleRate: 1.0,
    });

    const root = ReactDOM.createRoot(document.getElementById("root")!);
    root.render(
      <Traceback.ErrorBoundary fallback={<p>Something went wrong.</p>}>
        <App />
      </Traceback.ErrorBoundary>
    );
    ```
  </Tab>
</Tabs>

***

## 3. Verify Your Integration

Trigger a test exception to confirm that events arrive in your dashboard:

```typescript theme={null}
try {
  throw new Error("Traceback Verification Test");
} catch (error) {
  Traceback.captureException(error, {
    tags: { section: "quickstart" },
    extra: { timestamp: new Date().toISOString() },
  });
}
```

<Tip>
  Open your [Traceback Issues Dashboard](https://app.traceback.dev) to see the newly generated issue, full stack trace, and AI diagnosis.
</Tip>

***

## 4. Next: Upload Source Maps

To view unminified TypeScript/JavaScript source code in stack traces, upload source maps during your CI/CD build step:

```bash theme={null}
npx @traceback/cli sourcemaps upload --release="web@1.0.0" ./dist
```

See the [Source Maps Guide](/guides/sourcemaps-and-debug-symbols) for automated GitHub Actions and Webpack plugins.