MessagePort: messageerror event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2023⁩.

Note: This feature is available inWeb Workers.

Themessageerror event is fired on aMessagePort object when it receives a message that can't be deserialized.

This event is not cancellable and does not bubble.

Syntax

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

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

Event properties

This interface also inherits properties from its parent,Event.

MessageEvent.dataRead only: The data sent by the message emitter.
MessageEvent.originRead only: A string representing the origin of the message emitter.
MessageEvent.lastEventIdRead only: A string representing a unique ID for the event.
MessageEvent.sourceRead only: AMessageEventSource (which can be aWindowProxy,MessagePort, orServiceWorker object) representing the message emitter.
MessageEvent.portsRead only: An array containing allMessagePort objects sent with the message, in order.

A common cause ofmessageerror events is attempting to send aSharedArrayBuffer object, or a buffer view backed by one, acrossagent clusters. For example, a window is not in the same agent cluster as a shared worker it created, so suppose the page runs the following code:

const worker = new SharedWorker("worker.js");worker.port.start();worker.port.addEventListener("message", (event) => {  worker.port.postMessage(new SharedArrayBuffer(1024));});

Andworker.js contains the following code:

self.addEventListener("connect", (event) => {  console.log("Hello");  const port = event.ports[0];  port.start();  port.postMessage("Port connected");  port.addEventListener("messageerror", (event) => {    console.log("Message error");  });});

Then the shared worker will receive amessageerror event when it tries to deserialize the message sent from the window.

Note:You can use browser devtools to debug your SharedWorker, by entering a URL in your browser address bar to access the devtools workers inspector; for example, in Chrome, the URLchrome://inspect/#workers, and in Firefox, the URLabout:debugging#workers.