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. Originalmente, la funcionalidad básica
aterrizó 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 backend o proveedor de estadísticas de análisis de datos en la nube.
¿Por qué es útil? Hasta esta API, las advertencias de baja y de intervención eran
solo está disponible en Herramientas para desarrolladores como mensajes de la consola. Las intervenciones, en particular,
Solo se activan mediante restricciones reales, como el dispositivo y la red
condiciones. Por lo tanto, es posible que nunca veas estos mensajes durante el desarrollo o las pruebas
un sitio a nivel local. ReportingObserver
proporciona una solución a este problema. Cuándo
los usuarios experimentan posibles problemas en el entorno, los desarrolladores web pueden ser notificados
sobre ellas.
Información general
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
.
PerformanceObserver
capta las mediciones del rendimiento. Y métodos como
window.onerror
y
window.onunhandledrejection
incluso avísanos cuando algo salga mal.
Sin embargo, existen otros tipos de advertencias que el sistema APIs existentes. Cuando tu sitio usa una API obsoleta o se ejecuta en una intervención del navegador, Herramientas para desarrolladores es el primero en informarte con ellos:
![Advertencias de la consola de Herramientas para desarrolladores sobre intervenciones y bajas.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=7&hl=es)
Naturalmente, uno pensaría que window.onerror
captura estas advertencias. No, en absoluto.
Esto se debe a que window.onerror
no se activa con advertencias generadas directamente por
el usuario-agente mismo. Se activa por errores de tiempo de ejecución (excepciones de JavaScript y
errores de sintaxis) causados por la ejecución del código.
ReportingObserver
aumenta la carga. Proporciona una forma programática de ser
notificaciones sobre advertencias emitidas por el navegador, como bajas y
intervenciones. Puedes usarla como herramienta de informes y perder menos
y se pregunta si los usuarios tienen problemas inesperados en su sitio publicado.
La API
ReportingObserver
no es diferente a las otras APIs de Observer
, como
IntersectionObserver
y ResizeObserver
. Le proporcionas una devolución de llamada; brinda
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 pueden filtrarse previamente para observar solo ciertos tipos de informes. Ahora mismo,
Existen 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 quieras ver los informes que se generaron
generado antes de que se creara la instancia del observador:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Esta opción es ideal para situaciones como la carga diferida de una biblioteca que utiliza un
ReportingObserver
El observador se agrega tarde, pero no te pierdas
todo lo que ocurrió antes en la carga de la página.
Dejar de observar
Deja de observar con el método disconnect()
:
observer.disconnect();
Ejemplos
Cómo informar 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 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
estado de tu base de código (o la ausencia de esta). Envía informes a un backend
sobre problemas del mundo real, actualizar el código, ¡ganancias!
Trabajo futuro
En el futuro, espero que ReportingObserver
se convierta en la API de facto para
detectando todo tipo de problemas en JavaScript. Imagina una API para capturar todo
que sale mal en tu aplicación:
- Intervenciones del navegador
- Bajas
- Incumplimientos de la Política de funciones. Consulte el Error 867471 de Chromium.
- Errores y excepciones de JS (actualmente atendidos por
window.onerror
). - Rechazos de promesas de JS no controlados (actualmente atendidos por
window.onunhandledrejection
)
Recursos adicionales:
Hero image de Sieuwert Otterloo en Unsplash.