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 proveedor de backend o 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.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=7&hl=es-419)
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:
- Intervenciones del navegador
- Bajas
- Incumplimientos de la Política de funciones. Consulta crbug.com/867471.
- Errores y excepciones de JS (actualmente atendidos por
window.onerror
). - Rechazos de promesas de JS no controlados (actualmente atendidos por
window.onunhandledrejection
)
También me entusiasma la idea de contar con herramientas que integren ReportingObserver
en
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.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=7&hl=es-419)
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: