JavaScript Worker error Event

What You’ll Learn

The error event of the Worker interface fires when an error occurs in the worker. Learn onerror vs addEventListener("error"), how it differs from the message event, and how to recover—with five examples and try-it labs.

Introduction

Workers run on another thread. If their script throws, the main page does not get a normal JavaScript exception in your postMessage call. Instead, the Worker object fires an error event.

Attach a handler early—before work starts—so you can show a friendly message, log details, and optionally terminate() a broken worker.

Understanding the Worker error Event

An instance event on Worker that fires when an error occurs in the worker.

• Event name — "error".
• Handler property — worker.onerror.
• Listener — worker.addEventListener("error", handler).
• Event type (MDN) — a generic Event; browsers often provide ErrorEvent fields such as message.
• Baseline Widely available on MDN (since July 2015); available in Web Workers except Service Workers.

📝 Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("error", (event) => { })

onerror = (event) => { }

Event type

A generic Event (per MDN). In practice you may also read ErrorEvent properties such as message.

Typical pattern

const myWorker = new Worker("worker.js");

myWorker.onerror = (event) => {
  console.log("There is an error with your worker!");
  console.log(event.message); // often available
};

⚖️ error vs Related Ideas

Examples Gallery

Examples follow MDN Worker: error event. Labs use blob workers that throw so you can see the handler fire.

const myWorker = new Worker(url);

myWorker.onerror = (event) => {
  console.log("There is an error with your worker!");
  event.preventDefault();
};

There is an error with your worker!

worker.addEventListener("error", (event) => {
  out.textContent = "error event fired";
  event.preventDefault();
});

error event fired

worker.onerror = (event) => {
  console.log(event.message || "unknown worker error");
  event.preventDefault();
};

Uncaught Error: boom

worker.onmessage = (e) => console.log("ok:", e.data);
worker.onerror = (e) => {
  console.log("fail:", e.message || "error");
  e.preventDefault();
};

ok: pong
fail: Uncaught Error: boom

worker.onerror = (event) => {
  event.preventDefault();
  worker.terminate();
  // create a new Worker(...) if the feature must continue
};

error handled — worker terminated

🚀 Common Use Cases

• Show a toast when a background job crashes.
• Log worker failures to your monitoring service.
• Stop waiting UI when a reply will never arrive.
• Restart a worker pool member after a fatal script error.
• Debug blob-worker demos when the script string has a typo.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers except Service Workers.
• MDN event type is a generic Event; browsers often supply ErrorEvent details.
• Attach handlers before starting heavy work.
• Related learning: message, messageerror, terminate(), postMessage(), Worker().

💡 Best Practices