chiper-web-logger-metrics v1.2.1

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

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

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