chiper-web-logger-metrics

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

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

Error reporting (GCP)

• Tener creado un proyecto google console
• 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);
   }
);