ReportingObserver: Conoce el estado de tu código

Philip Walton

A modo de resumen

Hay un nuevo observador en la ciudad. ReportingObserver es una API nueva que te permite saber si tu sitio usa una API obsoleta o descubre Intervención del navegador:

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

observer.observe();

La devolución de llamada se puede usar para enviar informes a un backend o proveedor de análisis para un análisis más detallado.

¿Por qué es útil? Hasta ahora, la baja y las advertencias de intervención solo estaban disponibles en Herramientas para desarrolladores como mensajes de la consola. Las intervenciones, en particular, solo se activan mediante diversas restricciones del mundo real como las condiciones del dispositivo y la red. Por lo tanto, es posible que nunca veas estos mensajes cuando desarrolles o pruebes un sitio a nivel local. ReportingObserver proporciona la solución a este problema. Cuando los usuarios experimentan problemas en su entorno, podemos recibir notificaciones sobre ellos.

Introducción

Hace un tiempo, escribí una entrada de blog ("Observing your web app") porque me pareció fascinante la cantidad de APIs que hay para supervisar "cosas" que se lleva a cabo en una aplicación web. Por ejemplo, hay APIs que pueden observar información sobre el DOM: ResizeObserver, IntersectionObserver, MutationObserver. Hay APIs para capturar mediciones de rendimiento: PerformanceObserver. Otra opción Las APIs como window.onerror y window.onunhandledrejection incluso nos informan cuando algo sale mal.

Sin embargo, existen otros tipos de advertencias que estos APIs existentes. Cuando tu sitio usa una API obsoleta o se ejecuta contra una intervención del navegador, Herramientas para desarrolladores es el primero en avisarte sobre ellos:

Advertencias de la consola de Herramientas para desarrolladores sobre intervenciones y bajas.
Advertencias iniciadas por el navegador en la consola de Herramientas para desarrolladores.

Naturalmente, uno pensaría que window.onerror captura estas advertencias. ¡No lo hace! Esto se debe a que window.onerror no se activa con advertencias generada directamente por el propio usuario-agente. Se activa por errores de tiempo de ejecución (Excepciones de JS y errores de sintaxis) causados por la ejecución de tu código.

ReportingObserver aumenta la carga. Proporciona una forma programática de ser Notificaciones sobre advertencias emitidas por el navegador, como bajas y las intervenciones. Puedes utilizarla como herramienta de informes y Pierden menos sueño y preguntan si los usuarios tienen problemas inesperados durante sus transmisiones en vivo. .

La API

La API es distinta del otro “observador”. APIs como como IntersectionObserver y ResizeObserver. Le proporcionas una devolución de llamada; 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 aplicar con un filtro previo para observar solo ciertos tipos de informes:

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

Informes almacenados en búfer

La opción buffered: true es muy útil cuando quieres ver la informes que se generaron antes de que se creara el observador:

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

Es ideal para situaciones como la carga diferida de una biblioteca que usa ReportingObserver El observador se agrega tarde, pero tú no te pierdas nada de lo que sucedió antes en la carga de la página.

Dejar de observar

Así es. Tiene un método disconnect:

observer.disconnect(); // Stop the observer from collecting reports.

Ejemplos

Ejemplo: informa las 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();

Ejemplo: Recibe una notificación 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 aplicación web. Incluso es una herramienta útil para comprender el estado de tu base de código (o la ausencia de este). Enviar informes a un backend conocer los problemas reales que enfrentan los usuarios en su sitio, actualizar código, ganancias.

Trabajo futuro

En el futuro, espero que ReportingObserver se convierta en la API de facto. para detectar todo tipo de problemas en JS. Imagina una API para capturar todo que sale mal en tu aplicación:

También me entusiasma la idea de contar con herramientas que integren ReportingObserver en sus flujos de trabajo. Lighthouse es un ejemplo de herramienta. que ya marca las bajas del navegador cuando ejecutas su "Evita las APIs obsoletas" auditoría:

La auditoría de Lighthouse para usar APIs obsoletas podría usar ReportingObserver.
La auditoría de Lighthouse para usar APIs obsoletas podría usar ReportingObserver.

Actualmente, Lighthouse usa el protocolo de Herramientas para desarrolladores. para extraer mensajes de la consola e informar estos problemas a los desarrolladores. Por el contrario, podría resultarte interesante cambiar a ReportingObserver por sus informes de baja bien estructurados y metadatos adicionales, como anticipatedRemoval fecha.

Recursos adicionales: