JavaScript Worker messageerror Event

What You’ll Learn

The messageerror event of the Worker interface fires when it receives a message that cannot be deserialized. Learn onmessageerror vs addEventListener("messageerror"), how it differs from message and error, and how to feature-detect—with five examples and try-it labs.

Introduction

Most worker replies arrive through the message event with a usable event.data value. Rarely, a message reaches the main thread but cannot be deserialized. Then the Worker object fires messageerror instead of a normal message.

Think of three channels: message (success), messageerror (bad decode), and error (worker script failed). Production code that depends on workers should plan for all three when support allows.

Understanding the Worker messageerror Event

An instance event on Worker that fires when a received message cannot be deserialized.

• Event name — "messageerror".
• Handler property — worker.onmessageerror.
• Listener — worker.addEventListener("messageerror", handler).
• Event type — a MessageEvent (inherits from Event).
• Not cancellable and does not bubble (per MDN).
• Limited availability on MDN (not Baseline); available in Web Workers except Service Workers.

📝 Syntax

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

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

onmessageerror = (event) => { }

Event type

A MessageEvent. Same family as the successful message event.

Event properties (MessageEvent)

Typical pattern (MDN idea)

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

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});

worker.addEventListener("messageerror", (event) => {
  console.error("Error receiving message from worker:", event);
});

⚖️ messageerror vs Related Ideas

Examples Gallery

Examples follow MDN Worker: messageerror event. Labs use blob workers and focus on listeners, feature detection, and contrasts—plain cloneable replies still use message.

worker.addEventListener("message", (event) => {
  console.log(`Received: ${event.data}`);
});

worker.addEventListener("messageerror", (event) => {
  console.error("Error receiving message from worker:", event);
});

messageerror listener ready
Received: I'm alive!

worker.onmessage = (event) => {
  console.log(`Received: ${event.data}`);
};

worker.onmessageerror = (event) => {
  console.error("Error receiving message from worker:", event);
};

onmessageerror ready
Received: I'm alive!

worker.onmessage = (e) => updateUI(e.data);
worker.onmessageerror = () => showDecodeError();

handlers: message + messageerror
UI: result 42

const supported = "onmessageerror" in Worker.prototype;

if (supported) {
  worker.onmessageerror = (event) => {
    console.error("messageerror", event);
  };
}

onmessageerror supported: true

worker.onmessage = (e) => log("ok", e.data);
worker.onmessageerror = () => log("decode-fail");
worker.onerror = (e) => {
  log("script-fail", e.message || "error");
  e.preventDefault();
};

ok: pong
script-fail: Uncaught Error: boom

🚀 Common Use Cases

• Fail fast when a worker reply cannot be decoded.
• Log deserialize issues to monitoring instead of waiting forever.
• Show a clear “bad reply” UI separate from script crashes.
• Harden protocols that transfer exotic objects or ports.
• Feature-detect support in progressive-enhancement worker wrappers.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers except Service Workers.
• Event type is MessageEvent; not cancellable and does not bubble.
• Do not confuse with error (script failure) or a successful message.
• Related learning: message, error, postMessage(), Worker().

💡 Best Practices