v4.0

Frontend Observability

Complete observability for JavaScript applications. Capture errors automatically, replay user sessions, track releases, resolve minified stack traces, and connect frontend traces to your backend services with first-class support for React, Vue, Angular, Next.js, and Nuxt.

Get Started

terminal
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.

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

  • @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

  • @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.