Registro de errores de JavaScript del lado cliente, Parte II
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
