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

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);
   }
);