Chiper App loggin metrics

Tabla de contenido

• Chiper app loggin metrics
• Tabla de contenido
• Descripción
• Requerimientos
• Uso
  • Instalaciones basicas
  • Configuraciones
  • Android Setup
  • Crashlytics
  • Inicialización
  • Crashlytics métodos
  • Ejemplos

Descripción

Lib que contiene varios modulos para capturar el performance y los crashes de Apps basadas en React Native

Requerimientos

Firebase

1. Tener creado un proyecto en firebase console
2. Descargar los archivos google.services.json y GoogleService-info.plist
3. Agregar el archivo firebase.json que contiene la habilitación de los servicios de firebase en debug

Uso

Instalaciones basicas

yarn add @react-native-firebase/app o npm i @react-native-firebase/app

yarn add chiper-app-logger-metrics o npm i chiper-app-logger-metrics

Configuraciones

La siguiente configuración tambien se puede encontrar en React native firebase. https://rnfirebase.io/

• Tener el proyecto creado en firebase https://console.firebase.google.com/
• Una vez tenga el proyecto creado, descargar el file google.services.json(Android) - googleInfo.plist(IOS) y agregarlos en sus proyectos, a nivel de raiz y a nivel de ./android, ./ios
• Agregar el firebase.json a la raiz y activar o desactivar el servicio que requiere usar en debug(develop):

firebase.json

{
  "react-native": {
    "perf_auto_collection_enabled": true,
    "crashlytics_debug_enabled": true
  }
}

Android Setup

=> android/build.gradle

• Verificar que este el repositorio de google (1)
• Agregar dependencia de google services (2)

buildscript {
  repositories {
    // ..
    google() // Here(1)
  }
  dependencies {
    // ....
    classpath("com.google.gms:google-services:4.3.5") // Here(2)
    }
}

=> android/app/build.gradle

• Agregamos el plugin

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

Crashlytics

yarn add @react-native-firebase/crashlytics o npm i @react-native-firebase/crashlytics

=> android/build.gradle

• Agregamos la dependencia del plugin crashlytics

buildscript {
    ext {}
    repositories {}
    dependencies {
        // ....
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.2' // Here
    }
}

=> android/app/build.gradle

• Agregamos el plugin de crashlytics

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.crashlytics' // here

Reconstruir el proyecto en react native

npx react-native run-android

Inicialización

Crashlytics métodos

| Metodos | Descripción | Parametros | | ------------------------- | ----------------------------------------------------------------------------------- | ---------------- | | log | Capturar una cadena de texto | log(screen: string) | | recordError | Captura la instancia de un error | recordError(error: Error, jsErrorName?: string) | | setAttribute | Setea un atributo llave valor | setAttribute(name: string, value: string) | | setAttributes | Setea atributos por medio de un objeto (llave valor) | setAttributes(data: Object) | | crash | Genera un crash automatico, cierra la app | crash() | | setUserId | Capturar un id | setUserId(id: string) |

Ejemplos

Log

import {crash} from 'chiper-app-logger-metrics';

export const App = () => {
  useEffect(() => {
    crash.log('App mounted.');
  }, []);

  return (
    <View>
      <Button title="Test Crash" onPress={() => crashlytics().crash()} />
    </View>
  );
};

Crash

import {crash} from 'chiper-app-logger-metrics';

export const App = () => {

  const generateCrash = () => {
    crash.crash()
  }

  return (
    <View>
      <Button title="Test Crash" onPress={generateCrash} />
    </View>
  );
};

Setear multiples atributos

import React from 'react';
import { View, Button } from 'react-native';

import {crash} from 'chiper-app-logger-metrics';

export const CheckoutPage = () => {

  const createOrder = (order: Order) => {

    crash.setUserId(order.userOrderId),
      
    crash.setAttribute('order', order.orderId)
    
    crash.setAttributes({
      step: order.step,
      id: order.userOrderId,
    })
  }
  

  return (
    <View>
      <Button
        title="Create Order"
        onPress={() => createOrder({ 
          orderId: '21342432dsafsd',
          step: 'step-1',
          userOrderId: 'khbv435hj34bh6bk457' 
        })}
      />
    </View>
  );
}

Log Error Requests

import React from 'react';
import { View, Button } from 'react-native';

import {crash} from 'chiper-app-logger-metrics';

export const ProductPage = () => {

  
  const handleGetProducts = async () => {
    try {
      const products = await getProducts()
      return products
    } catch (error) {
      crash.recordError(error, error?.response?.message)
    }
  }
  

  return (
    <View>
      <Button
        title="Get products"
        onPress={handleGetProducts}
      />
    </View>
  );
}