Contenido

Logueando los errores nuestros usuarios

23 ago

+ 6

Está claro que javascript está enriqueciendo las aplicaciones web modernas y que gracias a su uso, podemos mejorar la experiencia del usuario frente a nuestra aplicación. El problema de delegar al cliente cierta funcionalidad de la página es la detección de errores en estas funcionalidades.

En el trabajo muchas veces hemos detectado errores en la aplicación, debidas a los datos obtenidos o a datos mostrados o problemas con el servidor o… gracias a la buena fé de los usuarios que se molestan en enviarnos un mail (o llamar) indicando el problema. Pero me atrevo a decir que el porcentaje de usuarios que se preocupa por esto es casi despreciable (a razón de un 1% como mucho).

Por este motivo nos vemos obligados a llevar un control de estos errores, y poder corregirlos sin necesidad de esperar a que nos informen. Gracias a Ajax, podemos hacer que el propio cliente nos envie la información necesaria sobre el problema en cuestión. Veamos como aprovecharnos.

Clase log en javascript

var log = {
	logfile: 'logfile.php', // cambiar al fichero deseado
	debug: function(str, fn){ this.send("DEBUG", str, fn); 	}, 	
	info: function(str, fn){ this.send("INFO", str, fn); 	}, 	
	warn: function(str, fn){ this.send("WARN", str, fn); 	}, 	
	error: function(str, fn){ this.send("ERROR", str, fn); 	}, 	
	fatal: function(str, fn){this.send("FATAL", str, fn);	}, 	
	send: function(type,str, func) {
		var oAjax = (XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
		if (oAjax == null) return;
		oAjax.open("POST", this.logfile, true);	
	 	oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		oAjax.onreadystatechange = function() {
			if (oAjax.readyState == 4 && oAjax.status == 200) {
				fn = (func == null)?function() {return null;}:func;
				fn(oAjax.responseXML,oAjax.responseText,oAjax);
			}
	   	};
		oAjax.send("msg=[" + type + "]: " + str);
		return false;	
	}
};

Como podemos ver, la clase se compone de una serie de métodos que indican el tipo de información que queremos almacenar. Dependiendo de la gravedad de nuestro error optaremos por uno u otro.

Métodos y su uso 

Todos los métodos reciben dos parámetros, en los cuales informaremos el texto que queremos almacenar en nuestro servidor y una función por si queremos ejecutar algo para alertar al cliente, aunque este último parámetro es opcional. 

function hayunerror() {
	alert("Hay un error en breve lo solucionaremos");
}
log.info("texto que quiero enviar", hayunerror);

 Lo cual nos puede llevar a algo de este estilo.

log.debug("Lanzamos petición");
log.info("Hemos lanzado la petición y todo OK");
log.warn("No ha devuelto los datos correcto");
log.error("No encuentra la página en el servidor", function(){
			alert("Estamos teniendo problemas técnicos, vuelva a intentarlo pasados unos minutos.);
});
log.fatal("Joder!! como la hemos liado", function() {
			location.href = "http://www.google.es";
});

Dependiendo de la aplicación y el nivel de control sobre este tipo de errores dependerá el lugar y el número de puntos de control que el desarrollador deberá controlar.

La función que le pasamos como parámetro, recibirá 3 parámetros obtenidos de la petición ajax.

fn(oAjax.responseXML,oAjax.responseText,oAjax);

Siendo por orden la respuesta en formato XML(responseXML), la respuesta en format Text(responseText) y el objeto xmlhttprequest completo.

Una vez colocado por nuestro código deberemos saber que la clase js, envia al servidor un parámetro en POST llamado msg, y que desde el servidor deberemos controlarlo para poder almacernarlo.

El lado del servidor

Está claro que tenemos que montar algo para almacenar en el servidor los mensajes enviados, para ello podemos optar por un fichero de texto o una tabla de la base de datos, en este ejemplo voy a usar un fichero de texto pero cualquiera de las dos posibilidades es igual de buena.

//logfile.php
<?php
 //Nombre del fichero de log
 $nombre_archivo = 'aplicacion.log';
 //Recogemos el parámetro msg
 $contenido = strip_tags(addslashes($_POST['msg']));

 //Abrimos el fichero y añadimos el contenido
 if (!$gestor = fopen($nombre_archivo, 'a')) exit;
 if (fwrite($gestor, $contenido) === FALSE) exit;
 fclose($gestor);
?> 
  • Una cosa que te olvidas comentar es que en la función que nos permite personalizar en el envío del log, tenemos acceso a los datos devueltos por ajax.

    Es decir, que podemos contar con una respuesta del servidor. Se me ocurre por ejemplo que si se ha podido enviar devuelva un “disculpe las molestias, pronto lo solucionaremos”, y si ha ocurrido un error en la escritura del archivo devuelva un “nos ha sido imposible reportar el error. Por favor, notifíquelo por email a webmaster@example.com“.

    Los tres parámetros de que disponemos son el responseXML devuelto, el responseText, y por último el objeto completo de conexión AJAX, en ese orden.

    Muy buena información, sí señor. ¿Echo en falta algún via?

  • Magnífico post. Si añadimos un control para enviar los datos del navegador del usuario ya tenemos información suficiente para actuar en consecuencia. Sólo una pregunta, ¿si no se encuentra la página en el servidor como ejecutas la función?

  • Alex!!! Es mio!! No me quites méritos!! :D

    La verdad es que lo he estado montando en el trabajo, con algunas diferencias (en el servidor tengo Java) y en la respuesta devuelvo el mensaje “Disculpe…” en el idioma del usuario.

    Pero he creido que era más cómodo así para explicar la idea :D

    Saludos

  • Esta muy weno esto!!!

    Lo agradesco mil ^^

    Muchas gracias!

    Saludos ;)

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.