Quickstart

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

Prerequisites

A Traceback account (Sign up free)
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:

npm install @traceback/node @traceback/browser

pnpm add @traceback/node @traceback/browser

yarn add @traceback/node @traceback/browser

bun add @traceback/node @traceback/browser

2. Initialize Traceback

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

TypeScript / Node.js
React / Browser

index.ts

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
});

index.tsx

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>
);

3. Verify Your Integration

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

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

Open your Traceback Issues Dashboard to see the newly generated issue, full stack trace, and AI diagnosis.

4. Next: Upload Source Maps

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

npx @traceback/cli sourcemaps upload --release="web@1.0.0" ./dist

See the Source Maps Guide for automated GitHub Actions and Webpack plugins.

Get Started

Core Concepts

Prerequisites

1. Install the SDK

2. Initialize Traceback

3. Verify Your Integration

4. Next: Upload Source Maps

​Prerequisites

​1. Install the SDK

​2. Initialize Traceback

​3. Verify Your Integration

​4. Next: Upload Source Maps

Prerequisites

1. Install the SDK

2. Initialize Traceback

3. Verify Your Integration

4. Next: Upload Source Maps