BugReplay

BugReplay records your browser screen along with what the page is doing: console logs, network requests, clicks, and navigations. When you stop, it gives you a link. Anyone who opens that link can watch the video and see the same logs you saw, in sync with the video.

It's meant for one person reporting bugs. You record, you share a URL, the other person opens it in any browser. They don't need an account and they don't need to install anything.

This project pulls ideas from Jam.dev and Marker.io. Both turn "here's what I did, here's what went wrong" into a shareable link with the technical context attached. Jam.dev is closest in shape: a browser extension that records a tab plus console and network, then gives you a replay URL. Marker.io leans more toward screenshots and integrations with issue trackers like Jira and Linear. BugReplay is a smaller, self-hosted take on the same idea. You run it yourself on Cloudflare's free tier, and there's no account system beyond a single password for uploading.

What gets recorded

• A .webm video of the tab or screen
• Console output (log, warn, error, info)
• Network requests with request and response bodies (bodies capped at 10 KB)
• Clicks, with target selector and coordinates
• Page navigations
• Environment info: user agent, viewport, URL

You can pause and resume from a small floating widget on the page. Pause stops both the video and the telemetry, so the timeline stays aligned.

How it works

Two pieces.

The browser extension captures the screen and the page events. It uses an offscreen document to record video because service workers can't run MediaRecorder. Content scripts wrap console, fetch, and XHR so the recording picks up what the page is actually doing.

The backend is a single Cloudflare Worker. It stores video and telemetry files in R2, keeps session metadata in D1, and serves the viewer page. Anyone with a session URL can watch the replay without logging in. Only the person recording needs a password.

Extension ──upload──► Worker ──► R2 (video + telemetry)
                         │
                         └──► D1 (metadata)

Viewer ◄──served by──► Worker

Project layout

extension/        # Chrome MV3 extension
  background/     # Service worker, orchestrates the recording
  offscreen/      # Records video, buffers telemetry, uploads
  content/        # Wraps console/fetch/XHR, captures clicks, shows the floating widget
  popup/          # Toolbar popup UI
worker/           # Cloudflare Worker
  src/            # API routes plus embedded viewer and dashboard HTML/CSS/JS
  migrations/     # D1 schema

Setup

You'll need a Cloudflare account, Node 18 or newer, and Chrome or Edge.

The full walkthrough (R2 bucket, D1 database, secrets, deployment, loading the extension) is in deployment_guide.md. It's written for someone who hasn't used Cloudflare before.

Short version:

1. Create the R2 bucket and D1 database.
2. Put your database ID in worker/wrangler.toml.
3. Set the AUTH_PASSWORD and JWT_SECRET secrets with wrangler secret put.
4. Apply the migration: wrangler d1 migrations apply bugreplay-db --remote.
5. Deploy: cd worker && npm install && wrangler deploy.
6. Load the extension/ folder at chrome://extensions with Developer mode on.
7. Put your worker URL in extension/background/config.local.js.

Cost

Runs on Cloudflare's free tier for personal use. A recording is a few MB, and the free limits are 100,000 Worker requests per day, 10 GB of R2, and 5 GB of D1. You won't get close.

Known limits

• XHR request headers aren't captured. Response bodies are capped at 10 KB.
• CORS is open on every endpoint. Fine for localhost and personal use. Lock it down before you put this anywhere public.
• The floating widget is part of the page, so it shows up in the video. Drag it to a corner before you start.
• The recording side is single-user. Anyone can watch a shared link.

Tech

Vanilla JS throughout. No frameworks, no build step. The only dependency in the Worker is jose, used to sign and verify JWTs.