En este artículo, aprenderemos a registrar errores de script usando JavaScript. Es útil en el caso de que los scripts de cualquier otra fuente se ejecuten en el sitio web (por ejemplo, en un iframe) o en los casos en que cualquiera de sus espectadores haga uso de la Consola del navegador tratando de modificar el script o si desea monitorear su código JS para errores que puede tener cuando se pone en producción.
Enfoque: aprenderemos 3 métodos para realizar esta tarea, todos siguiendo el mismo enfoque pero con diferentes formas de implementar el enfoque y extraer la información útil. Utilice el que mejor se adapte a su caso.
- window.addEventListener(“error”, //yourErrorLoggerFunction ) — Adjunte un evento de error al objeto de ventana (DOM).
- document.querySelector(‘body’).onerror= //yourErrorLoggerFunction — Detector de errores en la etiqueta del cuerpo -> Funciona tanto en el mismo origen como en scripts cruzados del mismo origen.
- Cree un elemento de secuencia de comandos y agréguelo a la etiqueta del cuerpo de la fuente.
Los tres métodos se pueden implementar tanto en la misma fuente como en cualquier fuente externa.
Nota : asegúrese de que esto sea lo primero que ejecute el navegador (en caso de que no esté seguro, se recomienda encarecidamente utilizar el Método 2).
Método 1: en este método, adjuntaremos un detector de eventos a nuestro objeto de ventana. Cada vez que se produce un error de secuencia de comandos, se activa la función errorLogger adjunta y, dentro de la función errorLogger, extraeremos toda la información útil del objeto de evento que recibe nuestra función errorLogger.
Javascript
window.addEventListener("error", errorLog);
function errorLog(event) {
// Declare all variables as null
// necessary in case of multiple
// errors to be logged
let msg = source = lineno = colno
= error = time = "";
// Use prevent default in case you
// don't want the error to be logged
// in the console / hide the error
event.preventDefault();
msg = event.message;
source = event.filename;
lineno = event.lineno;
colno = event.colno;
error = event.error;
time = event.time;
// This time is in ms and tells us
// time after which the error occurred
// after the page was loaded
// a lot other information can be
// gathered - explore the event object
// After extracting all the information
// from this object now log it on your
// server Database
}
Encuentre el código HTML (Método 1):
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="font-size:20px;color:rgb(219, 0, 0)">
No Errors
</p>
<script>
// Make Sure addEventListener is the
// First thing to be Executed
window.addEventListener("error", errorLog);
// String to Prepare Error Paragraph
let errorString = "";
const pElement = document.querySelector('p');
// This console.log creates Error
console.log(a)
function errorLog(event) {
let msg = source = lineno
= colno = error = time = "";
event.preventDefault();
msg = event.message;
source = event.filename;
lineno = event.lineno;
colno = event.colno;
error = event.error;
time = event.time;
errorString = `Script Error was Found<br>
Message-: ${msg}<br>Source Info-: ${source}
<br>Line No-: ${lineno}<br>Column No-:
${colno}<br>Error Info-: ${error}<br>Time
at which Error Occurred-: ${time}ms after
Page Load<br><br><br><br>`;
pElement.innerHTML = errorString;
}
</script>
</body>
</html>
Ejemplo -MÉTODO 1
Método 2: en este método, utilizaremos el controlador de eventos onerror.
- Paso 1: obtenga la etiqueta del cuerpo de ese marcado HTML, cualquiera que sea su caso, ya sea el marcado HTML externo o el marcado de la página que se está cargando actualmente.
- Paso 2: ahora, cuando tengamos la etiqueta del cuerpo en un identificador const, digamos const bodyTag, agregaremos el controlador de eventos onerror a la etiqueta del cuerpo.
Javascript
const bodyTag =
// body tag of External HTML
// Markup or of your page
bodyTag.onerror = errorLogger;
function errorLogger(msg, url,
lineNo, columnNo, error) {
// Now process your Error
// Information as you desire
}
¿Notó la diferencia en la función de registro de los dos métodos anteriores? Por lo general, en caso de activación de cualquier evento, la función adjunta recibe un objeto de evento, pero en este caso (método 2) recibimos información extraída previamente (Para Motivo detallado Consulte MDN WebDocs).
Nota: tenga en cuenta que el orden de la información de error recibida en loggerFunction-Total 5 Information — Sequence siempre es el mismo.
Encuentre el código HTML (método 2):
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body onerror="errorLogger(message,
source, lineno, colno, error)">
<p style="font-size:20px;
color:rgb(219, 0, 0)">
</p>
<script>
// You can directly set the onerror
// Attribute or use below 2 lines
// Get body tag of External HTML
// Markup or of your current page
const bodyTag = document.querySelector('body');
// bodyTag.onerror = errorLogger;
let errorString = "";
const pElement = document.querySelector('p');
function errorLogger(msg, url,
lineNo, colNo, error) {
// Now process your Error Information
// as you desire
errorString += `Script Error was Found
<br>Message-: ${msg}<br>URL-: ${url}
<br>Line No-: ${lineNo}<br>Column No-:
${colNo}<br>Error Info-: ${error}<br>
<br><br><br>`;
pElement.innerHTML += errorString;
}
</script>
</body>
</html>
Ejemplo – MÉTODO 2
Método 3: en este método, adjuntaremos un elemento de secuencia de comandos a la página web. Este método es útil en casos en los que queremos que el registrador de errores se active en un momento específico o en casos de ejecución de scripts externos, etc.
- Paso 1: obtenga la etiqueta del cuerpo de la página de marcado a la que se dirige.
- Paso 2: prepare un elemento de secuencia de comandos y agréguelo.
Javascript
const htmlDOM = // Get the DOM of
//the Target Markup
let errScr = htmlDOM.document
.createElement('script');
errScr.type = 'text/javascript';
errScr.innerText =
`window.addEventListener("error",
errorLog);function errorLog(event)
{ //process the event object}`;
htmlDOM.document.querySelector
('body').append(errScr);
Ejemplo – MÉTODO 3
Explicación del ejemplo: método 3: como puede notar, hemos usado iframe para acceder a index.html de la misma página (mismo origen), plantamos un script en parentPage para registrar errores en otra página web.
Advertencia: aunque será bloqueado, tenga cuidado con el uso de estos métodos en caso de CROSS-SCRIPTING (CORS) (Scripts de diferente origen) sin el permiso por escrito del propietario de esa página.
Encuentre el código HTML (Método 3):
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="index.html"
frameborder="0">
</iframe>
<script>
const htmlDOM = document
.querySelector('iframe').contentDocument;
let errScr = htmlDOM.createElement('script');
errScr.type = 'text/javascript';
errScr.innerText = `console.log("Script
Loaded");window.addEventListener("error",
errorLog);function errorLog(event){
console.log("Error can be Processed
Now....Use the eventObject as used
in method-1")}`;
htmlDOM.querySelector('body').append(errScr);
</script>
</body>
</html>
Nota IMPORTANTE –
- Puede usar innerText e innerHTML para escribir el script js, pero recomendamos usar innerText ya que la presencia de cualquier entidad HTML en el script crearía un error no deseado.
- En el método 3, el objetivo y la forma de obtenerlos pueden diferir en diferentes casos. Por lo tanto, el código utilizado en la implementación de este método puede diferir ligeramente, pero el enfoque seguirá siendo el mismo.