JavaScript Worker error Event

Beginner
5 min read
Updated: Nov 2026
5 examples
Event
Decorative image with the word ERROR

Definition

The error event on a Worker fires when an error occurs in the worker script (MDN). Listen with addEventListener("error", …) or the onerror property.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for error. Start with this line.

JavaScript
worker.addEventListener("error", (event) => { … })
CallWhat it does
worker.addEventListener("error", (event) => { … })Primary signature.

Built into the browser. Listen with worker.addEventListener("error", …) or worker.onerror — no import required.

Library declarations
JavaScript
worker.addEventListener("error", (event) => { … })

Parameters

ParameterDescription
HandlerRequired. onerror or addEventListener

Return Value

Return ValueDescription
*Fires as a WorkerTrackEvent (listener receives the event).

JavaScript Examples

Example 1 — onerror (MDN)

Attach onerror when the worker script throws.

JavaScript
const code = "throw new Error('boom');";
const url = URL.createObjectURL(
  new Blob([code], { type: "application/javascript" })
);
const myWorker = new Worker(url);

myWorker.onerror = (event) => {
  console.log("There is an error with your worker!");
  event.preventDefault();
  myWorker.terminate();
  URL.revokeObjectURL(url);
};
Try It Yourself

How It Works

  1. Blob worker throws. Uncaught error inside the worker.
  2. onerror runs on main. MDN’s handler pattern.
  3. Log a clear message. User-facing or debug text.
  4. Clean up. Terminate and revoke the blob URL.

Example 2 — addEventListener("error")

Same event, listener style — easy to add multiple handlers.

JavaScript
const url = URL.createObjectURL(
  new Blob(["throw new Error('boom');"], { type: "application/javascript" })
);
const worker = new Worker(url);

worker.addEventListener("error", (event) => {
  console.log("error event fired");
  event.preventDefault();
  worker.terminate();
  URL.revokeObjectURL(url);
});
Try It Yourself

How It Works

  1. Register with addEventListener. Same event name: "error".
  2. Worker throws. Event bubbles to your handler.
  3. Log confirmation. Proves the listener ran.
  4. Prefer for multiple listeners. onerror is a single slot.

Example 3 — Read event.message

Browsers often expose a message string on the error event.

JavaScript
const url = URL.createObjectURL(
  new Blob(["throw new Error('boom');"], { type: "application/javascript" })
);
const worker = new Worker(url);

worker.onerror = (event) => {
  console.log(event.message || "unknown worker error");
  event.preventDefault();
  worker.terminate();
  URL.revokeObjectURL(url);
};
Try It Yourself

How It Works

  1. MDN type is Event. Browsers often give ErrorEvent fields.
  2. Read message safely. Fallback if missing.
  3. Still clean up. Terminate the broken worker.
  4. Good for UI. Show a short failure reason.

Example 4 — error vs message

Healthy workers reply on message; broken ones fire error.

JavaScript
function makeWorker(source) {
  const url = URL.createObjectURL(
    new Blob([source], { type: "application/javascript" })
  );
  const worker = new Worker(url);
  worker.onmessage = (e) => console.log("ok:", e.data);
  worker.onerror = (e) => {
    console.log("fail:", e.message || "error");
    e.preventDefault();
  };
  return worker;
}

// Healthy: makeWorker("self.onmessage=()=>self.postMessage('pong');")
// Broken:  makeWorker("throw new Error('boom');")
Try It Yourself

How It Works

  1. Attach both handlers. Success and failure paths.
  2. Healthy worker uses postMessage. Fires message.
  3. Broken worker throws. Fires error.
  4. Do not mix them up. App-level { type: "error" } is still a message.

Example 5 — Recover After Error

Prevent default noise, terminate, and show a recovery state.

JavaScript
const url = URL.createObjectURL(
  new Blob(["throw new Error('fatal');"], { type: "application/javascript" })
);
const worker = new Worker(url);

worker.onerror = (event) => {
  event.preventDefault();
  worker.terminate();
  URL.revokeObjectURL(url);
  console.log("error handled — worker terminated");
};
Try It Yourself

How It Works

  1. preventDefault(). May quiet default console UI in some browsers.
  2. terminate(). Stop the broken worker thread.
  3. Revoke blob URLs. Avoid leaking object URLs.
  4. Update UI. Tell the user you recovered (or offer retry).
Compatibility

Browser Support

The Worker error event is Baseline Widely available (MDN, since July 2015). Safe for dedicated/shared worker error handling.

✓ Baseline · Widely available

Worker error event

Supported across Chrome, Firefox, Safari, Edge, and Opera. Fires on the Worker when the worker script fails.

97% Browser support
Google Chrome error · full support
Full support
Microsoft Edge error · Chromium
Full support
Apple Safari error · full support
Full support
Mozilla Firefox error · full support
Full support
Opera error · full support
Full support
Internet Explorer Workers · legacy
Legacy support
Worker error Excellent

Bottom line: Use freely for dedicated workers. Always pair with message handlers and terminate on fatal errors.

Frequently Asked Questions

It fires on the Worker object when an error occurs in the worker script. Listen with worker.onerror or worker.addEventListener("error", handler) (MDN).
No. MDN marks the Worker error event as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. MDN notes it is available in Web Workers except Service Workers.
MDN documents it as a generic Event. In browsers you often receive an ErrorEvent with helpful fields such as message (and sometimes filename, lineno, colno).
message delivers successful postMessage data as event.data. error reports that the worker script failed. Do not confuse an application-level { type: "error" } message with the real error event.
Yes for production workers. Without a handler, worker failures can be easy to miss while the UI waits forever for a reply.
Some browsers let you call event.preventDefault() in the error handler to suppress the default error reporting UI/console behavior. Always still log and recover in your own code.

Next: WorkerLocation.hash

Learn how location.hash works inside a worker context.

hash tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Worker messageerror Event JavaScript WorkerLocation hash Property