# Benefits of Using web-tracing for Frontend Error Monitoring

> Discover the benefits of web-tracing for frontend error monitoring. Capture JS errors, resource failures & promise rejections with low overhead and smart filtering. Improve your app's stability today.

- Repository: [m-cheng-web/web-tracing](https://github.com/m-cheng-web/web-tracing)
- Tags: benefits
- Published: 2026-03-06

---

**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`](https://github.com/m-cheng-web/web-tracing/blob/main/options.ts)** – Validates configuration (DSN, sampling rates, ignore patterns) and exposes a reactive options store.
- **[`eventBus.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/eventBus.ts)** – Registers global listeners for `error`, `unhandledrejection`, and `console.error` events.
- **[`err.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/vue2/index.ts) and [`packages/vue3/index.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/vue3/index.ts) expose `initOptions` and `traceError` with Vue-specific lifecycle hooks.
- **React** – [`packages/react/index.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/react/index.ts) provides identical methods for class and functional components.
- **Nuxt** – [`packages/nuxt/index.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/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

```typescript
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`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/core/src/lib/options.ts) and **error init** – [`packages/core/src/lib/err.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/core/src/lib/err.ts).

### Vue 3 Integration

```typescript
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`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/vue3/index.ts).

### Batch Error Handling

```typescript
// 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`](https://github.com/m-cheng-web/web-tracing/blob/main/packages/core/src/lib/err-batch.ts).

## Summary

- **web-tracing** provides a unified pipeline in [`packages/core/src/lib/err.ts`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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`](https://github.com/m-cheng-web/web-tracing/blob/main/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.