TL;DR
Nowy obserwator w mieście! ReportingObserver
to nowy interfejs API, który informuje, że Twoja witryna korzysta z wycofanego interfejsu API lub gdy wystę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 do dalszej analizy.
Dlaczego to takie przydatne? Do tej pory ostrzeżenia o wycofaniu i interwencji były dostępne w Narzędziach deweloperskich tylko w formie komunikatów w konsoli.
Interwencje są wywoływane tylko przez różne rzeczywiste ograniczenia, takie jak warunki korzystania z urządzenia i sieci. Oznacza to, że te komunikaty mogą nigdy nie pojawić się
podczas tworzenia/testowania witryny lokalnie. Rozwiązanie tego problemu zawiera ReportingObserver
. Gdy użytkownicy napotkają potencjalne problemy, możemy otrzymywać powiadomienia o nich.
Wstęp
Jakiś czas temu napisałem posta na blogu („Obserwowanie 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
. Istnieją interfejsy API do rejestrowania
pomiarów skuteczności: PerformanceObserver
. Inne interfejsy API, takie jak window.onerror
i window.onunhandledrejection
, informują nas nawet o problemach.
Istniejące interfejsy API nie przechwytują jednak innych typów ostrzeżeń. Gdy Twoja witryna korzysta z wycofanego interfejsu API lub działa mimo interwencji w przeglądarce, Narzędzia deweloperskie w pierwszej kolejności mówią 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 klienta użytkownika. Uruchamia się w przypadku błędów środowiska wykonawczego (wyjątków JS i błędów składni) spowodowanych wykonaniem kodu.
ReportingObserver
chwyta. Zapewnia programowy sposób powiadamiania o ostrzeżeniach wywoływanych przez przeglądarkę, takich jak wycofania i interwencje. Możesz go używać jako narzędzia do raportowania,
żeby mniej snu się zastanawiać, czy użytkownicy napotykają w Twojej witrynie nieoczekiwane problemy.
Interfejs API
Różni się on od innych „obserwacyjnych” interfejsów API, np. IntersectionObserver
i ResizeObserver
. Oddzwaniasz do klienta,
żeby uzyskać informacje. Wywołanie zwrotne 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żesz filtrować wstępnie, aby wyświetlać tylko niektóre ich typy:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Raporty buforowane
Opcja buffered: true
jest bardzo przydatna, gdy chcesz wyświetlić raporty wygenerowane przed utworzeniem obserwatora:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
Jest to przydatne w sytuacjach takich jak leniwe ładowanie biblioteki, która korzysta z elementu ReportingObserver
. Obserwator zostanie dodany z opóźnieniem, ale nie stracisz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.
Zatrzymaj obserwację
Tak! Ma metodę disconnect
:
observer.disconnect(); // Stop the observer from collecting reports.
Przykłady
Przykład – zgłaszanie interwencji w przeglądarce 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 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, z jakimi użytkownicy borykają się w Twojej witrynie, zaktualizuj kod i dochody.
Praca w przyszłości
Mam nadzieję, że w przyszłości ReportingObserver
stanie się interfejsem API de-facto do wykrywania wszystkich rodzajów problemów w JS. Wyobraź sobie, że jeden interfejs API wykrywa wszystkie problemy w aplikacji:
- Interwencje przeglądarki
- Elementy wycofane
- Naruszenia zasad dotyczących funkcji. Wejdź na crbug.com/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
)
Bardzo podoba mi się również to, że narzędzia integrują usługę ReportingObserver
ze swoimi przepływami pracy. Przykładem narzędzia, które wskazuje narzędzie Lighthouse jest oznaczenie wycofanych wersji przeglądarki po uruchomieniu kontroli „Unikanie wycofanych interfejsów API”:
Lighthouse korzysta obecnie z protokołu DevTools do pobierania wiadomości z konsoli i zgłaszania tych problemów deweloperom. Zamiast tego warto przejść na ReportingObserver
, aby uzyskać dobrze uporządkowane raporty o wycofaniu i dodatkowe metadane, takie jak anticipatedRemoval
data.
Dodatkowe materiały: