aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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);
?>