Uncaptured Error Events

An error that no scope catches fires an uncapturederror event at the device, carrying the GPUError; that is how the later: lines in Validation vs Async Errors arrived. Without a listener, Chrome 1 only prints a console warning. Calling preventDefault() marks the event handled, and in testing it suppressed that warning:

A production uncapturederror handlerJavaScript

device.addEventListener('uncapturederror', (event) => {
  event.preventDefault();                          // we report it ourselves
  navigator.sendBeacon('/gpu-errors', JSON.stringify({   // hypothetical telemetry endpoint
    type: event.error.constructor.name, message: event.error.message }));
});

Two cautions. Chrome batches WebGPU calls on their way to the GPU process: a test page that only created invalid objects received no events until it awaited device.queue.onSubmittedWorkDone(). And the event says something failed, not which call, so it is a safety net; code that must react to one failure uses an error scope.

An uncapturederror handler catching deliberate mistakes while the shelf keeps animatingHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
  .stage { position: relative; width: 100%; max-width: 600px; }
  .stage canvas { display: block; width: 100%; }
  .stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
  <canvas id="view" width="600" height="340"></canvas>
  <canvas id="labels" width="600" height="340"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');
const log = [];

function showMessage(text) {                     // 2D fallback when WebGPU is missing
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}
function drawLog() {
  ink.clearRect(0, 0, 600, 340);
  ink.fillStyle = 'rgba(255,255,255,0.92)'; ink.fillRect(0, 170, 600, 170);
  ink.fillStyle = '#222'; ink.font = 'bold 13px system-ui, sans-serif';
  ink.fillText(`uncapturederror events handled: ${log.length}`, 12, 192);
  ink.font = '12px ui-monospace, monospace';
  log.slice(-6).forEach((line, i) => { ink.fillStyle = '#8a2b2b'; ink.fillText(line.slice(0, 84), 12, 214 + i * 20); });
}

const code = /* wgsl */ `
@group(0) @binding(0) var<uniform> time: f32;
@vertex fn vs(@builtin(vertex_index) v: u32, @builtin(instance_index) i: u32) -> @builtin(position) vec4f {
  let q = vec2f(f32(v & 1), f32(v >> 1));
  let h = 0.5 + 0.25 * sin(time * 2 + f32(i));
  return vec4f(-0.9 + f32(i) * 0.3 + q.x * 0.22, 0.05 + q.y * h * 0.8, 0, 1);
}
@fragment fn fs() -> @location(0) vec4f { return vec4f(0.08, 0.40, 0.75, 1); }`;

// Deliberate mistakes, one every 1.5 seconds; none of them throws in JavaScript.
const mistakes = [
  (device) => device.createBuffer({ size: 4, usage: 0 }),
  (device) => device.createBuffer({ size: 16, usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.STORAGE }),
  (device) => device.createTexture({ size: [8, 8], format: 'rgba8unorm', usage: 0 })];

async function main() {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return showMessage('WebGPU is not available in this browser');
  const device = await adapter.requestDevice();
  device.addEventListener('uncapturederror', (event) => {
    event.preventDefault();                          // we report it ourselves
    log.push(`${event.error.constructor.name}: ${event.error.message.split('\n')[0]}`);
    drawLog();                                       // a real app would send telemetry here
  });
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });
  const module = device.createShaderModule({ code });
  const pipeline = device.createRenderPipeline({ layout: 'auto', primitive: { topology: 'triangle-strip' },
    vertex: { module }, fragment: { module, targets: [{ format }] } });
  const time = device.createBuffer({ size: 4, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
  const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [{ binding: 0, resource: { buffer: time } }] });

  let next = 0, count = 0;
  function frame(now) {
    if (now > next) {                                // make one mistake, then let the frame go on
      mistakes[count++ % mistakes.length](device);
      next = now + 1500;
    }
    device.queue.writeBuffer(time, 0, new Float32Array([now / 1000]));
    const encoder = device.createCommandEncoder();
    const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
      clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
    pass.setPipeline(pipeline);
    pass.setBindGroup(0, group);
    pass.draw(4, 7);
    pass.end();
    device.queue.submit([encoder.finish()]);         // events arrive once work is flushed
    requestAnimationFrame(frame);
  }
  drawLog();
  requestAnimationFrame(frame);
}
main();
</script>

MENU