TL;DR
Pojawił się nowy obserwator! ReportingObserver
to nowy interfejs API, który informuje, kiedy witryna używa wycofanego interfejsu API lub gdy następuje interwencja przeglądarki:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
Wywołanie zwrotne może służyć do wysyłania raportów do backendu lub dostawcy usług analitycznych w celu dalszej analizy.
Dlaczego jest to przydatne? Do tej pory ostrzeżenia o wycofaniu i interwencji były dostępne tylko w Narzędziach deweloperskich jako komunikaty w konsoli.
Interwencje są wywoływane wyłącznie przez różne rzeczywiste ograniczenia, takie jak warunki urządzenia i sieci. Możliwe więc, że nigdy nie zobaczysz takich komunikatów
podczas lokalnego programowania/testowania. Rozwiązaniem tego problemu jest ReportingObserver
. Gdy użytkownicy napotkają potencjalne problemy w środowisku naturalnym,
możemy nas o nich powiadomić.
Wstęp
Jakiś czas temu opublikowałem posta na blogu („Obserwowanie aplikacji internetowej”), ponieważ fascynujące jest, ile jest interfejsów API do monitorowania „rzeczy”, które mają miejsce w aplikacjach internetowych. Istnieją na przykład interfejsy API, które mogą obserwować informacje o DOM: ResizeObserver
, IntersectionObserver
, MutationObserver
. Dostępne są interfejsy API do pomiaru skuteczności: PerformanceObserver
. Inne interfejsy API, takie jak window.onerror
czy window.onunhandledrejection
, informują nas nawet, gdy coś poszło nie tak.
Istnieją jednak inne typy ostrzeżeń, które nie są przechwytywane przez te istniejące interfejsy API. Gdy w Twojej witrynie zostanie użyty wycofany interfejs API lub nastąpi interwencja przeglądarki, Narzędzia deweloperskie jako pierwsze informują o takich interfejsach:
Można by pomyśleć, że window.onerror
rejestruje te ostrzeżenia. Nie.
Wynika to z faktu, że tag window.onerror
nie uruchamia się w przypadku ostrzeżeń wygenerowanych bezpośrednio przez klienta użytkownika. Uruchamia się w przypadku błędów czasu działania (wyjątków JS i błędów składni) spowodowanych wykonaniem kodu.
ReportingObserver
podtrzymuje schowek. Pozwala w zautomatyzowany sposób otrzymywać powiadomienia o ostrzeżeniach wyświetlanych przez przeglądarkę, na przykład o wycofaniach czy interwencjach. Możesz go używać jako narzędzia do zgłaszania naruszeń, a będziesz spać mniej, nie zastanawiając się, czy użytkownicy natrafiają na nieoczekiwane problemy w Twojej witrynie.
Interfejs API
Nie różni się on od innych interfejsów API „observer” (takich jak IntersectionObserver
i ResizeObserver
). Ktoś do Ciebie zadzwonił
i uzyska informacje. Informacje otrzymane przez wywołanie zwrotne to lista problemów, które spowodowały strona:
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();
Filtrowane raporty
Raporty można wstępnie filtrować, aby obserwować tylko niektóre typy raportów:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Buforowane raporty
Opcja buffered: true
jest bardzo przydatna, gdy chcesz zobaczyć raporty wygenerowane przed utworzeniem obserwatora:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
Przydaje się to na przykład w przypadku leniwego ładowania biblioteki, która korzysta z interfejsu ReportingObserver
. Obserwator jest dodawany z opóźnieniem, ale nie przeoczysz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.
Przestań obserwować
Tak! Zawiera metodę disconnect
:
observer.disconnect(); // Stop the observer from collecting reports.
Przykłady
Przykład – zgłoś interwencje dotyczące przeglądarek dostawcy usług analitycznych:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
},
{types: ['intervention'], buffered: true}
);
observer.observe();
Przykład – otrzymasz powiadomienie, gdy interfejsy API zostaną usunięte:
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();
Podsumowanie
ReportingObserver
zapewnia dodatkowy sposób wykrywania i monitorowania potencjalnych problemów z aplikacją internetową. Jest nawet przydatnym narzędziem do sprawdzania stanu bazy kodu (lub jej braku). Przesyłaj raporty do backendu, poznaj rzeczywiste problemy, z którymi użytkownicy spotykają się w Twojej witrynie, aktualizuj kod, zyskuj!
Praca w przyszłości
Mam nadzieję, że w przyszłości ReportingObserver
stanie się interfejsem API defacto do wykrywania wszelkich problemów w JS. Wyobraź sobie jeden interfejs API, który przechwytuje
wszystko, co pójdzie nie tak:
- Interwencje w zakresie przeglądarek
- Elementy wycofane
- Naruszenia zasad dotyczących funkcji. Więcej informacji znajdziesz na crbug.com/867471.
- Wyjątki i błędy JS (obecnie obsługiwane przez
window.onerror
). - Nieobsłużone obietnice JS (obecnie obsługiwane przez
window.onunhandledrejection
)
Cieszę się też, że udało mi się zintegrować ReportingObserver
z przepływami pracy w firmie. Lighthouse to przykład narzędzia, które już zgłasza wycofane przeglądarki po przeprowadzeniu kontroli „Unikanie wycofanych interfejsów API”:
Lighthouse obecnie używa protokołu Narzędzi deweloperskich do pobierania komunikatów z konsoli i zgłaszania tych problemów deweloperom. Zamiast tego warto przejść na ReportingObserver
, aby mieć dostęp do dobrze uporządkowanych raportów o wycofaniu i dodatkowych metadanych, takich jak anticipatedRemoval
data.
Dodatkowe materiały: