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.

Get Started

npm install @tracekit/browser

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 -- 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 -- 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 -- Record and replay user sessions with privacy-first defaults. See exactly what users experienced before, during, and after errors.
Release Tracking -- Track deployments, monitor crash-free rates, and detect regressions the moment they ship. CLI commands, REST API, and CI/CD integration.
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

Install the SDK -- Install @tracekit/browser and call init() with your API key. Add a framework wrapper for your chosen framework.
Add framework wrapper -- Wrap your app with the framework-specific integration for error boundaries, router breadcrumbs, and component-level error tracking.
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.