Skip to main content

Install the BRUM Agent

BRUM ships as an npm package. A developer installs it and changes one file — the application's entry file — and every page of the app is monitored from then on. React and Vue are supported today.

One-time developer task

This is a code change to your own web app, done once. Nothing else in the application changes, and there's no per-page work. The next visitor after you deploy produces data.

Step 1 — Install the package​

npm install @codifinary/codexray-brum-agent

The package is published to GitHub Packages, so your project needs a one-line .npmrc entry pointing the @codifinary scope at that registry:

@codifinary:registry=https://npm.pkg.github.com

Your dev team sets this up once for the project.

Step 2 — Register the agent in your entry file​

Import the agent and register it before the app mounts. The only file that changes is your app's entry file:

  • React — src/index.tsx or src/main.tsx
  • Vue — src/main.js or src/main.ts

React​

// src/index.tsx — the only file that changes
import ClientMonitor from "@codifinary/codexray-brum-agent";

ClientMonitor.register({
  service: "Checkout UI",                        // the name shown in the Applications list
  serviceVersion: "1.2.1",                       // your app's version
  collector: "https://<codexray-host>/ingest",   // where reports are sent
  pagePath: "index.html",
  XAPIKey: "<project API key>",                  // from the CodeXray project settings
  enableSPA: true,                               // also report in-app route changes
  useFmp: true,
});

Vue​

The extra vue option also captures Vue component errors:

// src/main.js — the only file that changes
import { createApp } from "vue";
import App from "./App.vue";
import ClientMonitor from "@codifinary/codexray-brum-agent";

const app = createApp(App);

ClientMonitor.register({
  service: "Storefront UI",
  serviceVersion: "2.0.0",
  collector: "https://<codexray-host>/ingest",
  pagePath: "index.html",
  XAPIKey: "<project API key>",
  enableSPA: true,
  vue: app,
});

app.mount("#app");

Configuration options​

OptionWhat it sets
serviceThe application name shown in the Applications list. Change it and the app shows up as a new, separate application.
serviceVersionYour app's version — reported on the error detail screen.
collectorYour CodeXray ingest endpoint (from your onboarding / project settings).
pagePathThe page path label, typically index.html.
XAPIKeyYour project API key, from the CodeXray project settings.
enableSPAtrue also reports in-app route changes (single-page-app navigation).
useFmptrue captures first-meaningful-paint timing (React).
vuePass your Vue app instance to also capture Vue component errors (Vue only).
Where to get collector and XAPIKey

The collector is your CodeXray ingest endpoint and the API key comes from your CodeXray project settings. Ask your team if you're unsure which values to use.

Step 3 — Rebuild and deploy​

Rebuild and deploy your app as usual. Nothing else in the application changes.

Step 4 — Check it in CodeXray​

Open EUM → BRUM. Your application appears in the Applications list under the exact service name from the snippet, usually within about a minute of real traffic.

The application name is whatever service says

The name in the Applications list is exactly the service value you configured. If a developer changes it, the app appears as a new, separate application — and serviceVersion is what the error detail screen reports as the version.

Next steps​