# LogRocket features

If telemetry hasn't been set up for your project yet, please refer to the setup guide before continuing.

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

The @workleap/telemetry 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.

# Session replays

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 👇

# Playback

# Console logs

# Network requests

# DOM interactions

# Monitor issues

Galileo, LogRocket's proprietary AI, watches every session and tracks product changes to proactively surface issues that are impacting users.

# Triage

Galileo highlights recurring issues so you can triage them quickly:

# Digest

A daily or weekly digest of newly detected and untriaged issues can be delivered to Slack:

# Record elements

By default, this package 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>

To learn more about the built-in privacy settings of this instrumentation, refer to the Privacy page.

# Correlation ids

Two correlation ids are automatically added to each session and can be used to filter sessions by user traits:

Telemetry Id: Identifies a single application load. It's primarily used to correlate Honeycomb traces with the other telemetry platforms.
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.

# Identify a user

Most applications need to identify the current user environment. To help with that, LogRocketInstrumentationClient expose the createWorkleapPlatformDefaultUserTraits method. When used with LogRocket.identify, it provides all the tools to identify a user with the key information that we track at Workleap:

import { useLogRocketInstrumentationClient } from "@workleap/telemetry/react";
import LogRocket from "logrocket";

const client = useLogRocketInstrumentationClient();

const traits = client.createWorkleapPlatformDefaultUserTraits({
    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);

# Get the session URL

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:

index.tsx
import LogRocket from "logrocket";

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

# Capture logs

By default, Workleap's LogRocket configuration does not capture console logs. To send loggers output to LogRocket, use the LogRocketLogger class.

index.tsx
import { initializeTelemetry, TelemetryProvider } from "@workleap/telemetry/react";
import { registerCommonRoomInstrumentation, CommonRoomInstrumentationProvider } from "@workleap/common-room/react";
import { LogLevel, type RootLogger } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/logger";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

const loggers: RootLogger[] = [new LogRocketLogger({ logLevel: LogLevel.information })];

const telemetryClient = initializeTelemetry({
    logRocket: {
        appId: "my-app-id"
    },
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy"
        }
    },
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "development"
    },
    loggers
});

const commonRoomClient = registerCommonRoomInstrumentation("my-site-id", {
    loggers
});

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

root.render(
    <StrictMode>
        <TelemetryProvider client={telemetryClient}>
            <CommonRoomInstrumentationProvider client={commonRoomClient}>
                <App />
            </CommonRoomInstrumentationProvider>
        </TelemetryProvider>
    </StrictMode>
);

Console logs are not captured by default to reduce the risk of exposing Personally Identifiable Information (PII) in LogRocket session replays.

To troubleshoot an production issue, remove the LogLevel from the LogRocketLogger constructor options and set the verbose option to true:

index.tsx
import { initializeTelemetry, TelemetryProvider } from "@workleap/telemetry/react";
import { registerCommonRoomInstrumentation, CommonRoomInstrumentationProvider } from "@workleap/common-room/react";
import { type RootLogger } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/logger";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

const loggers: RootLogger[] = [new LogRocketLogger()];

const telemetryClient = initializeTelemetry({
    logRocket: {
        appId: "my-app-id"
    },
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy"
        }
    },
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "development"
    },
    verbose: true,
    loggers
});

const commonRoomClient = registerCommonRoomInstrumentation("my-site-id", {
    verbose: true,
    loggers
});

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

root.render(
    <StrictMode>
        <TelemetryProvider client={telemetryClient}>
            <CommonRoomInstrumentationProvider client={commonRoomClient}>
                <App />
            </CommonRoomInstrumentationProvider>
        </TelemetryProvider>
    </StrictMode>
);