demo · v140

Worker Breadcrumb Bridge

A Worker (and SharedWorker) does not have access to the main thread's window.crashReporter. The real pattern is a bridge: the worker postMessages structured breadcrumb objects to the main thread, which stamps them into crashReporter.set(). This demo simulates a CPU-intensive worker posting incremental progress keys that survive into a crash report.

Worker thread

Runs CPU work. Has no access to crashReporter. Posts breadcrumbs via postMessage.

[ waiting for worker to start ]
→ postMessage ← control

Main thread

Receives messages. Calls crashReporter.set(key, value) to stamp into the crash payload.

[ waiting for messages ]

Live crashReporter key store

keyvaluesource
—

Simulated Reporting API crash payload

Start the worker and click "Simulate crash" to see the payload.

// ── Worker (worker.js) — no access to crashReporter ──────────
self.onmessage = ({ data }) => {
  if (data.type === 'tick') {
    // Post breadcrumb to main thread
    self.postMessage({
      type: 'breadcrumb',
      key: `worker_step_${data.step}`,
      value: `chunk_${data.step}_done at ${Date.now()}`
    });
  }
};

// ── Main thread — stamps breadcrumbs via postMessage bridge ──
const worker = new Worker('worker.js');

worker.onmessage = ({ data }) => {
  if (data.type === 'breadcrumb') {
    // crashReporter only exists on the main Document
    window.crashReporter?.set(data.key, data.value);
    console.log('Stamped:', data.key, '=', data.value);
  }
};

// Advance work
worker.postMessage({ type: 'tick', step: 1 });

see also