# Getting started

To monitor application performance, Workleap has adopted Honeycomb, a tool that helps teams manage and analyze telemetry data from distributed systems. Built on OpenTelemetry, Honeycomb provides a robust API for tracking frontend telemetry.

Honeycomb's in-house HoneycombWebSDK includes great default instrumentation. This package provides a slightly altered default instrumentation which is adapted for Workleap's web application observability requirements.

First, open a terminal at the root of the application and install the following packages:

pnpm add @workleap/honeycomb @honeycombio/opentelemetry-web @opentelemetry/api @opentelemetry/auto-instrumentations-web

yarn add @workleap/honeycomb @honeycombio/opentelemetry-web @opentelemetry/api @opentelemetry/auto-instrumentations-web

npm install @workleap/honeycomb @honeycombio/opentelemetry-web @opentelemetry/api @opentelemetry/auto-instrumentations-web

Then, update the application bootstrapping code to register Honeycomb instrumentation using the registerHoneycombInstrumentation function:

import { registerHoneycombInstrumentation } from "@workleap/honeycomb";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

registerHoneycombInstrumentation(runtime, "sample", [/.+/g,], {
    endpoint: "https://sample-collector"
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <StrictMode>
        <App />
    </StrictMode>
);

With instrumentation in place, a few traces are now available 👇

Individual fetch request performance can be monitored from end to end:

The loading performance of the DOM can be monitored:

When an unmanaged error occurs, it's automatically recorded:

The default instrumentation will automatically track the appropriate metrics to display RUM information:

Most application needs to set custom attributes on traces about the current user environment. To help with that, @workleap/honeycomb expose the setGlobalSpanAttribute function.

Update your application bootstrapping code to include the setGlobalSpanAttribute function:

import { registerHoneycombInstrumentation, setGlobalSpanAttributes } from "@workleap/honeycomb";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

registerHoneycombInstrumentation(runtime, "sample", [/.+/g,], {
    endpoint: "https://sample-collector"
});

setGlobalSpanAttribute("app.user_id", "123");

const root = createRoot(document.getElementById("root")!);

root.render(
    <StrictMode>
        <App />
    </StrictMode>
);

Now, every trace recorded after the execution of setGlobalSpanAttributes will include the custom attributes app.user_id:

Have a look at the custom traces page.

Start the application in a development environment using the dev script. Render a page, then navigate to your Honeycomb instance. Go to the "Query" page and type name = HTTP GET into the "Where" input. Run the query, select the "Traces" tab at the bottom of the page and view the detail of a trace. You should view information about the request.

If you are experiencing issues with this guide:

• Set the debug predefined option to true.
• Open the DevTools console. You'll see a log entry for every Honeycomb traces.
  • @honeycombio/opentelemetry-web: Honeycomb link: https://ui.honeycomb.io/...
• Refer to the sample on GitHub.