fbpx
mayo 12, 2021

Registro de errores de JavaScript del lado cliente, Parte II

Comparte

Por Karolis Dzeja, Desarrollador de UX

Esta es la segunda parte de una serie de artículos que describen las prácticas recomendadas para registrar errores de JavaScript del lado cliente. Publicado originalmente en mi blog, lea la Parte I.

Lo dejamos en la parte que envié nuestros mensajes de error a Google Analytics y discutimos sus limitaciones. No fue en tiempo real, lo que significa que no podemos confiar en él para responder inmediatamente a los problemas y hay límites a los datos que podemos rastrear.

Para enviar los datos a nuestro servidor para ser grabados, podríamos intentar algo como esto:

window.onerror = function(message, url, linenumber) {
  si (ventana. XMLHttpRequest) {
    var xhr = nuevo XMLHttpRequest();
    var server = "http://server.example.com/errorlog";
    var log = linenumber + message + url;
    xhr.open("POST", servidor);
    xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    xhr.send(log);
  }
  volver verdadero;
}

Pero nos encontraremos con restricciones entre orígenes si nuestro servidor está en otro dominio. Por lo tanto, si no podemos usar JavaScript del lado cliente para publicar datos en otro dominio, ¿cómo lo hace Google Analytics? Usan un píxel de seguimiento. El script de Google realiza una solicitud GET para una imagen 1×1 y coloca los datos en los parámetros de consulta después del nombre de archivo, que el servidor puede leer:

<img src="http://server.example.com/pixel.gif?message=value&url=value2&line=value3">

Además de enviar el mensaje de error, la url del archivo y el número de línea, ¿qué más nos gustaría saber sobre el usuario que experimentó este error? Agarrar el agente de usuario nos indicará el navegador y el sistema operativo. Podemos obtener las dimensiones de la pantalla y la relación dispositivo-píxel para obtener una mejor comprensión del dispositivo. Podríamos obtener un perfil completo usando Modernizr, pero eso probablemente sea exagerado.

Vamos a estructurar nuestros datos con JSON:

{
  "mensaje": mensaje,
  "url": url,
  "linenumber": linenumber,
  "página": location.href,
  "userAgent": navigator.userAgent,
  "resolución": screen.width + "x" + screen.height,
  "devicePixelRatio": window.devicePixelRatio
}

Eso nos dará suficiente para empezar a depurar errores. Podremos tener una buena idea del contexto del error. Otras ideas de información para incluir cosas como el tipo de usuario (por ejemplo, iniciar sesión frente a no iniciar sesión, administrador o usuario normal).

Vamos a crear una matriz como hace Google Analytics y recopilar errores en ella:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // define the array to hold errors
      var _err = _err || ;[]

      // push errors to the array
      window.onerror = function(message, url, linenumber) {
        _err.push({
          "message": message,
          "url": url,
          "linenumber": linenumber,
          "page": location.href,
          "userAgent": navigator.userAgent,
          "resolution": screen.width + "x" + screen.height,
          "devicePixelRatio": window.devicePixelRatio
        });
      }      

      // create a pixel from an array item
      function sendPixel(data) {
        var img = document.createElement("img");
        var src = "http://server.example.com/pixel.gif?id=1";
        for (key in data) {
          src += "&" + key + "=" + encodeURIComponent(data);
    [key]    }
        img.src = src;
        document.body.appendChild(img);
      }

      // send all queued pixels, listen for new pixels
      function initErr() {
        _err.forEach(function(item) {
          sendPixel(item);
        });
        _err = ;
        []_err.push = function(data) {
          sendPixel(data);
        }
      }

      // wait for body to load to put pixels in it
      var _err_timer = setInterval(function() {
        if (document.body != null) {
          document.body.addEventListener("load", initErr(), false);
          clearInterval(_err_timer);
        }
      }, 10);
    </script>
  <!-- rest of page --></head></html>

Ahora que tenemos el script del lado cliente, tendremos que hacer un servidor para él y probarlo.

De vuelta a la parte I

libro 9 datos increibles del negocio de internet

¿Quieres el libro?

Te pedimos permiso para enviarte el libro al correo e información que te ayudara a progresar en el mundo online.

¿Qué vas a aprender con el libro?

  1. Nueva tendencia de mercado por el COVID-19
  2. Entender las preferencias de los usuarios en internet
  3. Comprensión general del negocio de las tiendas digitales
  4. Ver el impacto de la publicidad digital en la actualidad
  5. Mejor herramienta para las webs según las empresas

¿Tienes alguna pregunta?

Escribe un comentario ahora, para ayudarte 🙂

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

Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y los términos de servicio de Google.