Haciendo MotoApp: Capturando Errores con Sentry

Con este artículo ya se cierra la serie de artículos de MotoApp.

El viaje fue corto pero el aprendizaje mucho. Nos topamos con muros en varias ocasiones pero con paciencia y ayuda de Stack Overflow y GitHub, los resolvimos.

Otras veces fueron las limitantes del desarrollo móvil las que nos hicieron replantear si volveríamos a trabajar en cualquier plataforma para dispositivos que no sean web y en otras veces simplemente aceptamos los beneficios de una app en el celular.

Sabemos que pudimos haber hecho más por la aplicación pero la idea era trabajar limitados por un alcance corto para aprender y determinar si React Native es una buena plataforma para trabajar.

Captura de Errores con Sentry

Sentry es un gran servicio para capturar errores y tener todo el contexto de lo que pasa. Lo beneficioso de Sentry y servicios similares es que no hay que entrar al servidor o estar pendiente al lector de logs de la aplicación para saber qué pasó. Sentry lo hace por uno.

Como desarrollador Rails, lo conozco ya desde hace un tiempo y no he dejado de usarlo. Instalarlo y configurarlo en este framework es algo sumamente sencillo pero en frameworks de aplicaciones de una página(SPA) la cosa cambia.

Por lo menos, para el caso de MotoApp que está desarrollado sobre React Native y Expo, las instrucciones las seguí según la documentación de Expo.

Previamente, hay que registrarse y crear un proyecto para obtener un DSN que es el que usa la aplicación para enviar los errores a Sentry.

Según las instrucciones de Expo, una vez instalado el módulo de Sentry:

$ npm i sentry-expo --save

Procedemos a configurarlo en el archivo App.js

import Sentry from 'sentry-expo';

// Remove this once Sentry is correctly setup.
Sentry.enableInExpoDevelopment = true;

Sentry.config('AQUIVAELDSN').install();

Idealmente, el DSN lo deberíamos leer de una variable de entorno mediante process.env.SENTRY_DSN pero ellos dejan todo simplificado.

Y después, se configura lo siguiente en el archivo app.json:

{
  "expo": {
    // ... your existing configuration

    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "SHORT-NAME-DE-LA-ORGANIZACION-DE-SENTRY",
            "project": "NOMBRE-DEL-PROYECTO",
            "authToken": "TOKEN-DE-SENTRY"
          }
        }
      ]
    }
  }

En todo caso, como no todo es color de rosa…

Error Unable to resolve module sentry-expo

Cuando intenté hacer un expo publish me topé con esto:

[11:26:27] Unable to resolve module `sentry-expo` from `/home/francisco/projects/devaspros-projects/motoapp/App.js`: Module `sentry-expo` does not exist in the Haste module map or in these directories:
[11:26:27]   /home/francisco/projects/devaspros-projects/motoapp/node_modules
[11:26:27] 
[11:26:27] This might be related to https://github.com/facebook/react-native/issues/4968
[11:26:27] To resolve try the following:
[11:26:27]   1. Clear watchman watches: `watchman watch-del-all`.
[11:26:27]   2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
[11:26:27]   3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
[11:26:27] Cannot read property 'status' of undefined

La solución está dada por los pasos que aparecen con un comando adicional:

$ npm start --reset-cache

Y después sí expo publish.

Conclusiones

Firebase, Expo, React Native, Flexbox, JavaScript Intl, Sentry fueron de las cosas que se aprendió durante el desarrollo de este mini proyecto. Un gran aprendizaje en un proyecto corto.

Anuncio publicitario