APM - RUM

Para poder utilizar el apm del lado del front debemos:

• Instalar las siguientes dependencias

pnpm i @elastic/apm-rum @elastic/apm-rum-react @architecture-it/core

• Agregar las variables de entorno al archivo .env

.env

# Valores estándar "Development" | "QA" | "Production"
REACT_APP_ENV_APM=Development
# En el caso de que se quiera desactivar el apm
# REACT_APP_DISABLE_APM=1

• Agregar un archivo dentro de la carpeta src llamado monitor.ts con un contenido similar a este, es un ejemplo para web.

src/monitor.ts

import { init as RumAgent } from "@elastic/apm-rum";
import env from "@architecture-it/react-env";
import { ENV_APM, getApmConfig } from "@architecture-it/core";

import { version, name } from "../package.json";

const disableApm = env("DISABLE_APM");
// Valores estandarizados "Development" | "QA" | "Production"
const environment = env("ENV_APM") as ENV_APM;

const monitor = RumAgent({
  ...getApmConfig({
    serviceVersion: version,
    serviceName: name,
    disableApm: Boolean(disableApm),
    environment,
  }),
});

export default monitor;

• Agregar la inicialización antes del primer render, con un nombre puntual, se recomienda Home por ejemplo.

index.tsx

import rum from "./monitor";

rum.setInitialPageLoadName("Home");

ReactDOM.render(
  <BrowserRouter>
    <StyleSystemProvider>
      <CssBaseline />
      <App msalInstance={msalInstance} />
    </StyleSystemProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

• Agregar a cada página el High Order Component de la librería oficial del elastic APM con el evento estandarizado por arquitectura route-change:

pages/About/index.tsx

import { withTransaction } from "@elastic/apm-rum-react";
import { EVENT_TYPES } from "@architecture-it/core";

import styles from "./About.module.scss";

function About() {
  // example
}

export default withTransaction("About", EVENT_TYPES.ROUTE_CHANGE)(About);