TL;DR
C'è un nuovo osservatore in città! ReportingObserver è una nuova API che ti consente di sapere quando il tuo sito utilizza un'API deprecata o esegue un intervento nel browser:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
Il callback può essere utilizzato per inviare report a un backend o a un provider di analisi per ulteriori analisi.
Perché è utile? Finora, gli avvisi relativi a ritiro e intervento erano disponibili solo in DevTools come messaggi della console.
Gli interventi, in particolare, sono attivati solo da vari vincoli del mondo reale, come le condizioni del dispositivo e della rete. Pertanto, potresti non vedere mai questi messaggi
durante lo sviluppo/il test di un sito a livello locale. ReportingObserver fornisce la soluzione a questo problema. Possiamo ricevere una notifica quando gli utenti riscontrano potenziali
problemi in natura.
Introduzione
Qualche tempo fa ho scritto un post del blog ("Osservando la tua app web")
perché ho trovato affascinante quante API ci siano per monitorare le
"contenuti" che si verificano in un'app web. Ad esempio, ci sono API in grado di osservare
le informazioni sul DOM: ResizeObserver,
IntersectionObserver, MutationObserver. Esistono API per acquisire
le misurazioni delle prestazioni: PerformanceObserver. Altre
API come window.onerror e window.onunhandledrejection ci segnalano persino
se si verificano problemi.
Tuttavia, esistono altri tipi di avvisi che non vengono acquisiti da queste API esistenti. Quando il tuo sito utilizza un'API deprecata o viene eseguito in caso di intervento nel browser, DevTools ti informa per prima cosa:
Si potrebbe pensare che window.onerror catturi questi avvisi. Non lo è.
Questo perché window.onerror non si attiva per gli avvisi
generati direttamente dallo user agent stesso. Si attiva per errori di runtime
(eccezioni JS ed errori di sintassi) causati dall'esecuzione del codice.
ReportingObserver si libera. Offre un modo programmatico per ricevere notifiche relative ad avvisi emessi dal browser, come ritiri e interventi. Puoi utilizzarlo come strumento di segnalazione e perdere meno sonno chiedendo se gli utenti stanno riscontrando problemi imprevisti sul tuo sito.
L'API
L'API non è diversa dalle altre API "osservatore" come IntersectionObserver e ResizeObserver. Gli chiedi di richiamarti,
che ti fornisce informazioni. 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 prefiltrare i report per osservare solo determinati tipi di report:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Report su cui è stato eseguito il buffering
L'opzione buffered: true è davvero utile quando vuoi visualizzare i report generati prima della creazione dell'osservatore:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
È ottimo in situazioni come il caricamento lento di una libreria che utilizza
un ReportingObserver. L'osservatore viene aggiunto in ritardo, ma non ti perdi nulla di ciò che è accaduto in precedenza durante il caricamento pagina.
Interrompi osservazione
Esatto. Ha un metodo disconnect:
observer.disconnect(); // Stop the observer from collecting reports.
Esempi
Esempio: 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();
Esempio: ricevi una notifica quando le API saranno 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 ulteriore modo per scoprire e monitorare
potenziali problemi nella tua app web. È anche uno strumento utile per comprendere
lo stato del tuo codebase (o la sua mancanza). Invia report al backend, scopri i problemi reali che gli utenti stanno incontrando sul tuo sito, aggiorna il codice e guadagna!
Lavoro futuro
In futuro, spero che ReportingObserver diventi di fatto l'API
per rilevare tutti i tipi di problemi in JavaScript. Immagina un'API per individuare
tutto ciò che va storto nell'app:
- Interventi relativi al browser
- Deprecazioni
- Violazioni delle norme sulle funzionalità. Visita la pagina crbug.com/867471.
- Eccezioni ed errori JS (attualmente gestiti da
window.onerror). - Rifiuti di promesse JS non gestite (attualmente gestito da
window.onunhandledrejection)
Sono inoltre entusiasta degli strumenti che integrino ReportingObserver nei loro flussi di lavoro. Lighthouse è un esempio di strumento che segnala già i ritiri del browser quando esegui il relativo controllo "Evita API deprecate":
Lighthouse attualmente utilizza il protocollo DevTools per eseguire lo scraping dei messaggi della console e segnalare questi problemi agli sviluppatori. Potrebbe invece essere interessante passare a ReportingObserver per i suoi report sul ritiro ben strutturati e per i metadati aggiuntivi come la data anticipatedRemoval.
Risorse aggiuntive: