Resumen de window.onerror

Recientemente, hemos estado realizando un trabajo de monitoreo de errores de front-end js. Durante el continuo pulido y refinamiento, descubrimos que todavía hay mucho conocimiento en él. Ahora tomaremos algunas notas y resúmenes. -end js monitoreo de errores

Sabemos que el monitoreo de errores de front-end js se implementa principalmente mediante el uso de la función window.onerror. Cuando ocurre un error de js en la página, se llamará a la función onerror. js ocurre en la página, se llamará a la función onerror.

Podemos ver que esta función generalmente recopila información sobre la cadena de error, el archivo js donde ocurrió el error, el número de filas y columnas donde ocurrió el error y el objeto Error (que contendrá información sobre la pila de llamadas, etc.) información.

Solo necesitamos transmitir esta información al servidor, y luego a través del mapa fuente podemos saber qué línea del código fuente tiene un error, logrando así un perfecto sistema de monitoreo de errores en tiempo real. Sin embargo, todavía queda mucho trabajo por hacer para que quede perfecto.

En primer lugar, nuestros archivos js generalmente se encuentran en diferentes dominios y sitios web. Esto es para mejorar la velocidad de representación de la página y la capacidad de mantenimiento de la estructura (dominio CDN separado, hacer uso completo de los navegadores y la página). referencias Hay dos archivos js, uno es a.js bajo el dominio a.com y el otro es b.js bajo el dominio b.com). Agregamos el monitor window.onerror en el archivo a.js y arrojamos errores activamente en el archivo b.js.

Podemos ver los resultados en la siguiente figura. La información obtenida por la función onerror es un script. error Un valor vacío de 0 no contiene ninguna información útil. No sabe qué error ocurrió ni en qué archivo.

Esta es una restricción de seguridad realizada por el navegador para que el navegador no pueda detectar cuando ocurren errores de sintaxis (?) en scripts cargados desde diferentes dominios (usando diferentes protocolos, dominios y puertos) El error. Cuando se produce un error en un script cargado desde un dominio diferente (cualquiera de los tres protocolos, dominios y puertos diferentes), no se informarán los detalles del error de sintaxis, pero se utilizará un simple "error de script" para evitar fugas.

Pero sí necesitamos saber qué errores se produjeron; de lo contrario, el seguimiento no tendrá sentido. Dado que este es otro problema de restricción del mismo origen, definitivamente se puede resolver con CORS.

Experimento 2: agregamos encabezados de respuesta Access-Control-Allow-Origin:* en b.js y luego descubrimos que nada cambió.

Experimento 3: continuamos agregando el atributo crossorigin a b.js y descubrimos que funcionó y se recopiló toda la información que queríamos, lo cual es excelente.

Conclusión: si Queremos recopilar errores js de diferentes dominios a través de la función onerror. Necesitamos hacer dos cosas:

Nota: Sin la función onerror, los dos pasos anteriores no se podrán lograr. Estos dos pasos son indispensables. El experimento 2 nos mostró que si simplemente agregamos Access-Control-Allow-Origin:*, el error aún no se detectará. Si solo agrega el atributo crossorigin, el navegador informará un error no cargable, como se muestra a continuación

Pero...

Si agrega el atributo crossorigin, el navegador informará un error no cargable, como se muestra a continuación Mostrar.

Si usas raven.js de Sentry, descubrirás que no tienes que hacer nada y puede ayudarte a detectar algunos mensajes de error muy específicos, lo cual es algo increíble.

La clave radica en el papel de la función en el método de instalación llamado _instrumentTryCatch en el código fuente de Raven. Encapsula algunas funciones clave en forma de tryCatch, de modo que estas funciones puedan detectarse cuando ocurre un error. El principio de implementación específico de _instrumentTryCatch. es como veremos más adelante

Si realmente no haces nada, aún podrás capturar información muy específica. p> De hecho, si realmente no hace nada, Raven solo puede detectar algunos errores asincrónicos y los errores sincrónicos aún no se pueden detectar, por lo que incluso si usa una biblioteca de recopilación de errores de terceros (como Sentry), aún necesita agregar Access. -Control- Allow-Origin:* y atributos crossorigin

Consulte:

GlobalEventHandlers.onerror

¿Qué es el "error de secuencia de comandos"?