Menu

Seguimiento de errores en una app Ionic

ionicsentry - May 25, 2018 por Matías Álvarez Sabaté | Edita este Post.
ionic3.9.2cordova-cli7.1.0ionic-cli3.19.0

Algo muy importante para un desarrollo de software, sea una app movil, de escritorio o web, es como desarrolladores y administradores del sistema(si estamos a cargo de ello), es estar atentos a cualquier error que pueda ocurrir.

Hola a todos!!

Este es mi primer post en la comunidad. Les quiero hablar de una herramienta muy buena que hace la comencé a usar hace solo 3 días y me ha gustado mucho.

Algo muy importante para un desarrollo de software, sea una app movil, de escritorio o web, es como desarrolladores y administradores del sistema(si estamos a cargo de ello), es estar atentos a cualquier error que pueda ocurrir. Y para esto existe Sentry, una herramienta, que con unas pocas lineas de código “escucha” cualquier tipo de error que pueda ocurrir, y nos avisa por email, slack y otras opciones. El plan base es gratuito, y como muchas otras tecnologías, si se supera los 10.000 eventos, corresponde el pago mensual de una determinada cantidad.

La dirección de esta herramienta es la siguiente: https://sentry.io/welcome/

Antes de enumerar los pasos para hacer uso de sentry, hay que registrarse. Luego creamos un nuevo proyecto, en la categoría web,e indicamos Angular.

Para los que usan angular-cli, ahí mismo le indicará paso a paso el proceso de empezar a hacer uso de sentry, pero la forma que yo lo hice es algo más simplificada. En esa misma instrucciones hay una url que contiene la llaves del proyecto Más adelante volveré a nombrarlas.

Bueno, ahora vamos a lo importante, que es empezar a usar sentry, simplemente hay que seguir estos sencillos pasos

1. Instalar sentry

Dentro de nuestro proyecto ejecutamos.

$ npm install raven-js --save

2. Creamos un nuevo servicio

En nuestro proyecto creamos un Servicio.

import { IonicErrorHandler } from 'ionic-angular';
import Raven from 'raven-js';

Raven
    .config('<YOUR DSN>')
    .install();

export class SentryErrorHandlerService extends IonicErrorHandler {

    handleError(error) {
        super.handleError(error);

        try {
          Raven.captureException(error.originalError || error);
        }
        catch(e) {
          console.error(e);
        }
    }
}

En lugar de esto <YOUR DSN> deben pegar la url que les nombre anteriormente.

3. Reemplazar.

Dentro del archivo app.module.ts hacemos lo siguiente: remplazamos IonicErrorHandler.

{provide: ErrorHandler, useClass: IonicErrorHandler},

por SentryErrorHandlerService, así:

{provide: ErrorHandler, useClass: SentryErrorHandlerService},

Y eso es todo, a partir de ahí, cualquier error sea en desarrollo o producción les llegará un correo. Algo importante, es dentro de las settings del proyecto, en la seccion rules, se puede configurar para que llegue solo una vez un correo o siempre para un error que se repita.

Bueno, eso sería todo, espero que les haya gustado y que se les haga muy util. Vuelvo a repetir, solo llevo 3 dias usando esta herramienta, y de la forma descrita anteriormente funciona perfectamente.

Fuente de referencia: https://gonehybrid.com/how-to-log-errors-in-your-ionic-2-app-with-sentry/

Hasta la proxima :)

¡Compártelo!