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 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 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
auf einer Website lokal. ReportingObserver
bietet eine Lösung für dieses Problem. Wann?
Probleme auftreten, können Webentwickler informiert werden,
über sie.
Hintergrund
Vor einiger Zeit habe ich in einem Blogpost (Beobachtung deiner 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
und uns informieren, 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 Browser-Intervention bietet, liefert Ihnen die Entwicklertools als Erstes sie:
<ph type="x-smartling-placeholder">![Warnungen in der Entwicklertools-Konsole für Einstellungen und Eingriffe.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=6&hl=de)
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 ihn 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:
Hero-Image von Sieuwert-Otterloo auf Unsplash