# Getting started

To gain full visibility into frontend behavior in production, Workleap has adopted LogRocket, a tool that combines session replay, performance tracking, and error logging to help understand and resolve issues in production.

This package provides default LogRocket instrumentation tailored to Workleap's applications' needs, including the removal of sensitive information from HTML documents, HTTP requests/responses and URLs.

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

pnpm add @workleap/telemetry @workleap/logrocket logrocket

Then, register LogRocket instrumentation using the registerLogRocketInstrumentation function:

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

registerLogRocketInstrumentation("my-app-id", {
    verbose: true
});

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

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

With instrumentation in place, session replays are now available in LogRocket:

Session replays offer a wide range of features to help debug production issues, including the following 👇

By default, this instrumentation sanitizes all user-provided text inputs and content. This includes:

• Form fields (like <input>, <textarea>)
• Text content inside HTML elements
• Dynamic DOM mutations containing text

Use data-public to explicitly allow LogRocket to record the content of an element. When this attribute is present, the content inside the element (including child elements) will be captured in the session replay:

<div data-public>
    This text will be visible in the session replay.
</div>

Most applications need to identify the current user environment. To help with that, @workleap/logrocket exposes the createDefaultUserTraits function. When used with LogRocket.identify, it provides all the tools to identify a user with the key information that we track at Workleap.

Update your application bootstrapping code to include the createDefaultUserTraits and LogRocket.identify functions:

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

registerLogRocketInstrumentation("my-app-id", telemetryContext);

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

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

import { createDefaultUserTraits } from "@workleap/logrocket";
import LogRocket from "logrocket";

const traits = createDefaultUserTraits({
    userId: "6a5e6b06-0cac-44ee-8d2b-00b9419e7da9",
    organizationId: "e6bb30f8-0a00-4928-8943-1630895a3f14",
    organizationName: "Acme",
    isMigratedToWorkleap: true,
    isOrganizationCreator: false,
    isAdmin: false
});

LogRocket.identify(traits.userId, traits);

Every session replay is associated with a unique URL. To register a callback receiving the session replay once it's available, use the LogRocket.getSessionURL function:

import LogRocket from "logrocket";

LogRocket.getSessionUrl(url => {
    console.log(url);
});

Start the application in a development environment using the dev script. Render a page, then navigate to your LogRocket instance. Go to "Session Replay" page, you should see a new session appear.

You can try filtering the session list using different user traits, such as:

• User Id
• Organization Id
• Is Admin

If you are experiencing issues with this guide:

• Set the verbose predefined option to true.
• Open the DevTools console and look for logs starting with [logrocket].
• 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:

• Telemetry Id: Identifies a single application load. It's primarily used to correlate with Honeycomb traces.
• 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 session list using these user traits.

To migrate from the @workleap-tracking/logrocket package and benefit from the new integrated experience, follow the migration guide for v1.0.