ReportingObserver.disconnect() — Methode · JavaScript-Referenz

Signatur

ReportingObserver.prototype.disconnect()

Beschreibung

Die Methode disconnect() eines ReportingObserver beendet die Beobachtung, die zuvor mit observe() gestartet wurde. Danach löst der Browser für neue Berichte (z. B. Hinweise auf veraltete APIs deprecation, Eingriffe des Browsers intervention oder CSP-Verstöße csp-violation) den Callback des Observers nicht mehr aus.

Sinnvoll ist das, wenn Berichte nur für einen bestimmten Zeitraum gesammelt werden sollen, etwa während der Initialisierung einer Anwendung, in einem Testlauf oder solange ein bestimmtes Modul bzw. eine Komponente aktiv ist. So vermeidet man unnötige Callback-Aufrufe und Speicherlecks durch Referenzen, die im Callback festgehalten werden.

Wichtig: Berichte, die schon erzeugt, aber noch nicht an den Callback ausgeliefert wurden, bleiben in der Berichtswarteschlange des Observers. Wer sie nicht verlieren möchte, ruft vor disconnect() die Methode takeRecords() auf und verarbeitet das Ergebnis selbst.

Beispiele

Observer nach der Startphase beenden

const observer = new ReportingObserver((reports) => {
  for (const report of reports) {
    console.log(`[${report.type}]`, report.body.message);
  }
}, { types: ['deprecation', 'intervention'], buffered: true });

observer.observe();

// Nach 10 Sekunden keine weiteren Berichte mehr sammeln
setTimeout(() => {
  observer.disconnect();
  console.log('ReportingObserver beendet');
}, 10_000);

ReportingObserver beendet

Ausstehende Berichte vor dem Trennen sichern

const collected = [];

const observer = new ReportingObserver((reports) => {
  collected.push(...reports);
}, { buffered: true });

observer.observe();

const stopAndFlush = () => {
  // Noch nicht ausgelieferte Berichte abholen
  const pending = observer.takeRecords();
  collected.push(...pending);
  observer.disconnect();

  const payload = JSON.stringify(collected.map((r) => r.toJSON()));
  navigator.sendBeacon('/api/reports', payload);
};

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') stopAndFlush();
});

Observer an die Lebensdauer einer Komponente koppeln

class ReportPanel {
  #observer;

  mount() {
    if (!('ReportingObserver' in window)) return;
    this.#observer = new ReportingObserver((reports) => {
      console.warn(`${reports.length} neue Berichte`);
    }, { types: ['deprecation'] });
    this.#observer.observe();
  }

  unmount() {
    // Aufräumen, damit der Callback nicht mehr feuert
    this.#observer?.disconnect();
    this.#observer = undefined;
  }
}

const panel = new ReportPanel();
panel.mount();
// ... später
panel.unmount();

// Wichtig · Fallstricke

Warteschlange: disconnect() liefert ausstehende Berichte nicht mehr aus. Wer sie braucht, ruft vorher takeRecords() auf.
Wiederverwendung: Nach disconnect() kann derselbe Observer mit observe() erneut gestartet werden. Mit buffered: true können dabei schon früher erzeugte Berichte noch einmal ankommen.
Mehrfaches Aufrufen von disconnect() ist harmlos und wirft keinen Fehler.
Kompatibilität: Die Reporting API wird in Chromium-Browsern voll unterstützt. Firefox und Safari unterstützen sie nur teilweise oder erst in neueren Versionen, und je nach Browser werden unterschiedliche Berichtstypen geliefert. Vorher per 'ReportingObserver' in window prüfen. Die API ist nur in sicheren Kontexten (HTTPS) zuverlässig verfügbar.

Siehe auch

PerformanceObserver.disconnect() ReportingObserver.observe() ReportingObserver.takeRecords() ResizeObserver.disconnect() MutationObserver.disconnect()