Manejo de errores en Redux.js

¿Que ocurre si una acción llega con un dato mal formado? ¿Si a un reducer le falta un punto y coma? Cuando trabajamos con código no hay forma de evitar al 100% los errores. Por esa razón es muy importante capturarlos para que no rompan nuestra aplicación y enterarnos si pasó algo.

En Redux nuestro código donde es muy probable que hayan errores son los reducers y los middlewares, si quisiéramos capturar los errores en ambos por separado tendríamos que a cada reducer y a cada middleware envolverlos en un try/catch y manejar sus errors individualmente.

¡Pero para evitar esto podemos usar un middleware!

Creando nuestro middleware

Vamos a ver entonces como crear un middleware que capture nuestros errores:

const tryCatch = errorHandler => () => next => action => {
  try {
    return next(action);
  catch (error) {
    return errorHandler(error);
  }
};

Ese va a ser nuestro middleware. Básicamente lo que hace es intenta llamar al siguiente middleware (o reducer) y si en algún momento hay un error lo captura y ejecuta la función errorHandler que le hayamos pasado al instanciarlo.

Ahora para aplicar nuestro middleware es tan fácil como hacer lo siguiente al crear nuestro Store.

import { createStore, applyMiddleware} from 'redux';
// nuestro middleware
import tryCatch from './middlewares/try-catch';
// otro posible middleware de un tercero
import someMiddlware from 'some-middleware';
import reducer from './reducer';
function errorHandler(error) {
  // acá hacemos algo con el error como mostrarlo en consola
  // o mejor aún mandarlo a algún sistema como Sentry o track:js
  // ¡incluso a nuestro propio servicio interno!
  console.error(error);
}
export default createStore(reducer, applyMiddleware(
  tryCatch(errorHandler),
  someMiddleware
));

Como se puede ver es bastante fácil de capturar nuestros errores con un simple middleware, solo tenemos que asegurarnos de que siempre sea el primer middleware para que pueda atrapar los errores de todo nuestro código.

Usando uno ya hecho

Si no queremos crear nuestro propio middleware para capturar errores podemos simplemente usar uno ya hecho descargándolo de npm:

npm i -S redux-catch

• redux-catch: Middleware para capturar errores

Ahora solo tendríamos que importar redux-catch en vez de nuestro propio middleware y pasarle nuestra función errorHandler para que sepa que hacer con los errors y ya estamos listo.

Adicionalmente el errorHandler que le pasemos a redux-catch recibe como segundo parámetro el método getState que nos puede servir para saber el estado de la aplicación en el momento del error.

Conclusión

Nuestra aplicación puede tener errores por un montón de razones, ya sean errores de sintaxis, algún bug o que simplemente un dato llegó mal formado y nuestro código no supo que hacer.

Y capturarlos es importante para evitar que nuestra aplicación se rompa y ya no le funcione al usuario e implementar un middleware tan simple nos puede ayudar mucho a dar una mejor experiencia de usuario e incluso a arreglar bugs antes de que el usuario se entere.