Registro de errores de script en JavaScript

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.

  1. window.addEventListener(“error”, //yourErrorLoggerFunction ) — Adjunte un evento de error al objeto de ventana (DOM).
  2. 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.
  3. 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 –

  1. 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.
  2. 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.

Publicación traducida automáticamente

Artículo escrito por sinha1abc y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *