ServiceWorkerContainer: messageerror — Ereignis · JavaScript-Referenz

Signatur

navigator.serviceWorker.addEventListener("messageerror", handler)

Beschreibung

Das Ereignis messageerror tritt am ServiceWorkerContainer (navigator.serviceWorker) auf, wenn eine Nachricht vom Service Worker an die Seite geschickt wurde (z. B. über client.postMessage()), der Browser sie aber auf Empfängerseite nicht deserialisieren kann. Statt eines message-Ereignisses bekommt die Seite dann ein messageerror-Ereignis.

Das Ereignis ist ein MessageEvent. Die Eigenschaft data ist in diesem Fall null, weil sich der Inhalt nicht wiederherstellen ließ. Nützlich sind vor allem source (der sendende ServiceWorker) und origin. Mehr Details zur Ursache liefert das Ereignis nicht.

Du kannst das Ereignis mit addEventListener("messageerror", …) oder über die Eigenschaft navigator.serviceWorker.onmessageerror abfangen. Das Ereignis ist nicht abbrechbar (cancelable) und steigt nicht auf (bubbles). Am besten nutzt du es fürs Protokollieren und als Absicherung: Die Seite kann dann einen Zustand neu anfordern oder auf einfachere Datenformate ausweichen.

Typische Ursachen sind Objekte, die sich zwar serialisieren, auf Empfängerseite aber nicht wiederherstellen lassen. Beispiele sind ein SharedArrayBuffer ohne passende Cross-Origin-Isolation oder ein WebAssembly.Module über Agent-Cluster-Grenzen hinweg. Nicht klonbare Werte wie Funktionen oder DOM-Knoten lösen dagegen schon beim Senden einen DataCloneError aus und führen nicht zu messageerror.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein MessageEvent.

Beispiele

Fehler per addEventListener protokollieren

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', (event) => {
    console.log('Nachricht vom SW:', event.data);
  });

  navigator.serviceWorker.addEventListener('messageerror', (event) => {
    // event.data ist null – der Inhalt ließ sich nicht deserialisieren
    console.warn('Nachricht vom Service Worker unlesbar', {
      data: event.data,
      quelle: event.source?.scriptURL
    });
  });
}

Nachricht vom Service Worker unlesbar { data: null, quelle: "https://example.com/sw.js" }

Über die on-Property mit Rückfall auf Neuanforderung

navigator.serviceWorker.onmessageerror = async (event) => {
  console.error('Deserialisierung fehlgeschlagen – fordere Daten als JSON neu an');
  const registration = await navigator.serviceWorker.ready;
  // Den Worker bitten, die Daten in einem einfachen Format zu senden
  registration.active?.postMessage({ type: 'RESEND', format: 'json' });
};

Deserialisierung fehlgeschlagen – fordere Daten als JSON neu an

Listener gezielt wieder entfernen

const onMessageError = (event) => {
  console.warn('messageerror empfangen', event.source);
};

navigator.serviceWorker.addEventListener('messageerror', onMessageError);

// Später, z. B. beim Verlassen einer Ansicht in einer SPA:
navigator.serviceWorker.removeEventListener('messageerror', onMessageError);

// Alternativ mit AbortController
const controller = new AbortController();
navigator.serviceWorker.addEventListener('messageerror', onMessageError, {
  signal: controller.signal
});
controller.abort(); // entfernt den Listener

Senderseite im Service Worker (sw.js)

// sw.js – schickt Daten an alle Fenster-Clients
self.addEventListener('message', async (event) => {
  if (event.data?.type === 'RESEND') {
    const clients = await self.clients.matchAll({ type: 'window' });
    for (const client of clients) {
      // Einfache, strukturiert klonbare Daten verringern das Risiko von messageerror
      client.postMessage({ type: 'STATE', payload: JSON.stringify({ ok: true }) });
    }
  }
});

// Wichtig · Fallstricke

Selten und schwer nachzustellen: messageerror tritt nur auf, wenn die Deserialisierung beim Empfänger fehlschlägt. Fehler beim Serialisieren (Funktionen, DOM-Knoten, Symbole) lösen dagegen schon beim Aufruf von postMessage() synchron einen DataCloneError aus.
Keine Nutzdaten: event.data ist null. Es gibt keine Fehlermeldung und keinen Fehlercode. Wenn du eine eigene Nachrichten-ID mitschickst, kannst du darüber nicht nachvollziehen, welche Nachricht betroffen war.
Zeitpunkt der Nachrichtenzustellung: Nachrichten an den Container werden erst zugestellt, wenn startMessages() aufgerufen wurde, onmessage gesetzt ist oder das Dokument fertig geladen ist. Ein Listener, der nur per addEventListener('messageerror', …) registriert wird, startet die Nachrichtenwarteschlange nicht automatisch.
Richtung: Das Ereignis betrifft Nachrichten vom Service Worker an die Seite. Für Nachrichten an den Service Worker gibt es das messageerror-Ereignis im ServiceWorkerGlobalScope.
Kompatibilität: Wird in aktuellen Versionen von Chromium-Browsern und Firefox unterstützt, in Safari erst in neueren Versionen (ab etwa 16.4). Service Worker funktionieren nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

ServiceWorkerContainer ServiceWorkerContainer: message ServiceWorkerContainer.startMessages() ServiceWorkerGlobalScope: messageerror Client.postMessage() MessageEvent