Suchen Sie in Ihren Produktions-Apps nach eingestellten APIs.
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:
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