Codezustand mit der ReportingObserver API ermitteln

Sie finden eingestellte APIs in Ihren Produktionsanwendungen.

ReportingObserver informiert dich, wenn deine Website eine eingestellte API verwendet oder ausgeführt wird Browser-Intervention. Die Grundfunktionen haben ursprünglich in Chrome 69. Ab Chrome 84 kann sie 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 an ein Backend oder einen Analyseanbieter für Analyse.

Warum ist das nützlich? Bis zur Veröffentlichung dieser API wurden Einstellungs- und Interventionswarnungen wie folgt angezeigt: sind in den Entwicklertools nur als Console-Nachrichten verfügbar. Interventionen werden nur durch verschiedene reale Einschränkungen wie Geräte und Netzwerk ausgelöst. . Daher sehen Sie diese Meldungen beim Entwickeln/Testen eine Website lokal. ReportingObserver bietet eine Lösung für dieses Problem. Wann? möglicherweise Probleme auftreten, können Webentwickler informiert werden, über sie.

Hintergrund

Vor einiger Zeit habe ich in einem Blogpost (Beobachten Ihrer Web-App) Es war faszinierend, wie viele APIs es gibt, „Dinge“ in einer Webanwendung. Es gibt z. B. APIs, die Daten Informationen zum DOM: ResizeObserver, IntersectionObserver, MutationObserver PerformanceObserver die Leistungsmessungen erfasst. Und Methoden wie window.onerror und window.onunhandledrejection wenn etwas schiefgeht.

Es gibt jedoch auch andere Arten von Warnungen, die nicht vom vorhandenen APIs. Wenn Ihre Website eine eingestellte API verwendet oder mit einer Browsereingriff bietet, liefert Ihnen die Entwicklertools als Erstes sie:

</ph>

Man könnte natürlich denken, dass window.onerror diese Warnungen erfasst. Nein. Das liegt daran, dass window.onerror nicht bei Warnungen ausgelöst wird, die direkt durch den User-Agent selbst. Es wird bei Laufzeitfehlern ausgelöst (JavaScript-Ausnahmen und Syntaxfehler) verursacht werden.

ReportingObserver erkennt das Spiel. Es bietet eine programmatische Möglichkeit, werden über vom Browser ausgegebene Warnungen informiert, z. B. zu Einstellungen und Maßnahmen. Sie können es als Berichtstool verwenden und und sich fragen, ob auf Ihrer Live-Website unerwartete Probleme auftreten.

Mit der API

ReportingObserver unterscheidet sich nicht von den anderen Observer-APIs wie IntersectionObserver und ResizeObserver. Sie rufen es zurück, gibt es 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 können so gefiltert werden, dass nur bestimmte Berichtstypen berücksichtigt werden. Im Moment Es gibt zwei Berichtstypen: 'deprecation' und 'intervention'.

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

Gepufferte Berichte

Mit der Option buffered: true können Sie die Berichte aufrufen, die vor der Erstellung der Beobachter-Instanz generiert wurde:

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

Diese Option eignet sich hervorragend für das Lazy Loading einer Bibliothek, ReportingObserver Der Beobachter wird zu spät hinzugefügt, aber Sie verpassen keine was beim Seitenaufbau passiert ist.

Beobachtung beenden

Beenden Sie die Beobachtung mit der Methode disconnect():

observer.disconnect();

Beispiele

Browsermaßnahmen 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 dir eine zusätzliche Möglichkeit, Daten zu ermitteln und zu überwachen mögliche Probleme in Ihrer Webanwendung. Es ist sogar ein nützliches Tool, um die Integrität Ihrer Codebasis (oder fehlender Code) liegt. Berichte an ein Backend senden, über reale Probleme, aktualisiere den Code und gewinne.

Zukünftige Arbeiten

Ich hoffe, dass ReportingObserver in Zukunft zur De-facto-API für alle Arten von Problemen in JavaScript erkennen. Stellen Sie sich eine API vor, um alles zu erfassen die in Ihrer App schiefgeht:

• Browseraktionen
• Verworfene Produkte/Funktionen
• Verstöße gegen die Funktionsrichtlinie. Weitere Informationen finden Sie unter Chromium-Problem 867471.
• JS-Ausnahmen und -Fehler (wird derzeit von window.onerror bedient).
• Unbehandelte JS-Promise-Ablehnungen (wird derzeit von window.onunhandledrejection bedient)

Weitere Informationen:

• W3c-Spezifikationen
• chromestatus.com-Eintrag

Hero-Image von Sieuwert-Otterloo bei Unsplash