ReportingObserver: sprawdzanie stanu kodu

Philip Walton

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.
Ostrzeżenia inicjowane przez przeglądarkę w konsoli Narzędzi deweloperskich.

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:

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.
Audyt Lighthouse dotyczący użycia wycofanych interfejsów API może korzystać z funkcji ReportingObserver.

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: