Codezustand mit der ReportingObserver API ermitteln

Suchen Sie in Ihren Produktions-Apps nach eingestellten APIs.

Eric Bidelman
Twitter GitHub Startseite

ReportingObserver informiert Sie, wenn auf Ihrer Website eine eingestellte API verwendet oder eine Browserintervention ausgeführt wird. Die Grundfunktionen sind ursprünglich in Chrome 69 verfügbar. Ab Chrome 84 kann es in Workern verwendet werden.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

Verwenden Sie den Callback, um Berichte zur Analyse an ein Back-End oder einen Analyseanbieter zu senden.

Warum ist das nützlich? Vor dieser API waren Einstellungs- und Eingriffswarnungen in den Entwicklertools nur als Konsolennachrichten verfügbar. Insbesondere werden Eingriffe nur durch verschiedene reale Einschränkungen wie Geräte- und Netzwerkbedingungen ausgelöst. Daher werden diese Meldungen möglicherweise nie angezeigt, wenn Sie eine Website lokal entwickeln oder testen. ReportingObserver bietet eine Lösung für dieses Problem. Wenn Nutzer in freier Wildbahn auf mögliche Probleme stoßen, können Webentwickler darüber benachrichtigt werden.

Hintergrund

Vor einiger Zeit habe ich einen Blogpost (Ihre Webanwendung beobachten) geschrieben, da es mich faszinierend war, wie viele APIs es für das Monitoring der Vorgänge in einer Webanwendung gibt. Es gibt beispielsweise APIs, die Informationen über das DOM abrufen können: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver erfasst Leistungsmessungen. Methoden wie window.onerror und window.onunhandledrejection teilen uns sogar mit, wenn etwas schiefgeht.

Es gibt jedoch andere Arten von Warnungen, die von den vorhandenen APIs nicht erfasst werden. Wenn auf deiner Website eine eingestellte API verwendet wird oder auf eine Browserintervention reagiert wird, informiert dich die Entwicklertools zuerst darüber:

Warnungen in der Entwicklertools-Konsole im Hinblick auf Einstellungen und Eingriffe.
Vom Browser ausgelöste Warnungen in der Entwicklertools-Konsole.

Man könnte davon ausgehen, dass window.onerror diese Warnungen erfasst. Das ist nicht der Fall. Das liegt daran, dass window.onerror nicht bei Warnungen ausgelöst wird, die direkt vom User-Agent selbst generiert wurden. Sie wird bei Laufzeitfehlern (JavaScript-Ausnahmen und Syntaxfehlern) ausgelöst, die durch die Codeausführung verursacht werden.

ReportingObserver nimmt das Spiel auf. Sie bietet eine programmatische Möglichkeit, sich über vom Browser ausgegebene Warnungen wie Einstellung und Eingriffe zu benachrichtigen. Sie können es als Berichtstool verwenden und müssen sich nicht länger fragen, ob Nutzer auf Ihrer Live-Website unerwartete Probleme haben.

Mit der API

ReportingObserver unterscheidet sich nicht von den anderen Observer APIs wie IntersectionObserver und ResizeObserver. Sie rufen sie zurück und erhalten Informationen. Die Informationen, die der Callback erhält, sind eine Liste von Problemen, die die Seite verursacht hat:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

Gefilterte Berichte

Berichte lassen sich so filtern, dass nur bestimmte Berichtstypen berücksichtigt werden. Derzeit gibt es zwei Berichtstypen: 'deprecation' und 'intervention'.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

Zwischengespeicherte Berichte

Verwenden Sie die Option buffered: true, wenn Sie die Berichte sehen möchten, die vor der Erstellung der Observer-Instanz generiert wurden:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

Diese Option eignet sich hervorragend für Situationen wie Lazy Loading einer Bibliothek, die ein ReportingObserver verwendet. Der Beobachter wird erst später hinzugefügt, aber Sie verpassen nichts, was früher beim Seitenaufbau passiert ist.

Nicht mehr beobachten

Beenden Sie die Beobachtung mit der Methode disconnect():

observer.disconnect();

Beispiele

Eingriffen des Browsers an einen Analyseanbieter melden

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

Benachrichtigungen erhalten, wenn APIs entfernt werden

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

Fazit

ReportingObserver bietet Ihnen eine zusätzliche Möglichkeit zum Erkennen und Überwachen potenzieller Probleme in Ihrer Webanwendung. Es ist sogar ein nützliches Tool, um den Zustand Ihrer Codebasis (oder das Fehlen dieser) zu verstehen. Senden Sie Berichte an ein Back-End, erfahren Sie über reale Probleme, aktualisieren Sie den Code,

Zukünftige Arbeiten

Ich hoffe, dass ReportingObserver in Zukunft die De-facto-API zum Erkennen aller Arten von Problemen in JavaScript wird. Stellen Sie sich eine API vor, um alle Fehler in Ihrer Anwendung abzufangen:

  • Browserprogramme
  • Einstellung von Produkten und Funktionen
  • Verstöße gegen die Funktionsrichtlinie. Siehe Chromium-Problem 867471.
  • JS-Ausnahmen und -Fehler (derzeit von window.onerror bereitgestellt).
  • Nicht verarbeitete JS-Promise-Ablehnungen (derzeit bereitgestellt von window.onunhandledrejection)

Weitere Informationen:

Hero-Image von Sieuwert Otterloo auf Unsplash