Encuentra las APIs obsoletas en tus apps de producción.
ReportingObserver
te permite saber si tu sitio usa una API obsoleta o se ejecuta en una intervención del navegador. La funcionalidad básica
estaba originalmente disponible en Chrome 69. A partir de Chrome 84, se puede usar en trabajadores.
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
}, {buffered: true});
observer.observe();
Usa la devolución de llamada para enviar informes a un proveedor de backend o de estadísticas con fines de análisis.
¿Por qué es útil? Hasta esta API, las advertencias de baja y de intervención solo estaban disponibles en Herramientas para desarrolladores como mensajes de Console. Las intervenciones, en particular, solo se activan mediante varias restricciones reales, como las condiciones del dispositivo y la red. Por lo tanto, es posible que nunca veas estos mensajes cuando desarrollas o pruebas un sitio de forma local. ReportingObserver
brinda una solución a este problema. Cuando los usuarios experimentan problemas potenciales en su naturaleza, se puede notificar a los desarrolladores web sobre ellos.
Información general
Hace un tiempo, escribí una entrada de blog (Observing your web app) porque me pareció fascinante cuántas APIs hay para supervisar las "cosas" que se producen en una app web. Por ejemplo, hay APIs que pueden observar información sobre el DOM: ResizeObserver
, IntersectionObserver
, MutationObserver
.
PerformanceObserver
captura las mediciones de rendimiento. Los métodos como window.onerror
y window.onunhandledrejection
incluso nos permiten saber cuando algo sale mal.
Sin embargo, hay otros tipos de advertencias que las APIs existentes no capturan. Cuando tu sitio usa una API obsoleta o se encuentra con una intervención del navegador, Herramientas para desarrolladores es la primera en informarte al respecto:
Uno sería naturalmente pensar que window.onerror
captura estas advertencias. No.
Esto se debe a que window.onerror
no se activa para las advertencias que genera directamente el usuario-agente. Se activa en caso de errores de tiempo de ejecución (errores de sintaxis y excepciones de JavaScript) causados por la ejecución del código.
ReportingObserver
se pone a tono con la holgura. Proporciona una forma programática de recibir notificaciones sobre advertencias emitidas por el navegador, como intervenciones y bajas. Puedes usarla como una herramienta de informes y perder menos sueño preguntándote si los usuarios tienen problemas inesperados en tu sitio publicado.
La API
ReportingObserver
no difiere de las otras APIs de Observer
, como IntersectionObserver
y ResizeObserver
. Le das una devolución de llamada
y te da información. La información que recibe la devolución de llamada es una lista de problemas que causó la página:
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();
Informes filtrados
Los informes se pueden filtrar previamente para observar solo ciertos tipos de informes. En este momento, hay dos tipos de informes: 'deprecation'
y 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Informes almacenados en búfer
Usa la opción buffered: true
cuando desees ver los informes que se generaron antes de que se creara la instancia del observador:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Esta opción es excelente para situaciones como la carga diferida de una biblioteca que utiliza un ReportingObserver
. El observador se agrega tarde, pero no te pierdes nada de lo que sucedió antes en la carga de la página.
Dejar de observar
Deja de observar con el método disconnect()
:
observer.disconnect();
Ejemplos
Informa intervenciones del navegador a un proveedor de estadísticas
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
}, {types: ['intervention'], buffered: true});
observer.observe();
Recibe notificaciones cuando se quiten las APIs
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();
Conclusión
ReportingObserver
te brinda una forma adicional de descubrir y supervisar posibles problemas en tu app web. Incluso es una herramienta útil para comprender el estado de tu base de código (o su falta). Envía informes a un backend, conoce
problemas del mundo real, actualiza el código y obtén ganancias.
Trabajo futuro
En el futuro, espero que ReportingObserver
se convierta en la API de facto para
detectar todo tipo de problemas en JavaScript. Imagina una API para detectar todo lo que sale mal en tu app:
- Intervenciones del navegador
- Bajas
- Incumplimientos de la Política de Funciones. Consulta el Error #867471 de Chromium.
- Excepciones y errores de JS (actualmente entregados por
window.onerror
). - Rechazos de promesas de JS no controlados (actualmente entregados por
window.onunhandledrejection
)
Recursos adicionales:
Hero image de Sieuwert Otterloo en Unsplash.