Conoscere l'integrità del codice con l'API ReportingAnnotar

Trova le API deprecate nelle tue app di produzione.

ReportingObserver ti informa quando il tuo sito utilizza un'API obsoleta o viene eseguito in un intervento del browser. La funzionalità di base originariamente è arrivato a Chrome 69. A partire da Chrome 84, può essere utilizzato nei worker.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

Utilizza il callback per inviare i report a un provider di analisi o di backend per e analisi.

Perché è utile? Fino a questa API, gli avvisi relativi a deprecazione e intervento erano disponibile solo in DevTools come messaggi della console. Gli interventi, in particolare, sono attivati solo da vari vincoli reali, come il dispositivo e la rete le condizioni di traffico. Pertanto, potresti non vedere mai questi messaggi durante lo sviluppo/il test di un sito a livello locale. ReportingObserver fornisce una soluzione a questo problema. Quando che gli utenti riscontrano potenziali problemi, gli sviluppatori web possono ricevere su questi argomenti.

Sfondo

Qualche tempo fa, ho scritto un post del blog (osservazione della tua applicazione web) perché ho trovato affascinante quante API ci siano per il monitoraggio "cose" che avviene in un'app web. Ad esempio, esistono API che possono osservare informazioni sul DOM: ResizeObserver, IntersectionObserver, MutationObserver PerformanceObserver acquisisce le misurazioni delle prestazioni. Metodi come window.onerror e window.onunhandledrejection o anche avvisarci se qualcosa va storto.

Tuttavia, esistono altri tipi di avvisi che non vengono acquisiti dal le API esistenti. Quando il sito utilizza un'API obsoleta o si scontra con una intervento del browser, DevTools è il primo a informarti quali:

Avvisi della console DevTools relativi a ritiri e interventi.
Avvisi avviati dal browser nella console DevTools.

Si potrebbe pensare che window.onerror acquisisca questi avvisi. No. Questo perché window.onerror non si attiva per gli avvisi generati direttamente lo stesso user agent. Si attiva per errori di runtime (eccezioni JavaScript e di sintassi) causati dall'esecuzione del codice.

ReportingObserver riprende il gioco. Offre un modo programmatico notifiche inviate dal browser, come i rilasci e interventi. Puoi usarlo come strumento di segnalazione e perdere meno tempo chiediti se gli utenti riscontrano problemi imprevisti sul tuo sito pubblicato.

L'API

ReportingObserver non è diversa dalle altre API Observer come IntersectionObserver e ResizeObserver. Gli chiedi di richiamare. offre le informazioni personali. Le informazioni ricevute dal callback sono un elenco di problemi causati dalla pagina:

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();

Report filtrati

È possibile filtrare preventivamente i report per osservare solo alcuni tipi di report. In questo momento, esistono due tipi di report: 'deprecation' e 'intervention'.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

Report di cui è stato eseguito il buffer

Utilizza l'opzione buffered: true per visualizzare i report che sono stati generato prima della creazione dell'istanza di osservazione:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

Questa opzione è ideale in situazioni come il caricamento lento di una libreria che utilizza un ReportingObserver. L'osservatore viene aggiunto in ritardo, ma non perdi questa occasione tutto ciò che è accaduto in precedenza durante il caricamento pagina.

Smetti di osservare

Smetti di osservare utilizzando il metodo disconnect():

observer.disconnect();

Esempi

Segnala gli interventi del browser a un provider di analisi

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

Ricevi una notifica quando le API verranno rimosse

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();

Conclusione

ReportingObserver offre un modo aggiuntivo per scoprire e monitorare problemi potenziali nella tua applicazione web. È anche uno strumento utile per comprendere stato del codebase (o della sua mancanza). Inviare report a un backend, sui problemi del mondo reale, aggiornare il codice e i profitti.

Lavoro futuro

In futuro, spero che ReportingObserver diventi l'API de facto per rilevare tutti i tipi di problemi in JavaScript. Immagina un'unica API per rilevare tutto si verifica un problema nella tua app:

Risorse aggiuntive:

Immagine hero di Colpo di fulmine su Unsplash.