Browser SDK

The @logtide/browser package brings LogTide's observability to the frontend. It features session tracking, automatic Core Web Vitals collection, user interaction breadcrumbs, and source map un-minification.

Installation

npm install @logtide/browser

# or with pnpm
pnpm add @logtide/browser

# or with yarn
yarn add @logtide/browser

Quick Start

import { initLogtide } from '@logtide/browser';

initLogtide({
  dsn: 'https://lp_abc123@api.logtide.dev',
  environment: 'production',
  release: '1.0.0',
});

Once initialized, the SDK automatically starts capturing unhandled errors, user interactions, and performance metrics.

Configuration

import { initLogtide, WebVitalsIntegration, ClickIntegration, NetworkIntegration } from '@logtide/browser';

initLogtide({
  dsn: 'https://lp_abc123@api.logtide.dev',
  service: 'frontend-app',
  environment: 'production',
  release: 'v1.2.3',

  // Integrations (enabled by default)
  integrations: [
    new WebVitalsIntegration(),
    new ClickIntegration(),
    new NetworkIntegration(),
  ],

  // Sampling
  tracesSampleRate: 0.1,  // Capture 10% of traces
});

Session Tracking

LogTide automatically generates a unique session_id for every visitor. This allows you to correlate all logs, errors, and traces to a specific user journey in the dashboard.

Core Web Vitals

The WebVitalsIntegration automatically collects Google's Core Web Vitals to monitor your application's performance:

✅ LCP (Largest Contentful Paint)
✅ FID (First Input Delay)
✅ CLS (Cumulative Layout Shift)
✅ INP (Interaction to Next Paint)
✅ TTFB (Time to First Byte)

Breadcrumbs

Breadcrumbs provide a timeline of events leading up to an error. The Browser SDK includes automatic tracking for clicks and network requests.

User Clicks

Automatically captures clicks on buttons, links, and inputs, including element IDs and class names to reconstruct user actions.

Network Requests

Intercepts fetch and XHR calls to record request URLs, methods, status codes, and durations.

Source Maps (CLI)

To see original source code in your stack traces instead of minified production code, you can upload your source maps using the @logtide/cli.

# Install the CLI
npm install -g @logtide/cli

# Upload source maps
logtide sourcemaps upload --path ./dist --release 1.0.0 --apiKey YOUR_API_KEY

Offline Support

The Browser SDK includes an OfflineTransport that buffers events when the user is offline and flushes them once connectivity is restored. It also uses navigator.sendBeacon to ensure data is sent even if the user closes the tab or navigates away.

Framework Integrations

If you are using a frontend framework, we recommend using the dedicated package which includes the Browser SDK pre-configured:

Next.js Nuxt SvelteKit Angular