Znajdź wycofane interfejsy API w swoich produkcyjnych aplikacjach.
ReportingObserver
informuje, że witryna korzysta z wycofanego interfejsu API lub uruchamia interwencję przeglądarki. Podstawowe funkcje pojawiły się
w Chrome 69. Od Chrome 84 można go używać w instancjach roboczych.
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 służy do wysyłania raportów do backendu lub dostawcy usług analitycznych na potrzeby analizy.
Dlaczego to takie przydatne? Do tego czasu ostrzeżenia o wycofaniu i interwencji były dostępne w Narzędziach deweloperskich tylko jako komunikaty konsoli. Interwencje są wywoływane tylko przez różne rzeczywiste ograniczenia, takie jak warunki urządzenia i sieci. Dlatego podczas tworzenia lub testowania witryny lokalnie możesz nigdy nie zobaczyć tych komunikatów. Rozwiązanie tego problemu zawiera ReportingObserver
. Gdy użytkownicy napotkają potencjalne problemy, deweloperzy stron internetowych mogą otrzymywać o nich powiadomienia.
Wprowadzenie
Jakiś czas temu napisałam posta na blogu (Obserwacja aplikacji internetowej), ponieważ ciekawi mnie, ile interfejsów API istnieje do monitorowania „rzeczy” występujących w aplikacji internetowej. Istnieją na przykład interfejsy API, które mogą obserwować informacje o DOM: ResizeObserver
, IntersectionObserver
, MutationObserver
.
PerformanceObserver
rejestruje wyniki pomiarów. Metody takie jak window.onerror
czy window.onunhandledrejection
pozwalają nawet informować nas o problemach.
Istnieją jednak inne typy ostrzeżeń, których istniejące interfejsy API nie przechwytują. Gdy Twoja witryna korzysta z wycofanego interfejsu API lub jeśli działa interwencja przeglądarki, Narzędzia deweloperskie jako pierwsze informują o nich:
Można by uznać, że window.onerror
rejestruje te ostrzeżenia. Nie.
Dzieje się tak, ponieważ window.onerror
nie uruchamia się w przypadku ostrzeżeń wygenerowanych bezpośrednio przez samego klienta użytkownika. Uruchamia się w przypadku błędów w czasie działania (wyjątków JavaScriptu i błędów składni) spowodowanych przez wykonanie kodu.
ReportingObserver
chwyta. Zapewnia programowy sposób powiadamiania o ostrzeżeniach wywoływanych przez przeglądarkę, takich jak wycofania i interakcje. Możesz go użyć jako narzędzia do raportowania i zapobiec zasypianiu, zastanawiając się, czy w Twojej witrynie występują nieoczekiwane problemy.
Interfejs API
ReportingObserver
różni się od innych interfejsów API Observer
, takich jak IntersectionObserver
i ResizeObserver
. Oddzwonisz do kogoś,
aby uzyskać informacje. Informacje o wywołaniu zwrotnym to lista problemów spowodowanych przez stronę:
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ły tylko ich określone typy. Obecnie dostępne są 2 typy raportów: 'deprecation'
i 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Raporty buforowane
Użyj opcji buffered: true
, jeśli chcesz wyświetlić raporty wygenerowane przed utworzeniem instancji obserwatora:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Ta opcja przydaje się w sytuacjach takich jak leniwe ładowanie biblioteki, która korzysta z elementu ReportingObserver
. Obserwator zostanie dodany późno, ale nie przegapisz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.
Zatrzymaj obserwację
Przerwij obserwację za pomocą metody disconnect()
:
observer.disconnect();
Przykłady
Zgłoś dostawcy usług analitycznych interwencje przeglądarki
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
}, {types: ['intervention'], buffered: true});
observer.observe();
Otrzymuj powiadomienia o usunięciu interfejsów API
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
to dodatkowy sposób wykrywania i monitorowania potencjalnych problemów z aplikacją internetową. Jest to nawet przydatne narzędzie do sprawdzania stanu bazy kodu (lub jego braku). Wysyłaj raporty do backendu, sprawdzaj rzeczywiste problemy, aktualizuj kod i zyski.
Praca w przyszłości
Mam nadzieję, że w przyszłości ReportingObserver
stanie się faktycznym interfejsem API do wykrywania wszystkich rodzajów problemów w JavaScript. Wyobraź sobie, że jeden interfejs API wykrywa wszystkie problemy w aplikacji:
- Interwencje przeglądarki
- Elementy wycofane
- Naruszenia zasad dotyczących funkcji. Zobacz numer sprawy Chromium nr 867471.
- Wyjątki i błędy JS (obecnie obsługiwane przez
window.onerror
). - Nieobsłużone odrzucenia obietnicy JS (obecnie obsługiwane przez
window.onunhandledrejection
)
Dodatkowe materiały:
Baner powitalny autorstwa Sieuwerta Otterloo na kanale Unsplash.