# Getting started

To monitor application performance, Workleap has adopted Honeycomb, a tool that helps teams capture and analyze distributed traces and metrics to understand and monitor complex systems, application behaviors, and performance. Built on OpenTelemetry, Honeycomb provides a robust API for frontend telemetry.

While Honeycomb's in-house HoneycombWebSDK includes great default instrumentation, this package provides a slightly altered default instrumentation which is adapted for Workleap's applications' requirements.

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

pnpm add @workleap/telemetry @workleap/honeycomb @opentelemetry/api

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("sample", "my-app", [/.+/g,], {
    proxy: "https://sample-proxy",
    verbose: true
});

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:

If LogRocket instrumentation is registered, Honeycomb traces are enriched with the LogRocket session URL as soon as it becomes available:

The registerLogRocketInstrumentation function automatically adds two attributes to every trace:

• app.telemetry_id: Identifies a single application load. It's primarily used to correlate Honeycomb traces with the other telemetry platforms.
• app.device_id: Identifies the user's device across sessions. This value is extracted from the shared wl-identity cookie, which is used across Workleap's marketing sites and web applications.

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

Update your application code to include the setGlobalSpanAttribute function:

import { setGlobalSpanAttributes } from "@workleap/honeycomb";

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

Now, every trace recorded after the execution of setGlobalSpanAttribute will include the custom attribute 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 verbose predefined option to true.
• Open the DevTools console. Look for logs starting with [honeycomb].
• You should also see a log entry for every Honeycomb traces.
  • honeycombio/opentelemetry-web: Honeycomb link: https://ui.honeycomb.io/...
• Refer to the sample on GitHub.

The registerLogRocketInstrumentation function automatically adds two user traits to every session replay to unify LogRocket with the other telemetry platforms:

• app.telemetry_id: Identifies a single application load. It's primarily used to correlate Honeycomb traces with the other telemetry platforms.
• app.device_id: Identifies the user's device across sessions. This value is extracted from the shared wl-identity cookie, which is used across Workleap's marketing sites and web applications.

To correlate a session with other telemetry platforms, filter the query with the app.telemetry_id or app.device_id fields into the "Where" input.

To benefit from the new integrated experience, follow the migration guide for v6.0.