# chiper-web-logger-metrics

> Chiper logger metrics for web

Latest version **1.2.1** (published 2022-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install chiper-web-logger-metrics
pnpm add chiper-web-logger-metrics
yarn add chiper-web-logger-metrics
bun add chiper-web-logger-metrics
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-11-25 |
| First published | 2022-10-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 22.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Chiper |
| Maintainers | chespisan, tomas2400, devleonardomrabelo, brayanacebo, michaelrl, oscardrt, oscardev, jjuan1k94, brunomacedo |

## Links

- npm: https://www.npmjs.com/package/chiper-web-logger-metrics
- Repository: https://github.com/chiper-inc/Chiper-web-logger-metrics
- Homepage: https://github.com/chiper-inc/Chiper-web-logger-metrics#readme
- Issues: https://github.com/chiper-inc/Chiper-web-logger-metrics/issues
- npm.io page: https://npm.io/package/chiper-web-logger-metrics

## Dependencies (2)

- [firebase](https://npm.io/package/firebase.md) 8.10.0
- [stackdriver-errors-js](https://npm.io/package/stackdriver-errors-js.md) ^0.12.0

## Recent versions

- 1.2.1 (latest) — 2022-11-25
- 1.2.0 — 2022-11-24
- 1.1.0 — 2022-10-25
- 1.0.0 — 2022-10-24

## README

# Chiper Web loggin metrics

# Tabla de contenido

- [Chiper web loggin metrics](#Chiper-web-loggin-metrics)
- [Tabla de contenido](#Tabla-de-contenido)
- [Descripción](#Descripción)
- [Requerimientos](#Requerimientos)
- [Uso](#Uso)
  - [Instalaciones basicas](#Instalaciones-basicas)
  - [Firebase](#Firebase)
  - [GCP](#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`

```typescript
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

```typescript
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

```typescript
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

```typescript
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.


```typescript
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

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


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

---
_Source: https://npm.io/package/chiper-web-logger-metrics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._