Cuando decidimos que vamos a tomar el camino de trabajar con Ajax en HTML5, debemos estar conscientes que hay que manejar los posibles errores que se producen, en concreto tenemos dos tipos de errores que se diferencian en su perspectiva.
El primer tipo de error viene dado desde el punto de vista del objeto XMLHttpRequest y es alguna situación que impida que la petición o request sea hecha, como por ejemplo que el nombre de host no resuelva en el DNS, una conexión rechazada o una URL no válida por ejemplo.
El segundo tipo de error, viene dado desde el punto de vista de nuestra aplicación, pero no tiene que ver con el objeto XMLHttpRequest, es decir, se hizo una petición, esta se aceptó, procesó y generó una respuesta, sin embargo la respuesta no fue el contenido esperado, como por ejemplo si la URL que especificamos no existe.
Manejando errores de SetUp
Veamos que el primer tipo de error que debemos manejar es cuando pasamos data errónea al objeto XMLHttpRequest, algo como una URL mal formada, a pesar que suene descabellado esto es un error bastante común cuando trabajamos con Ajax.
Por ejemplo veamos el siguiente llamado el cual puede llevarnos a este error:
Para que ocurra un problema de este tipo usualmente se da porque se le pide al usuario que introduzca algún valor o dato con el cual vamos a generar la URL y como sabemos el usuario es el primer punto débil de un programa y para que esto no nos afecte tenemos que desarrollar formas de validar y manejar cualquier tipo de contenido que nos envíe.
Para manejar esto utilizamos un bloque try/catch que nos permite ejecutar el código y si existe algún problema, capturamos el error o excepción y podremos darle un manejo adecuado, en este caso de ejemplo lo que hacemos es mostrar el error, como podemos ver en el siguiente código, el cual resumimos y solo mostramos las partes que interesan a este punto en particular:
Dentro del bloque catch tenemos la oportunidad de salvar el error, para ello podemos pedir que se ingrese de nuevo el dato, enviar a una página donde se indique el error, etc. Lo importante es que la página no falle y muera el proceso inesperadamente para el usuario.
Manejando errores de Request
Este error se genera cuando hacemos la petición pero algo va mal con ella, como por ejemplo que la URL solicitada no resuelva en el DNS; veamos la siguiente llamada:
En este caso la URL no puede ser resuelta por el DNS, además que como tiene un origen diferente al del documento pudiera afectarnos también, para poder gestionar este tipo de errores, utilizamos una función que nos ayude a manejarlos, como la que vemos en este ejemplo:
El único punto que debemos tener en cuenta es que los navegadores no manejan la información del objeto httpRequest de la misma forma, por lo que la respuesta puede no ser la misma.
Con esto terminamos el tutorial y ya tenemos un mejor concepto de cómo manejar y gestionar los errores que puedan ocurrir en una petición Ajax y que puedan hacer que nuestra página fallé.
El primer tipo de error viene dado desde el punto de vista del objeto XMLHttpRequest y es alguna situación que impida que la petición o request sea hecha, como por ejemplo que el nombre de host no resuelva en el DNS, una conexión rechazada o una URL no válida por ejemplo.
El segundo tipo de error, viene dado desde el punto de vista de nuestra aplicación, pero no tiene que ver con el objeto XMLHttpRequest, es decir, se hizo una petición, esta se aceptó, procesó y generó una respuesta, sin embargo la respuesta no fue el contenido esperado, como por ejemplo si la URL que especificamos no existe.
Manejando errores de SetUp
Veamos que el primer tipo de error que debemos manejar es cuando pasamos data errónea al objeto XMLHttpRequest, algo como una URL mal formada, a pesar que suene descabellado esto es un error bastante común cuando trabajamos con Ajax.
Por ejemplo veamos el siguiente llamado el cual puede llevarnos a este error:
httpRequest.open("GET", "http://");Para que ocurra un problema de este tipo usualmente se da porque se le pide al usuario que introduzca algún valor o dato con el cual vamos a generar la URL y como sabemos el usuario es el primer punto débil de un programa y para que esto no nos afecte tenemos que desarrollar formas de validar y manejar cualquier tipo de contenido que nos envíe.
Para manejar esto utilizamos un bloque try/catch que nos permite ejecutar el código y si existe algún problema, capturamos el error o excepción y podremos darle un manejo adecuado, en este caso de ejemplo lo que hacemos es mostrar el error, como podemos ver en el siguiente código, el cual resumimos y solo mostramos las partes que interesan a este punto en particular:
try {
...
httpRequest.open("GET", "http://");
...
httpRequest.send();
} catch (error) {
displayErrorMsg("try/catch", error.message);
}
Dentro del bloque catch tenemos la oportunidad de salvar el error, para ello podemos pedir que se ingrese de nuevo el dato, enviar a una página donde se indique el error, etc. Lo importante es que la página no falle y muera el proceso inesperadamente para el usuario.
Manejando errores de Request
Este error se genera cuando hacemos la petición pero algo va mal con ella, como por ejemplo que la URL solicitada no resuelva en el DNS; veamos la siguiente llamada:
httpRequest.open("GET", "http://a.nodomain/doc.html");En este caso la URL no puede ser resuelta por el DNS, además que como tiene un origen diferente al del documento pudiera afectarnos también, para poder gestionar este tipo de errores, utilizamos una función que nos ayude a manejarlos, como la que vemos en este ejemplo:
function handleError(e) {
displayErrorMsg("Error event", httpRequest.status + httpRequest.statusText);
}
El único punto que debemos tener en cuenta es que los navegadores no manejan la información del objeto httpRequest de la misma forma, por lo que la respuesta puede no ser la misma.
Con esto terminamos el tutorial y ya tenemos un mejor concepto de cómo manejar y gestionar los errores que puedan ocurrir en una petición Ajax y que puedan hacer que nuestra página fallé.
