Znajdź wycofane interfejsy API w aplikacjach produkcyjnych.
ReportingObserver
informuje o tym, że Twoja witryna używa wycofanego interfejsu API lub działa
do interwencji przeglądarki. Pierwotna podstawowa funkcjonalność
w Chrome 69. Od wersji 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 umożliwia wysyłanie raportów do backendu lub dostawcy usług analitycznych analizy.
Dlaczego jest to przydatne? Do czasu wprowadzenia tego interfejsu API ostrzeżenia o wycofaniu i interwencji były
dostępne tylko w Narzędziach deweloperskich jako komunikaty w konsoli. Interwencje, zwłaszcza te,
są wyzwalane tylko przez różne rzeczywiste ograniczenia, takie jak urządzenie i sieć,
warunków. Dlatego podczas programowania/testowania możesz nigdy nie zobaczyć tych komunikatów.
z witryną lokalnie. Rozwiązaniem tego problemu jest ReportingObserver
. Kiedy
użytkownicy doświadczają potencjalnych problemów, programiści mogą być powiadamiani
o nich.
Tło
Jakiś czas temu opublikowałem(-am) posta na blogu (Obserwowanie aplikacji internetowej)
Fascynujące jest, ile jest interfejsów API do monitorowania
„rzeczy” co dzieje się w aplikacji internetowej. Istnieją na przykład interfejsy API, które pozwalają obserwować
informacje na temat modelu DOM:
ResizeObserver
,
IntersectionObserver
,
MutationObserver
PerformanceObserver
rejestruje pomiary skuteczności. Metody takie jak
window.onerror
oraz
window.onunhandledrejection
daj nam nawet znać, gdy coś pójdzie nie tak.
Istnieją jednak inne typy ostrzeżeń, które nie są uwzględniane przez istniejących interfejsów API. Gdy Twoja witryna używa wycofanego interfejsu API lub interwencji przeglądarki, Narzędzia deweloperskie jako pierwszy informują :
![Ostrzeżenia w Narzędziach deweloperskich dotyczące wycofania i interwencji w konsoli.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=6&hl=pl)
Można by pomyśleć, że window.onerror
rejestruje te ostrzeżenia. Nie.
Dzieje się tak, ponieważ zasada window.onerror
nie uruchamia się w przypadku ostrzeżeń wygenerowanych bezpośrednio przez
samego klienta użytkownika. Uruchamia się w przypadku błędów działania (wyjątków JavaScriptu i
błędów składni) powodowanych przez wykonanie kodu.
ReportingObserver
podtrzymuje schowek. Zapewniają zautomatyzowany sposób
powiadomienia o ostrzeżeniach wyświetlanych przez przeglądarkę, takich jak wycofania czy
interwencji. Możesz go używać jako narzędzia do raportowania i tracić mniej
i zastanawiasz się, czy użytkownicy napotykają nieoczekiwane problemy w aktywnej witrynie.
Interfejs API
Interfejs ReportingObserver
nie różni się od innych interfejsów API Observer
, takich jak
IntersectionObserver
i ResizeObserver
. Oddzwonisz do klienta. daje
informacji. Informacje otrzymane przez wywołanie zwrotne to lista problemów
które strona spowodowała:
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 przefiltrować, by obserwować tylko niektóre typy raportów. Teraz,
Są 2 typy raportów: 'deprecation'
i 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Buforowane raporty
Użyj opcji buffered: true
, by wyświetlić raporty, które zostały
wygenerowane przed utworzeniem instancji obserwatora:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Ta opcja świetnie nadaje się np. do leniwego ładowania biblioteki korzystającej z
ReportingObserver
Obserwatorzy zostaną dodani później, ale nie przegapisz żadnej
wszystko, co dzieje się na wcześniejszym etapie wczytywania strony.
Przestań obserwować
Przestań obserwować za pomocą metody disconnect()
:
observer.disconnect();
Przykłady
Zgłaszanie interwencji przeglądarki do 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();
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
zapewnia dodatkowy sposób odkrywania i monitorowania
potencjalnych problemów z aplikacją internetową. Jest to nawet przydatne narzędzie do poznawania
stanu bazy kodu (lub jej braku). Wysyłaj raporty do backendu.
na temat rzeczywistych problemów, aktualizacji kodu, zysków!
Praca w przyszłości
Mam nadzieję, że w przyszłości ReportingObserver
stanie się interfejsem API
wykrywania różnego rodzaju problemów w JavaScript. Wyobraź sobie jeden interfejs API do wykrywania wszystkiego
w Twojej aplikacji, które pójdzie nie tak:
- Interwencje w zakresie przeglądarek
- Elementy wycofane
- Naruszenia zasad dotyczących funkcji. Zobacz problem nr 867471 w Chromium.
- Wyjątki i błędy JS (obecnie obsługiwane przez
window.onerror
). - Nieobsłużone obietnice JS (obecnie obsługiwane przez
window.onunhandledrejection
)
Dodatkowe materiały:
Baner powitalny – autor: Sieuwert Otterloo w sekcji Unsplash.