# Getting started

Welcome to workleap/telemetry, a collection of telemetry libraries for building web applications at Workleap. On this getting started page, you'll find an overview of the project and a list of supported platforms.

Without a unified and cohesive telemetry setup, debugging issues or analyzing product behavior often requires jumping between tools with disconnected data. Session replays in LogRocket, traces in Honeycomb, and user events in Mixpanel each offer valuable insights, but without shared identifiers or cross-platform context, it becomes difficult to correlate events, reconstruct user journeys, or measure the full impact of a technical issue in production.

This integrated experience brings together LogRocket, Honeycomb, and Mixpanel. By linking session data, performance traces, and user interactions through consistent identifiers. It becomes possible to trace a single application event across systems, from backend performance to frontend behavior to product impact. This integration streamlines will hopefully enables faster, and more informed decision-making.

Name	Description	NPM	Documentation
LogRocket	Records frontend sessions and logs to help debug and resolve issues in production and surface critical issues.		Getting started
Honeycomb	Captures and analyzes distributed traces and metrics to understand and monitor complex systems, application behaviors, and performance.		Getting started
Mixpanel	Tracks user interactions to analyze behavior and measure product impact.		Getting started

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

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

Then, update the application bootstrapping code to initialize the libraries:

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

registerLogRocketInstrumentation("my-app-id");

registerHoneycombInstrumentation("sample", "my-app", [/.+/g,], {
    proxy: "https://sample-proxy"
});

initializeMixpanel("wlp", "development");

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

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

import { useTrackingFunction } from "@workleap/mixpanel/react";

// If the host application is not a React application, use
// "createTrackingFunction" instead of the following hook.
const track = useTrackingFunction();

Each library sends the same two correlation id values to its respective platform, using platform-specific naming conventions for the names:

The following is an example of a troubleshooting workflow using the new telemetry correlation id:

• Honeycomb: Locate the app.telemetry_id attribute in a trace to retrieve its value.
• LogRocket: Navigate to the "Session Replay" page. Open the "User Traits" filter, select the Telemetry Id trait, paste the app.telemetry_id value, and press "Enter" to view the matching sessions.
• Mixpanel: Navigate to the "Events" page. Add a "filter", select the Telemetry Id propertt, paste the app.telemetry_id value, and press on the "Add" button to view the matching events.

In additional to the correlation ids, if LogRocket instrumentation is initialized, the Honeycomb and Mixpanel libraries will automatically enrich their data with the LogRocket session URL once it's available:

To benefit from the new unified and cohesive telemetry setup, follow the migration guide.