Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("messageerror", (event) => { })
onmessageerror = (event) => { }
In addition to the properties listed below, properties from the parent interface, Event, are available.
dataRead only-
The data sent by the message emitter.
originRead only-
A string representing the origin of the message emitter.
lastEventIdRead only-
A string representing a unique ID for the event.
sourceRead only-
A message event source, which is either a WindowProxy, a
MessagePort, or aServiceWorkerobject representing the message emitter. portsRead only-
An array of
MessagePortobjects representing the ports associated with the channel the message is being sent through (where appropriate, e.g., in channel messaging or when sending a message to a shared worker).
This code uses addEventListener() to listen for messages and errors:
js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
channel.addEventListener("messageerror", (event) => {
console.error(event);
});
The same, but using the onmessage and onmessageerror event handler properties:
js
const channel = new BroadcastChannel("example-channel");
channel.onmessage = (event) => {
received.textContent = event.data;
};
channel.onmessageerror = (event) => {
console.log(event);
};
A common cause of messageerror events is attempting to send a SharedArrayBuffer object, or a buffer view backed by one, across agent clusters. The following code demonstrates this.
Page A runs the following code:
js
const channel = new BroadcastChannel("hello");
channel.postMessage({ data: new SharedArrayBuffer(1024) });
Page B runs the following code:
js
const channel = new BroadcastChannel("hello");
channel.addEventListener("messageerror", (event) => {
console.error("Message error");
});
Then page B will receive a messageerror event when it tries to deserialize the message sent from page A.