Benefits of Using web-tracing for Frontend Error Monitoring

web-tracing provides a modular, low-overhead SDK that captures JavaScript runtime errors, resource failures, and promise rejections while offering batch deduplication, configurable filtering, and optional screen recordings to minimize noise and bandwidth usage.

The m-cheng-web/web-tracing repository is a monorepo-based monitoring SDK designed to unify frontend error monitoring across vanilla JavaScript, Vue, React, and Nuxt applications. By centralizing error capture in packages/core and providing thin framework adapters, web-tracing delivers comprehensive observability without framework lock-in.

Comprehensive Error Capture Architecture

web-tracing implements a unified pipeline that normalizes disparate browser error sources into a consistent schema before transport.

Core Components Overview

The SDK's architecture revolves around three primary modules located in packages/core/src/lib/:

• options.ts – Validates configuration (DSN, sampling rates, ignore patterns) and exposes a reactive options store.
• eventBus.ts – Registers global listeners for error, unhandledrejection, and console.error events.
• err.ts – Parses raw browser errors, applies ignore-filters, and emits normalized payloads.

Unified Event Pipeline

When initError() is invoked (typically inside initOptions), the SDK attaches listeners via eventBus.addEvent. The callback flow in packages/core/src/lib/err.ts follows this sequence:

