TL;DR
Pojawił się nowy obserwator! ReportingObserver
to nowy interfejs API, który umożliwia:
możesz otrzymywać powiadomienia o tym, że witryna używa wycofanego interfejsu API lub natrafi na
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? Dotychczasowe wycofanie
były dostępne w Narzędziach deweloperskich tylko jako komunikaty w konsoli.
Interwencje są aktywowane wyłącznie przez różne rzeczywiste ograniczenia
np. warunki urządzenia i sieci. Dlatego możesz nigdy nie otrzymać takich wiadomości
podczas programowania/testowania witryny lokalnie. ReportingObserver
oferuje
rozwiązania tego problemu. Gdy użytkownicy doświadczają potencjalnych problemów w środowisku naturalnym,
możemy być o nich powiadamiani.
Wprowadzenie
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 o modelu DOM: ResizeObserver
,
IntersectionObserver
, MutationObserver
. Istnieją interfejsy API do przechwytywania
pomiary skuteczności: PerformanceObserver
. Inny powód
Interfejsy API takie jak window.onerror
czy window.onunhandledrejection
dają nam nawet znać
gdy coś pójdzie nie tak.
Istnieją jednak inne typy ostrzeżeń, które nie są uwzględniane. istniejących interfejsów API. Gdy witryna używa wycofanego interfejsu API lub działa z interwencją przeglądarki, Narzędzia deweloperskie pokazują, o nich:
![Ostrzeżenia w konsoli Narzędzi deweloperskich dotyczące wycofania i interwencji.](https://developer.chrome.com/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=7&hl=pl)
Można by pomyśleć, że window.onerror
rejestruje te ostrzeżenia. Nie.
Wynika to z faktu, że plik window.onerror
nie uruchamia się w przypadku ostrzeżeń
generowane bezpośrednio przez klienta użytkownika. Uruchamia się w przypadku błędów działania.
(wyjątki JS i błędy składni) powodowane przez wykonanie kodu.
ReportingObserver
podtrzymuje schowek. Zapewniają zautomatyzowany sposób
powiadomienia o ostrzeżeniach wyświetlanych przez przeglądarkę, np. o wycofaniach.
i interwencji. Możesz go używać jako narzędzia do raportowania,
mniej spać i zastanawiasz się, czy użytkownicy napotykają nieoczekiwane problemy podczas transmisji
witrynie.
Interfejs API
Interfejs API nie różni się od innego „obserwatora” Interfejsy API takie jak
jako IntersectionObserver
i ResizeObserver
. Oddzwonisz do klienta.
dostarcza informacji. Informacja otrzymywana przez wywołanie zwrotne
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ć tylko niektóre typy raportów:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Buforowane raporty
Opcja buffered: true
jest naprawdę przydatna, gdy chcesz wyświetlić
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
ReportingObserver
. Obserwator jest dodawany z opóźnieniem, ale Ty musisz
pamiętaj, aby nie przegapić niczego, co zdarzył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 odkrywania i monitorowania
potencjalnych problemów z aplikacją internetową. Jest to nawet przydatne narzędzie do poznawania
stanu bazy kodu (lub jej braku). Wysyłanie raportów do backendu
dowie się więcej o rzeczywistych problemach użytkowników
w Twojej witrynie, zaktualizuj
zysk!
Praca w przyszłości
Mam nadzieję, że w przyszłości interfejs ReportingObserver
stanie się interfejsem API defacto
do wykrywania wszelkich problemów w JS. 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. 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 zintegrowałyśmy usługę ReportingObserver
z innymi narzędziami
ich przepływy pracy. Przykładem narzędzia jest Lighthouse.
który już oznacza wycofania przeglądarek po uruchomieniu
„Unika użycie wycofanych interfejsów API” audyt:
![Audyt Lighthouse dotyczący użycia wycofanych interfejsów API może korzystać z funkcji ReportingObserver.](https://developer.chrome.com/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=7&hl=pl)
Lighthouse obecnie używa protokołu Narzędzi deweloperskich
pobierania wiadomości z konsoli i zgłaszania tych problemów deweloperom. Zamiast tego
przejście na ReportingObserver
może Ci się przydać
zawierające dobrze uporządkowane raporty na temat wycofania
oraz dodatkowe metadane, takie jak
anticipatedRemoval
.
Dodatkowe materiały: