El material, cuya traducción publicamos hoy, está dedicado a la API
ReportingObserver , un mecanismo que le permite aprender sobre el uso de funciones desactualizadas y que el navegador
interfiere con el trabajo del código de la página.
ReportingObserver es parte de
esta especificación W3C.
¿Por qué se necesita esto?
Supongamos que tiene un proyecto web importante lanzado hace un par de días. Los usuarios, en muchos, ya han comenzado a registrarse en su sitio. Todo el mundo sabe que tales proyectos, de modo que, para decirlo de manera simple, aportarían dinero a las empresas, deberían funcionar de manera estable. Ahora pensemos qué sucede si su cliente encuentra un comportamiento incorrecto del sitio, cuya causa es algún tipo de error, y usted no sabe nada al respecto. No corregirá un error que el desarrollador desconozca sobre su ocurrencia, se manifestará una y otra vez, y esto, en última instancia, afectará negativamente los objetivos comerciales del proyecto.
El visitante del sitio, posiblemente, no sabe nada sobre el desarrollo web, por lo que cuando el sitio comienza a comportarse de manera extraña, es poco probable que busque en la consola para tratar de comprender el problema, que se expresa como un mensaje que comienza con
[Intervention] o
[Deprecation] .
De hecho, los visitantes del sitio no deberían preocuparse por los errores. Todo lo que necesitan es estabilidad, conveniencia y previsibilidad. Los errores son un problema del desarrollador, y la API
ReportingObserver existe para ayudar a los desarrolladores a resolver este problema. Con
ReportingObserver puede enviar informes al desarrollador sobre el uso de API desactualizadas o sobre intervenciones en el funcionamiento de la página del navegador. Otras herramientas de manejo de errores no responden a tales cosas.
Así es como se ve trabajar con
ReportingObserver :
const observer = new ReportingObserver((reports, observer) => { for (const report of reports) { console.log(report.type, report.url, report.body); } }, { buffered: true }); observer.observe();
Hablemos sobre cómo usar esta API.
Estructura de la API de ReportingObserver
Los navegadores tienen API diseñadas para detectar errores. Por ejemplo,
window.onerror . Sin embargo,
window.onerror no rastrea absolutamente todas las situaciones problemáticas que surgen durante el funcionamiento de la página. Por ejemplo, esta herramienta lo ayuda a conocer los errores de tiempo de ejecución causados por excepciones de JavaScript o errores de sintaxis en su código. Sin embargo, si recibe una notificación sobre el uso de una función desactualizada o la intervención del navegador,
window.onerror no responderá a dicha notificación. En esta situación,
ReportingObserver será útil.
Para utilizar la API
ReportingObserver , debe crear el objeto de observador correspondiente proporcionándole una devolución de llamada, cuando se le llame, se le enviarán informes en forma de una lista de problemas encontrados en la página. Ya hemos revisado el código necesario para trabajar con
ReportingObserver . Ahora echemos un vistazo a un ejemplo de qué datos se envían a la devolución de llamada:
const observer = new ReportingObserver((reports, observer) => { for (const report of reports) { // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload' // → report.type === 'deprecation' // → report.url === 'https://reporting-observer-api-demo.glitch.me' // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }})
Al trabajar con
ReportingObserver puede filtrar informes. Por ejemplo, aquí hay un diseño que le permite obtener solo informes sobre el uso de funciones obsoletas:
const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['deprecation']});
Si, al crear el objeto
ReportingObserver , le pasa la propiedad
buffered: true , esto permitirá ver los informes generados antes de la creación de dicho objeto:
const observer = new ReportingObserver((reports, observer) => { ... }, {types: ['intervention'], buffered: true});
Para detener la supervisión de informes sobre el uso de funciones desactualizadas o sobre intervenciones del navegador en el código, puede deshabilitar el objeto observador:
observer.disconnect();
Ejemplo de API de ReportingObserver
Aquí hay un ejemplo del uso del objeto observador
ReportingObserver . Aquí hay un diagrama de la organización de enviar un informe al servidor:
const report = new ReportingObserver((reports, observer) => { for (const report of reports) { const stringifiedReport = JSON.stringify(report.body);
Resumen
La API
ReportingObserver permite al desarrollador ampliar el rango de información que recibe sobre los errores que ocurren en sus proyectos cuando los usuarios reales trabajan con ellos. Esta API está disponible en Chrome 69, hay información de que esta característica aparecerá en Edge. Aún se desconoce si se planea implementar algo similar en Firefox o Safari.
Los detalles sobre
ReportingObserver se pueden encontrar
aquí y
aquí .
Estimados lectores! ¿Qué opinas de la API ReportingObserver?
