Chiper Web loggin metrics

Tabla de contenido

• Chiper web loggin metrics
• Tabla de contenido
• Descripción
• Requerimientos
• Uso
  • Instalaciones basicas
  • Firebase
  • GCP

Descripción

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

Requerimientos

Firebase

1. Tener creado un proyecto en firebase console
2. Una vez este creado el proyecto, copiar el objeto de keys que nos provee firebase para configurar nuestros proyectos web

Error reporting (GCP)

1. Tener creado un proyecto google console
2. Copiar los keys que requerimos para inicializar error reporting

Uso

Instalaciones

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

Inicialización

Firebase

| Metodos | Descripción | Parametros | | ------------------------- | ----------------------------------------------------------------------------------- | ---------------- | | initFirebase | Inicializar firebase, recibe los keys que nos dan en firebase console y retorna una instancia inicializada | initFirebase({apiKey, authDomain, databaseURL, projectId, messagingSenderId, appId}): firebase.app.App | | initPerformance | Inicializa el serivico de performance | initPerformance(): void | | newTrace | Crea un nuevo segumiento | newTrace(traceName: string): void | | startTrace | Inicia un seguimiento previamente creado | startTrace(): void | | stopTrace | Termina un seguimiento | stopTrace(): void | | putAttribute | Agrega un atributo para el seguimiento actual | sputAttribute(key: string, value: string): void

Inicializar firebase

• Lo primero a tener encuenta es configurar nuestros keys para inicializar firebase, puede ser en un archivo independiente

=> src/config/firebase.ts

import { firebaseService } from 'chiper-web-logger-metrics'

export const initializeApp = firebaseService.initFirebase({
  apiKey: "AIzaSyA4v0E23-fake-dZK9HXskasdrfsaZJNLS34FGQ",
  authDomain: "projectId.fake.firebaseapp.com",
  databaseURL: "https://projectId.firebaseio.com",
  projectId: "fake-project-id",
  messagingSenderId: "12356789101",
  appId: "1:123456789101:fake:3123be123456a123a456789"
});

Crear un nuevo seguimiento

import { useEffect } from 'react'
import { performanceService } from 'chiper-web-logger-metrics';


export const PrivateRoute = () => {
  const location = useLocation();

  useEffect(() => {
    performanceService.newTrace(location.pathname);
    // code
	}, []);

  return ()
}

Iniciar un seguimiento y agregar un atributo al seguimiento

import { useEffect } from 'react'
import { performanceService } from 'chiper-web-logger-metrics';


export const PrivateRoute = () => {
  const location = useLocation();

  useEffect(() => {
    performanceService.startTrace();
    performanceService.putAttribute("storeID", storeId);
    // code
	}, []);

  return ()
}

Terminar un seguimiento

import { useEffect } from 'react'
import { performanceService } from 'chiper-web-logger-metrics';


export const PrivateRoute = () => {
  const location = useLocation();

  useEffect(() => {
	 // code
     return () => {
       performanceService.stopTrace();
      };
	}, []);

  return ()
}

GCP

| Metodos | Descripción | Parametros | | ------------------------- | ----------------------------------------------------------------------------------- | ---------------- | | startReporting | Inicializar gcp(Error reporting) con los keys q nos da google console cuando creamos un proyecto | startReporting(keys: InitGoogleEntity): void | | reportError | Reportar un error que quedara en los logs de la consola de error reporting | recordError(error: Error, jsErrorName?: string) |

Inicializar Error Reportin (GCP)

• Lo primero a tener encuenta es configurar nuestros keys para inicializar Error reporting.

import { useEffect } from 'react'
import { googleService } from 'chiper-web-logger-metrics';


export const Main = () => {


  useEffect(() => {
    googleService.startReporting({
      key: REACT_APP_GCP_KEY,
      projectId: REACT_APP_GCP_PROJECT_ID,
      service: REACT_APP_GCP_SERVICE,
      version: REACT_APP_GCP_VERSION
     });
	}, []);
  
  return ()
}

Reportar un error

import { googleService } from 'chiper-web-logger-metrics';


axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // code ...
    googleService.reportError(error, myStoreId);
    return Promise.reject(error);
   }
);