ReportingObserver API: Ein Blick auf den Code von Webseiten aus einer neuen Perspektive

Das Material, dessen Übersetzung wir heute veröffentlichen, ist der ReportingObserver API gewidmet, einem Mechanismus, mit dem Sie mehr über die Verwendung veralteter Funktionen erfahren können und der Browser die Arbeit des Seitencodes stört . ReportingObserver ist Teil dieser W3C-Spezifikation.

Warum wird das benötigt?

Angenommen, Sie haben vor ein paar Tagen ein wichtiges Webprojekt gestartet. In vielen Fällen haben Benutzer bereits begonnen, sich auf seiner Website zu registrieren. Jeder weiß, dass solche Projekte, um es einfach auszudrücken, Unternehmen Geld bringen würden, stabil funktionieren sollten. Lassen Sie uns nun darüber nachdenken, was passiert, wenn Ihr Client auf das falsche Verhalten der Website stößt, dessen Ursache ein Fehler ist, und Sie nichts darüber wissen. Er wird den Fehler nicht korrigieren, dessen Auftreten der Entwickler nicht kennt, er wird sich immer wieder manifestieren und dies wird sich letztendlich negativ auf die Geschäftsziele des Projekts auswirken.

Der Site-Besucher weiß möglicherweise nichts über die Webentwicklung. Wenn sich die Site also merkwürdig verhält, ist es unwahrscheinlich, dass er in die Konsole schaut, um zu versuchen, das Problem zu verstehen, das als Nachricht ausgedrückt wird, die mit [Intervention] oder beginnt [Deprecation] .

In der Tat sollten sich Website-Besucher nicht um Fehler kümmern. Alles, was sie brauchen, ist Stabilität, Bequemlichkeit und Vorhersehbarkeit. Fehler sind ein Entwicklerproblem, und die ReportingObserver API hilft Entwicklern bei der Lösung dieses Problems. Mit ReportingObserver Sie dem Entwickler Berichte über die Verwendung veralteter APIs oder über Störungen der Browserseite senden. Andere Fehlerbehandlungstools reagieren nicht auf solche Dinge.

So sieht die Arbeit mit ReportingObserver aus:

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

Lassen Sie uns über die Verwendung dieser API sprechen.

ReportingObserver-API-Struktur

Browser verfügen über APIs, mit denen Fehler abgefangen werden können. Zum Beispiel window.onerror . window.onerror jedoch nicht alle Problemsituationen, die während des Betriebs der Seite auftreten. Mit diesem Tool können Sie beispielsweise Laufzeitfehler ermitteln, die durch JavaScript-Ausnahmen oder Syntaxfehler in Ihrem Code verursacht werden. Wenn Sie jedoch eine Benachrichtigung über die Verwendung einer veralteten Funktion oder eines Browser-Eingriffs erhalten, window.onerror nicht auf eine solche Benachrichtigung. In dieser Situation ist ReportingObserver hilfreich.

Um die ReportingObserver API verwenden zu können, müssen Sie das entsprechende Beobachterobjekt erstellen, indem Sie ihm einen Rückruf bereitstellen. Beim Aufruf werden Berichte in Form einer Liste der auf der Seite aufgetretenen Probleme an das Objekt gesendet. Wir haben bereits den Code überprüft, der für die Arbeit mit ReportingObserver erforderlich ist. Schauen wir uns nun ein Beispiel an, welche Daten an den Rückruf gesendet werden:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

Wenn Sie mit ReportingObserver Sie Berichte filtern. Im Folgenden finden Sie beispielsweise ein Design, mit dem Sie nur Berichte über die Verwendung veralteter Funktionen erhalten können:

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

Wenn Sie beim Erstellen des ReportingObserver Objekts die Eigenschaft buffered: true , können Sie die vor der Erstellung eines solchen Objekts generierten Berichte anzeigen:

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

Um die Überwachung von Berichten über die Verwendung veralteter Funktionen oder über Browserinterventionen im Code zu beenden, können Sie das Beobachterobjekt deaktivieren:

 observer.disconnect(); 

Beispiel für die ReportingObserver-API

Hier ist ein Beispiel für die Verwendung des ReportingObserver Beobachterobjekts. Hier ist ein Diagramm der Organisation des Sendens eines Berichts an den Server:

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

Zusammenfassung

Mit der ReportingObserver API kann der Entwickler den Informationsbereich erweitern, den er über Fehler erhält, die in seinen Projekten auftreten, wenn echte Benutzer mit ihnen arbeiten. Diese API ist in Chrome 69 verfügbar. Es gibt Informationen, dass diese Funktion in Edge angezeigt wird. Ob es geplant ist, etwas Ähnliches in Firefox oder Safari zu implementieren, ist noch unbekannt.

Details zu ReportingObserver finden Sie hier und hier .

Liebe Leser! Was halten Sie von der ReportingObserver-API?