Ionic App Center Crashes | Así se implementa y se configura

¿Interesado en implementar la librería Ionic App Center Crashes en tu aplicación? O, quizás, ya lo has hecho, pero aún te falta alguna cosita para hacerla funcionar ¿cierto?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo, de una manera sencilla y con ejemplos, te mostraré cómo vas a poder ver, acceder y registrar los errores que hayan tenido, y puedas estar teniendo, los usuario de tu aplicación con ella misma.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Qué es Ionic App Center Crashes

En similitud a su hermano, App Center Analytics, nos permite enviar información al backend de App Center para que este la procese y nos la muestre de una manera legible para nosotros. Vamos, algo así como Firebase Analytics o Google Analytics.

A diferencia de dicho hermano, esta librería está centrada en errores en lugar de eventos. Así que nos proporciona mecanismos para filtrar mucho más la información, tanto la que enviamos cómo la que posteriormente se procesa y podemos visualizar en el backend.

Cómo instalar el componente

Al tratarse de una biblioteca fuera del core del sistema, tenemos que instalarla. Para ello vamos a utilizar las dos siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-appcenter-crashes 
$ npm install @awesome-cordova-plugins/app-center-crashes

La primera instalará el plugin de Cordova que permitirá a nuestra app comunicarse con la parte nativa de la plataforma donde se esté ejecutando la app.

La segunda instalará el código necesario para poder comunicar nuestro código TS con el plugin que hemos mencionado en el párrafo anterior.

Configurar la librería

A parte de lo anterior, tenemos que incluir el componente en los providers de nuestra aplicación. Para ello nos vamos a dirigir al archivo "app.module.ts" y vamos a agregar lo siguiente:

import { AppCenterCrashes } from '@awesome-cordova-plugins/app-center-crashes/ngx';

...

providers: [
...,
AppCenterCrashes,
...
]

...

Aunque este módulo suele usarse de manera global, si lo vamos a usar de manera local (en un solo componente/página de nuestra app) es recomendable incluirlo únicamente en el "module" donde se vaya a utilizar en lugar de en app.module.ts. Así ahorraremos recursos y, a parte, el rendimiento de nuestra app será mayor.

Plataformas soportadas

Cómo era de esperar, las plataformas son las siguientes:

• Android
• iOS

Cómo usar Ionic App Center Crashes

Cómo en todos los tutoriales, vamos a ver un ejemplo de código y después comentamos sobre él. Vamos con ello.

import { AppCenterCrashes } from '@awesome-cordova-plugins/app-center-crashes/ngx';


constructor(private AppCenterCrashes: AppCenterCrashes) { }

...

this.AppCenterCrashes.setEnabled(true).then(() => {
   this.AppCenterCrashes.lastSessionCrashReport().then(report => {
       console.log('Crash report', report);
   });
});

Bien, lo primero que haremos será importar la clase AppCenterCrashes en nuestro código para poder utilizarla.

Posteriormente vamos a inyectar una instancia de la clase a través del constructor.

Mediante el método "setEnable" activamos el SDK y controlamos la promesa para ver cuando ha terminado de configurarse.

Una vez resuelta la promesa todo quedará listo para utilizar cualquiera de las funciones que vamos a ver a continuación.

Con esto ya hemos terminado la parte del tutorial, ahora vamos a ver los campos de clase y las funciones de las que dispone este componente.

Funciones y campos de clase

Al igual que su hermano, App Center Analytics, esta clase no contiene una gran cantidad de estos. Pero siempre es bueno comentarlos para los que quieran profundizar un poco más. Recuerdo, no se comentarán métodos o campos de los padres.

generateTestCrash()

Esta función nos permite enviar a la plataforma un error/Crash de tipo test para cuando estamos depurando la aplicación. Es recomendable usarlo únicamente en desarrollo, en producción no se aconseja su uso.

No retornará nada.

hasCrashedInLastSession()

Nos permite conocer si la app a emitido algún error/crash en la última ejecución de esta.

Retorna una promesa que tenemos que controlar. Con ella llegará un booleano que nos indicará si lo hubo, o por el contrario, todo fue correctamente.

lastSessionCrashReport()

Nos ofrecerá detalles sobre el reporte de errores en la última sesión que se usó la librería.

Nos retornará una promesa que tenemos que controlar. Con ella llegará una instancia de la clase "AppCenterCrashReport" que a continuación veremos los campos que tiene.

isEnable()

Nos permite conocer si el sistema está disponible, o por el contrario, no.

Retorna una promesa que tenemos que controlar. Con ella llegará un booleano que nos indicará el estado.

setEnable(shouldEnable)

Nos permite activa, y desactivar, la librería a nuestros antojo y en tiempo de ejecución.

Retornará una promesa que tenemos que controlar. No traerá nada con ella, pero nos permitirá, cómo hemos visto en el ejemplo, conocer cuando ha terminado de realizar la acción.

AppCenterCrashReport

Esta es la interfaz que hemos visto antes, cuenta con los siguientes campos:

• id -> string -> La ID del reporte
• device -> AppCenterCrashReportDevice -> Veremos esta clase a continuación, pero contiene la información del dispositivo donde se emitió el error y detalles sobre este.
• appStartTime -> number -> Nos permite conocer el tiempo de cuando se abrió la app.
• appErrorTime -> number -> Nos permite conocer el tiempo de cuando se emitió el error.
• signal -> string -> Es el firma del proceso donde se estaba ejecutando la app.
• appProcessIdentifier -> number -> Es el ID del proceso donde se estaba ejecutando la app.

AppCenterCrashReportDevice

Esta es la clase que hemos visto en el punto anterior, la que contiene la información del dispositivo y tiene los siguientes campos:

• oem_name -> string
• os_name -> string
• app_version -> string
• time_zone_offset -> string
• carrier_name -> string
• screen_size -> string
• local -> stirng
• sdk_version -> string
• carrier_country -> string
• os_build -> string
• app_namespace -> string
• os_version -> string
• sdk_name -> string
• model -> string
• app_build -> string

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Sin nada más que agregar me despido ya geniete. Espero haberte ayudado a entender cómo funciona este componente y nos vemos en el próximo artículo. Hasta entonces ¡que te vaya bien!