1. Capture – Raw ErrorEvent or PromiseRejectionEvent is intercepted.
2. Parse – parseErrorEvent extracts message, stack, filename, lineno, and colno using regex patterns like /^\s*at\s*([^(]+)\s*\((.+?):(\d+):(\d+)\)$/.
3. Filter – isIgnoreErrors checks the message against options.value.ignoreErrors (strings or RegExp) and drops matches silently.
4. Enrich – Base info (user agent, URL, timestamp) is appended.
5. Dispatch – Either sent immediately via sendData.emit or queued for batching.

Key Benefits of web-tracing for Frontend Error Monitoring

Complete Runtime Coverage

web-tracing captures four distinct error categories in a single configuration:

• JavaScript runtime exceptions – Thrown errors and uncaught exceptions.
• Resource load failures – Failed images, scripts, or CSS requests.
• Unhandled promise rejections – Async errors without catch blocks.
• Console errors – Explicit console.error calls treated as events.

This eliminates the need for multiple monitoring tools or manual instrumentation across different error types.

Intelligent Noise Reduction

The SDK provides multiple mechanisms to prevent data flooding:

Configurable Filtering – The ignoreErrors option in packages/core/src/lib/options.ts accepts an array of strings or regular expressions. Common noisy errors like ResizeObserver loop limit exceeded can be excluded at the source.

Sampling – tracesSampleRate (0.0 to 1.0) allows probabilistic sending, reducing backend load during high-traffic events.

Batch De-duplication – When scopeError: true is set, the err-batch.ts module aggregates identical errors occurring within a short window. Instead of 20 separate payloads for the same infinite loop, the backend receives one batched event with a count, dramatically reducing storage and processing costs.

Visual Debugging with Screen Recordings

The optional recordScreen feature leverages rrweb to capture a short DOM recording leading up to the error. Stored as a base64 blob in the recordscreen field of the error payload, this allows developers to replay the exact UI state, user interactions, and visual context that triggered the failure—significantly shortening debug cycles compared to stack traces alone.

Framework-Agnostic Integration

web-tracing distributes framework-specific adapters while maintaining API consistency:

• Vue 2/3 – packages/vue2/index.ts and packages/vue3/index.ts expose initOptions and traceError with Vue-specific lifecycle hooks.
• React – packages/react/index.ts provides identical methods for class and functional components.
• Nuxt – packages/nuxt/index.ts handles SSR compatibility.

This architecture allows teams to standardize error monitoring across micro-frontends or during framework migrations without rewriting instrumentation code.

Implementation Examples

Basic Vanilla JS Setup

import { initOptions, traceError } from '@web-tracing/core';

// Initialise the SDK (required fields)
initOptions({
  dsn: 'https://your-backend.example.com/collect',
  appName: 'my-awesome-app',
  appVersion: '1.3.0',
  debug: true,               // prints internal logs
  error: { core: true },     // enable error monitoring
  performance: { core: true, firstResource: true },
  recordScreen: true,        // capture rrweb screen recordings
  scopeError: true,        // batch duplicate errors
  ignoreErrors: [/ResizeObserver loop limit exceeded/], // ignore noisy Chrome warning
});

// Manually report a custom error
traceError({
  eventId: 'custom-login-error',
  errMessage: 'Login API returned 500',
});

Source: initOptions implementation – packages/core/src/lib/options.ts and error init – packages/core/src/lib/err.ts.

Vue 3 Integration

import { createApp } from 'vue';
import App from './App.vue';
import { initOptions } from '@web-tracing/vue3';

initOptions({
  dsn: 'https://backend.example.com/collect',
  appName: 'vue-app',
  error: true,               // shorthand – enables both core & server
  performance: true,
});

createApp(App).mount('#app');

Vue 3 wrapper located at packages/vue3/index.ts.

Batch Error Handling

// Enable scoped error handling (batching)
initOptions({
  dsn: 'https://api.example.com/trace',
  appName: 'batch-demo',
  error: { core: true },
  scopeError: true,          // activates err-batch module
  tracesSampleRate: 0.5,     // send only 50%
});

// Simulate rapid identical errors
for (let i = 0; i < 20; i++) {
  setTimeout(() => {
    // This will be deduped into a single batch payload
    traceError({ errMessage: 'Infinite loop error' });
  }, i * 100);
}

Batch handling lives in packages/core/src/lib/err-batch.ts.

Summary

• web-tracing provides a unified pipeline in packages/core/src/lib/err.ts that captures JavaScript exceptions, resource failures, unhandled rejections, and console errors.
• Noise reduction features include ignoreErrors filtering, tracesSampleRate sampling, and scopeError batch de-duplication handled by packages/core/src/lib/err-batch.ts.
• Visual context is available via the recordScreen option, which embeds rrweb recordings into error payloads for DOM replay debugging.
• Framework adapters for Vue 2/3, React, and Nuxt allow consistent initOptions and traceError APIs across diverse codebases.
• Configurable transport supports both immediate and batched delivery to a configurable DSN, with localisation mode for offline-first scenarios.

Frequently Asked Questions

How does web-tracing handle duplicate errors?

When the scopeError option is enabled, web-tracing activates the batch error module located in packages/core/src/lib/err-batch.ts. This module maintains a cache of recent errors and aggregates identical messages occurring within a short time window into a single payload containing a count field. This dramatically reduces network traffic and storage costs compared to sending 20 separate events for the same infinite loop.

Can web-tracing work with React and Vue simultaneously?

Yes. web-tracing is designed as a framework-agnostic core with thin adapter packages. You can initialize the core SDK in a micro-frontend architecture where one application uses React (@web-tracing/react) and another uses Vue 3 (@web-tracing/vue3). Both adapters expose the same initOptions and traceError APIs, ensuring consistent error schema and transport configuration across your entire frontend ecosystem.

What data is included in web-tracing error payloads?

According to the schema defined in docs/guide/use/structure.md, error payloads include: eventId (error code), eventType (set to "error"), errMessage and errStack (parsed from the browser event), line and col (source location), triggerPageUrl (current URL), triggerTime and sendTime (timestamps), and optionally recordscreen (a base64-encoded rrweb blob for visual replay).

How does the screen recording feature impact performance?

The recordScreen feature utilizes rrweb to capture DOM mutations and user interactions. While this adds some memory overhead to buffer the recording buffer, web-tracing mitigates impact by only capturing a short window leading up to the error event and compressing the payload into a base64 blob. For high-traffic applications, you can disable the feature selectively or use tracesSampleRate to record only a percentage of sessions, balancing debugging capability with runtime performance.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}