# Frontend Observability

> Complete frontend observability for JavaScript applications. Error tracking, session replay, release management, and distributed tracing with React, Vue, Angular, Next.js, and Nuxt.

- Canonical: https://tracekit.dev/docs/frontend

## Get Started

```bash
npm install @tracekit/browser
```

```ts title="src/index.ts"
import { init, captureException } from '@tracekit/browser';

init({
  apiKey: 'your-api-key',
  release: '1.0.0',
  environment: 'production',
});

// Uncaught errors are captured automatically.
// For manual capture:
try {
  riskyOperation();
} catch (err) {
  captureException(err as Error);
}
```

That is all you need. Uncaught errors, unhandled promise rejections, console errors, network requests, and user interactions are captured automatically as breadcrumbs.

## Explore the Suite

- **[Browser SDK](/docs/frontend/browser-sdk)** -- Automatic error capture, breadcrumb tracking, and distributed tracing for any JavaScript application. 13 configuration options, 8 public API functions, and 6 built-in integrations.
- **[Framework Wrappers](/docs/frontend/frameworks)** -- First-class integrations for React, Vue, Angular, Next.js, and Nuxt. Error boundaries, router breadcrumbs, and framework-specific hooks out of the box.
- **[Session Replay](/docs/frontend/session-replay)** -- Record and replay user sessions with privacy-first defaults. See exactly what users experienced before, during, and after errors.
- **[Release Tracking](/docs/frontend/releases)** -- Track deployments, monitor crash-free rates, and detect regressions the moment they ship. CLI commands, REST API, and CI/CD integration.
- **[Source Maps](/docs/frontend/source-maps)** -- Upload source maps to resolve minified stack traces. Vite and webpack plugins for automatic upload, debug ID support, and CLI commands for CI pipelines.

## How It Works

1. **Install the SDK** -- Install `@tracekit/browser` and call `init()` with your API key. Add a framework wrapper for your chosen framework.
2. **Add framework wrapper** -- Wrap your app with the framework-specific integration for error boundaries, router breadcrumbs, and component-level error tracking.
3. **Deploy** -- Errors, session replays, breadcrumbs, and distributed traces flow automatically. Upload source maps in CI for readable stack traces.

## Architecture

### Packages

| Package | Description |
| --- | --- |
| `@tracekit/browser` | Core SDK (error capture, breadcrumbs, tracing) |
| `@tracekit/react` | ErrorBoundary, createRoot hooks, router |
| `@tracekit/vue` | Vue plugin, errorHandler, router |
| `@tracekit/angular` | Providers, ErrorHandler, router |
| `@tracekit/nextjs` | Client/server init, App Router, Pages Router |
| `@tracekit/nuxt` | Plugin, composable, router |
| `@tracekit/replay` | Session recording addon |

### Build Tools

| Package | Description |
| --- | --- |
| `@tracekit/vite-plugin` | Automatic source map upload for Vite |
| `@tracekit/webpack-plugin` | Automatic source map upload for webpack |
| `tracekit` | CLI for releases and source maps |

## Ready to start?

The Browser SDK documentation covers everything you need to instrument your first application. Start there, then add a framework wrapper for deeper integration.

- [Browser SDK Docs](/docs/frontend/browser-sdk)
- [Framework Wrappers](/docs/frontend/frameworks)