Web-Tracing: A Frontend Monitoring Plugin That Covers Tracking, Performance, Errors, and Screen Recording

Intro

If you've ever tried to piece together what a user did right before a bug hit or why a page load felt slow, you know frontend monitoring can be a pain. Most tools either require heavy SDKs, cost a fortune, or only cover one piece of the puzzle. Enter Web-Tracing – a lightweight plugin that collects user behavior, performance metrics, errors, and even records screen sessions, all in one package.

It's open source, relatively new, and surprisingly feature-rich for a project that doesn't come with a bloated setup. If you're building a web app and need client-side observability without the overhead, this might be worth a look.

What It Does

Web-Tracing is a frontend monitoring plugin that sits in your browser code and tracks four main areas:

• User behavior tracking – clicks, page views, route changes, and custom events
• Performance monitoring – Core Web Vitals (LCP, FID, CLS), resource timing, and paint metrics
• Error capturing – uncaught exceptions, promise rejections, and resource loading failures
• Screen recording – visual replay of user sessions using mutation observer based recording (not full video, but DOM changes)

It aggregates this data and sends it to your own backend (or you can use the built-in simple server). The recording part is particularly interesting – it captures DOM mutations and replays them, giving you a pixel-perfect view of what happened without the bandwidth cost of real video.

Why It's Cool

Let's be real – there are plenty of monitoring tools. But Web-Tracing does a few things that stand out:

• All-in-one but modular. You don't have to use the screen recording if you don't need it. You can enable only error tracking or only performance, making it lightweight for simple use cases.
• Screen recording without the bloat. It uses MutationObserver and snapshotting, so replays are fast and tiny in size. This is a big deal if you're debugging interactions without installing a full session replay service.
• Zero-config backend option. The repo includes a basic Node.js server and SQLite integration. You can have data flowing in minutes, not hours.
• Good TypeScript support. The codebase is well typed, so it integrates cleanly if your project uses TS.

How to Try It

Getting started is straightforward. Install via npm:

npm install web-tracing

Then import and initialize in your app:

import Tracing from 'web-tracing';

new Tracing({
  dsn: 'https://your-backend-url/api/tracing',
  enableRecord: true, // turns on screen recording
  enablePerformance: true
});

You can also clone the repo and run the built-in demo server locally to see it in action:

git clone https://github.com/M-cheng-web/web-tracing
cd web-tracing
npm install
npm run dev

The README has a more complete example with configuration options for tracking, performance, and error handling.

Final Thoughts

Web-Tracing is a solid choice if you want to consolidate your frontend monitoring into a single library without paying for a SaaS product or dealing with massive SDKs. It's not trying to replace Sentry or Datadog for enterprise scale, but for indie projects, small teams, or internal tools, it hits a really nice sweet spot. The recording feature alone makes it worth a spin if you've ever wished you could see exactly what a user did before a bug appeared. Give it a try, and if you run into issues, the repo is active enough that you can open an issue or contribute.

Found this interesting? Follow us for more dev tools and open source projects: @githubprojects