### Install Telemetry Packages

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/setup-project.md

Installs the necessary Workleap telemetry packages and OpenTelemetry API using pnpm. This command should be run at the root of your application.

```bash
pnpm add @workleap/telemetry @workleap/common-room @opentelemetry/api logrocket
```

--------------------------------

### Install @workleap/logging package

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/setup-loggers.md

Installs the necessary logging package using pnpm. This is a prerequisite for configuring loggers in your application.

```bash
pnpm add @workleap/logging
```

--------------------------------

### Configure loggers for telemetry and common room

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/setup-loggers.md

Configures telemetry and common room instrumentation with various loggers. It demonstrates conditional logger setup based on the environment and includes configurations for LogRocket, Honeycomb, and Mixpanel. This snippet is intended for development environments.

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

// Do not do this, it's only for demo purpose.
const isDev = process.env === "development";

// Only add LogRocket logger if your product is set up with LogRocket.
const loggers: RootLogger[] = [isDev ? new BrowserConsoleLogger() : 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"
    },
    verbose: isDev,
    loggers
});

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

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

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

--------------------------------

### Customize User Interaction Instrumentation (Honeycomb)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Configure the user interaction instrumentation for Honeycomb telemetry. This example shows how to specify custom event names for user interactions. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            userInteractionInstrumentation: (defaultOptions) => {
                return {
                    ...defaultOptions,
                    eventNames: ["submit", "click", "keypress"]
                }
            }
        }
    }
});
```

--------------------------------

### Initialize and Provide TelemetryClient in React App

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryProvider.md

Demonstrates how to initialize a TelemetryClient with various configurations (LogRocket, Honeycomb, Mixpanel) and then provide it to the application using the TelemetryProvider component. This setup is typically done at the root of a React application.

```tsx
import { initializeTelemetry, TelemetryProvider } from "@workleap/telemetry/react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

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

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

root.render(
    <TelemetryProvider client={client}>
        <App />
    </TelemetryProvider>
);

```

--------------------------------

### Use TelemetryClient with Mixpanel

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryClient.md

This example illustrates fetching a TelemetryClient and setting global event properties for Mixpanel. This ensures that specified properties are included with all events sent to Mixpanel.

```typescript
import { useTelemetryClient } from "@workleap/telemetry/react";

const client = useTelemetryClient();

client.mixpanel.setGlobalEventProperties({
    "User Id": "123"
});
```

--------------------------------

### Initialize Telemetry Libraries in React App

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/setup-project.md

Initializes various telemetry libraries including LogRocket, Honeycomb, and Mixpanel, and registers common room instrumentation within a React application's bootstrapping code. It uses TelemetryProvider and CommonRoomInstrumentationProvider to make the telemetry clients available throughout the component tree. Ensure you replace placeholder values like 'my-app-id', 'sample', 'my-app', 'wlp', and 'my-site-id' with your actual configuration.

```tsx
import { initializeTelemetry, TelemetryProvider } from "@workleap/telemetry/react";
import { registerCommonRoomInstrumentation, CommonRoomInstrumentationProvider } from "@workleap/common-room/react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

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"
    }
});

const commonRoomClient = registerCommonRoomInstrumentation("my-site-id");

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

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

```

--------------------------------

### Customize Fetch Instrumentation Options (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry with custom options for the fetch instrumentation. This example specifically sets `ignoreNetworkEvents` to `false`, enabling the capture of network events for fetch requests. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            fetchInstrumentation: (defaultOptions) => {
                return {
                    ...defaultOptions,
                    ignoreNetworkEvents: false
                }
            }
        }
    }
});
```

--------------------------------

### Customize Document Load Instrumentation Options (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry with custom options for the document load instrumentation. This example sets `ignoreNetworkEvents` to `false`, ensuring that network events related to document loading are captured. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            documentLoadInstrumentation: (defaultOptions) => {
                return {
                    ...defaultOptions,
                    ignoreNetworkEvents: false
                }
            }
        }
    }
});
```

--------------------------------

### Customize XMLHttpRequest Instrumentation Options (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry with custom options for XMLHttpRequest instrumentation. This example sets `ignoreNetworkEvents` to `false`, enabling the capture of network events for XMLHttpRequest. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            xmlHttpRequestInstrumentation: (defaultOptions) => {
                return {
                    ...defaultOptions,
                    ignoreNetworkEvents: false
                }
            }
        }
    }
});
```

--------------------------------

### Initialize Telemetry with Loggers (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes the Workleap telemetry client, configuring integrations for LogRocket, Honeycomb, and Mixpanel. It also includes browser console logging and LogRocket logging with a specified log level. This setup is crucial for capturing and sending application events and logs.

```typescript
import { initializeTelemetry, LogRocketLogger } from "@workleap/telemetry/react";
import { BrowserConsoleLogger, LogLevel } from "@workleap/logging";

const client = initializeTelemetry({
    logRocket: {
        appId: "my-app-id"
    },
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy"
        }
    },
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "development"
    },
    loggers: [new BrowserConsoleLogger(), new LogRocketLogger({ logLevel: LogLevel.information })]
});
```

--------------------------------

### Use TelemetryClient with Honeycomb

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryClient.md

This code snippet shows how to get a TelemetryClient and set global span attributes for Honeycomb. This is useful for adding consistent metadata to all spans traced by Honeycomb.

```typescript
import { useTelemetryClient } from "@workleap/telemetry/react";

const client = useTelemetryClient();

client.honeycomb.setGlobalSpanAttributes({
    "app.user_id": "123"
});
```

--------------------------------

### Initialize Telemetry with LogRocketLogger (TypeScript/React)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/features.md

Initializes Workleap telemetry, including the LogRocketLogger to capture console logs. This setup sends logs with LogLevel.information to LogRocket. It requires the '@workleap/telemetry/react' and '@workleap/common-room/react' packages.

```tsx
import { initializeTelemetry, LogRocketLogger, TelemetryProvider } from "@workleap/telemetry/react";
import { registerCommonRoomInstrumentation, CommonRoomInstrumentationProvider } from "@workleap/common-room/react";
import { LogLevel, type RootLogger } from "@workleap/logging";
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>
);
```

--------------------------------

### Apply Custom Transformer Functions (Honeycomb)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Use custom transformer functions to provide advanced configuration for the Honeycomb SDK. This example demonstrates disabling options validation using a transformer. It requires the '@workleap/telemetry/react' package and defines a `HoneycombSdkOptionsTransformer` type.

```typescript
import { initializeTelemetry, type HoneycombSdkOptionsTransformer } from "@workleap/telemetry/react";

const skipOptionsValidationTransformer: HoneycombSdkOptionsTransformer = config => {
    config.skipOptionsValidation = true;

    return config;
};

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            transformers: [skipOptionsValidationTransformer]
        }
    }
});
```

--------------------------------

### Troubleshoot production issues with logger configuration

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/setup-loggers.md

Configures telemetry and common room instrumentation for troubleshooting production issues. It sets `verbose` to `true` and adjusts the LogRocketLogger configuration for more detailed logging. This snippet is intended for production troubleshooting.

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

// Do not do this, it's only for demo purpose.
const isDev = process.env === "development";

// Only add LogRocket logger if your product is set up with LogRocket.
const loggers: RootLogger[] = [isDev ? new BrowserConsoleLogger() : new LogRocketLogger({ logLevel })];

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>
);
```

--------------------------------

### Register Fetch Request Hook at Start with HoneycombInstrumentationClient

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/HoneycombInstrumentationClient.md

Dynamically registers a hook to be executed at the beginning of the fetch request pipeline. This hook allows for early modification of request spans based on request properties. It requires the `useHoneycombInstrumentationClient` hook.

```typescript
import { useHoneycombInstrumentationClient } from "@workleap/telemetry/react";

const client = useHoneycombInstrumentationClient();

client.registerFetchRequestHookAtStart((requestSpan, request) => {
    let headers: Headers;

    if (request instanceof Request) {
        const moduleId = request.headers.get("x-module-id");

        if (moduleId) {
            requestSpan.setAttribute("app.module_id", moduleId);
        }
    }
});
```

--------------------------------

### Use and End Logging Scopes with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/LogRocketLogger.md

Demonstrates how to use logging scopes to group related log entries. A scope is started with `startScope`, and log messages can be added to it. The scope is then ended with `end()`, which outputs all collected log entries.

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
const scope = logger.startScope("Module 1 registration");

scope.debug("Registering routes...");

scope
    .withText("Routes registered!")
    .withObject([{ path: "/foo", label: "Foo" }])
    .debug();

scope.debug("Fetching data...");

scope
    .withText("Data fetching failed")
    .withError(new Error("The specified API route doesn't exist."))
    .error();

scope.debug("Registration failed!");

// Once the scope is ended, the log entries will be outputted to the console.
scope.end();
```

--------------------------------

### Specify Target Product for Tracking

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/useMixpanelTrackingFunction.md

This example shows how to use the `targetProductId` option with `useMixpanelTrackingFunction` to track an event for a different product. This is useful when an action in one product might be relevant to another. The `targetProductId` is passed as an option to the hook.

```typescript
import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction({
    targetProductId: "wov"
});

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });
```

--------------------------------

### Create a Debug Transformer Function (Honeycomb)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Define a generic transformer function that can utilize the execution context, such as a verbose flag and logger, to modify telemetry configurations. This example activates debug mode if verbose logging is enabled. It requires the '@workleap/telemetry/react' package and defines a `HoneycombSdkOptionsTransformer` type.

```typescript
import type { HoneycombSdkOptionsTransformer } from "@workleap/telemetry/react";

const debugTransformer: HoneycombSdkOptionsTransformer = (config, context) => {
    if (context.verbose) {
        config.debug = true;
        context.logger.debug("Debug mode has been activated.");
    }

    return config;
}
```

--------------------------------

### Identify a user with LogRocket and Workleap traits

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/features.md

This TypeScript code snippet shows how to use the `useLogRocketInstrumentationClient` hook to get a client instance. It then utilizes the `createWorkleapPlatformDefaultUserTraits` method to generate user traits compatible with LogRocket's `identify` method, enabling detailed user tracking.

```typescript
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);
```

--------------------------------

### Apply Storybook Decorator to Specific Stories (TypeScript/React)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/use-with-storybook.md

This example illustrates how to apply the `withTelemetryProvider` decorator to a specific set of stories within a Storybook file (`MyPage.stories.tsx`). It's configured within the `meta` object, making the fake telemetry client available to all stories defined in that file.

```tsx
import { withTelemetryProvider } from "./withTelemetryProvider.tsx";
import { MyPage } from "./MyPage.tsx";
import type { Meta, StoryObj } from "storybook-react-rsbuild";

const meta = {
    title: "MyPage",
    component: MyPage,
    decorators: [withTelemetryProvider]
} satisfies Meta<typeof MyPage>;

export default meta;

type Story = StoryObj<typeof meta>;
 
export const Default: Story = {};
```

--------------------------------

### Instantiate NoopCommonRoomInstrumentationClient (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/common-room/NoopCommonRoomInstrumentationClient.md

Demonstrates how to import and instantiate the NoopCommonRoomInstrumentationClient. This client is a placeholder and performs no actual operations, making it ideal for environments where instrumentation is not required or desired, such as unit tests or Storybook stories.

```typescript
import { NoopCommonRoomInstrumentationClient } from "@workleap/common-room/react";

const client = new NoopCommonRoomInstrumentationClient();
```

--------------------------------

### Initialize Telemetry Platforms (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes multiple telemetry platforms including LogRocket, Honeycomb, and Mixpanel with their respective configurations. This is the primary entry point for setting up telemetry.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

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

--------------------------------

### Instantiate CommonRoomInstrumentationClient (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/common-room/CommonRoomInstrumentationClient.md

Demonstrates how to create an instance of the CommonRoomInstrumentationClient. An optional logger can be provided for debugging purposes.

```typescript
const client = new CommonRoomInstrumentationClient(logger?);
```

--------------------------------

### Configure Honeycomb Proxy (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Configures the Honeycomb telemetry platform to use a proxy for sending trace data. When a proxy is specified, session credentials are automatically included with OTel trace requests.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy"
        }
    }
});
```

--------------------------------

### Retrieve TelemetryClient Instance (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/useTelemetryClient.md

This snippet demonstrates how to import and use the `useTelemetryClient` hook to get an instance of the `TelemetryClient`. The client can then be used for various telemetry operations, such as registering listeners for session URLs.

```typescript
import { useTelemetryClient } from "@workleap/telemetry/react";

const client = useTelemetryClient();

client.logRocket.registerGetSessionUrlListener(sessionUrl => {
    console.log(sessionUrl);
});
```

--------------------------------

### Enable Verbose Mode with Multiple Integrations

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initialize the telemetry client with verbose mode enabled, alongside configurations for LogRocket, Honeycomb, and Mixpanel. Verbose mode provides additional logging for debugging purposes. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

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

--------------------------------

### Initialize Mixpanel with Predefined Environment

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initialize the telemetry client with Mixpanel integration using a predefined environment string. This simplifies configuration for common environments like 'development'. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "development"
    }
});
```

--------------------------------

### Retrieve TelemetryClient Instance using Hook

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryProvider.md

Shows how to access the TelemetryClient instance provided by TelemetryProvider using the `useTelemetryClient` hook. This allows components to interact with the telemetry client, for example, by registering listeners for session URLs.

```ts
import { useTelemetryClient } from "@workleap/telemetry/react";

const client = useTelemetryClient();

client.logRocket.registerGetSessionUrlListener(sessionUrl => {
    console.log(sessionUrl);
});

```

--------------------------------

### Configure Honeycomb API Key (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Configures the Honeycomb telemetry platform using an API key for authentication. It is recommended to use an OpenTelemetry collector with an authenticated proxy instead of direct API key usage for security reasons.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            apiKey: "123"
        }
    }
});
```

--------------------------------

### Use LogRocket Transformer Functions (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Demonstrates using transformer functions to customize LogRocket SDK options beyond predefined settings. This provides granular control over the SDK's configuration, such as disabling console logging.

```typescript
import { initializeTelemetry, type LogRocketSdkOptionsTransformer } from "@workleap/telemetry/react";

const disableConsoleLogging: LogRocketSdkOptionsTransformer = config => {
    config.console = ...(config.console || {});
    config.console.isEnabled = false;

    return config;
};

const client = initializeTelemetry({
    logRocket: {
        appId: "my-app-id",
        options: {
            transformers: [disableConsoleLogging]
        }
    }
});
```

```typescript
import type { LogRocketSdkOptionsTransformer } from "@workleap/telemetry/react";

const disableConsoleLogging: LogRocketSdkOptionsTransformer = (config, context) => {
    if (!context.verbose) {
        config.console = ...(config.console || {});
        config.shouldDebugLog = false;

        context.logger.debug("Disabling LogRocket SDK debug logs.");
    }

    return config;
}
```

--------------------------------

### Initialize TelemetryClient Reference

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryClient.md

This snippet shows the constructor for TelemetryClient, which accepts optional LogRocket, Honeycomb, and Mixpanel client instances. It's important to note that users should not create their own instance but rather use the `initializeTelemetry` function.

```typescript
const client = new TelemetryClient(logRocketClient?, honeycombClient?, mixpanelClient?);
```

--------------------------------

### Initialize Mixpanel with Base URL

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initialize the telemetry client with Mixpanel integration by providing a custom base URL for the tracking API. This allows for flexibility in targeting different tracking endpoints. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "https://my-tracking-api"
    }
});
```

--------------------------------

### Set Up Storybook Decorator Globally (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/use-with-storybook.md

This code snippet shows how to globally configure the `withTelemetryProvider` decorator in Storybook's `preview.ts` file. This makes the fake telemetry client available to all stories by default.

```ts
import { withTelemetryProvider } from "./withTelemetryProvider.tsx";

export const decorators = [withTelemetryProvider];
```

--------------------------------

### Build Complex Log Entries with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/LogRocketLogger.md

Illustrates how to construct detailed log entries by chaining multiple methods like `withText`, `withObject`, and `withError` before calling a logging method (e.g., `debug`). This allows for combining different types of information into a single log message.

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();

logger
    .withText("Processing segment")
    .withObject({ id: 1 })
    .withText("failed with error")
    .withError(new Error("The error"))
    .debug();
```

--------------------------------

### Get LogRocket session URL using getSessionURL

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/features.md

This TypeScript code snippet demonstrates how to use the `LogRocket.getSessionURL` function to retrieve the unique URL for a session replay. It registers a callback function that will be executed once the session replay URL is available, logging the URL to the console.

```typescript
import LogRocket from "logrocket";

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

--------------------------------

### Instantiate NoopTelemetryClient in React

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/NoopTelemetryClient.md

Demonstrates how to import and instantiate the NoopTelemetryClient from the @workleap/telemetry/react package. This client is a mock implementation suitable for unit tests and Storybook.

```typescript
import { NoopTelemetryClient } from "@workleap/telemetry/react";

const client = new NoopTelemetryClient();
```

--------------------------------

### Enable Default User Interaction Instrumentation (Honeycomb)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Enable the default user interaction instrumentation for Honeycomb telemetry by setting the `userInteractionInstrumentation` option to `true`. This utilizes the default configuration of the OpenTelemetry user interaction plugin. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            userInteractionInstrumentation: true
        }
    }
});
```

--------------------------------

### Track Events with MixpanelClient

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/MixpanelClient.md

Demonstrates how to initialize the Mixpanel client and use the createTrackingFunction to send events with properties. This is the primary method for logging user interactions.

```typescript
import { useMixpanelClient } from "@workleap/telemetry/react";

const client = useMixpanelClient();

const track = client.createTrackingFunction();

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });
```

--------------------------------

### Enable XMLHttpRequest Instrumentation with Default Options (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry and enables XMLHttpRequest instrumentation with its default settings. Setting `xmlHttpRequestInstrumentation` to `true` activates the monitoring of XMLHttpRequest calls. This requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            xmlHttpRequestInstrumentation: true
        }
    }
});
```

--------------------------------

### Instantiate TelemetryContext

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/TelemetryContext.md

Demonstrates how to instantiate the TelemetryContext object. It takes optional telemetryId and deviceId as parameters. Note: It is recommended to use a `createTelemetryContext` function instead of direct instantiation.

```typescript
const context = new TelemetryContext(telemetryId?, device?)
```

--------------------------------

### Initialize Telemetry Client

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes the telemetry client with optional configurations for various services like LogRocket, Honeycomb, and Mixpanel. The function can also enable verbose logging and accept custom loggers. It returns a client object used for telemetry operations.

```typescript
const client = initializeTelemetry(options?: { logRocket?, honeycomb?, mixpanel?, verbose?, loggers? });
```

--------------------------------

### Configure LogRocket Root Hostname (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Configures the LogRocket telemetry platform by setting a specific root hostname. This is useful for segmenting or identifying telemetry data originating from a particular host.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    logRocket: {
        appId: "my-app-id",
        options: {
            rootHostname: "an-host.com"
        }
    }
});
```

--------------------------------

### Initialize Telemetry with Long Task Instrumentation (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry and includes the LongTaskInstrumentation from OpenTelemetry. This allows for monitoring and analyzing long-running tasks within the application. It requires the '@workleap/telemetry/react' and '@opentelemetry/instrumentation-long-task' packages.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";
import { LongTaskInstrumentation } from "@opentelemetry/instrumentation-long-task";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            instrumentations: [
                new LongTaskInstrumentation()
            ]
        }
    }
});
```

--------------------------------

### Initialize Common Room with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/best-practices.md

Registers the Common Room instrumentation with a LogRocketLogger instance. This allows for logging relevant information from Common Room interactions into LogRocket session replays. The `my-site-id` should be replaced with your actual site identifier.

```typescript
import { registerCommonRoomInstrumentation } from "@workleap/common-room/react";
import { LogLevel } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const client = registerCommonRoomInstrumentation("my-site-id", {
    loggers: [new LogRocketLogger({ logLevel: LogLevel.information })]
});
```

--------------------------------

### Use Custom Tracking Endpoint with Mixpanel

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Configure Mixpanel integration to use a custom tracking endpoint. This allows overriding the default endpoint for sending tracking data. It requires the '@workleap/telemetry/react' package.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    mixpanel: {
        productId: "wlp",
        envOrTrackingApiBaseUrl: "development",
        options: {
            trackingEndpoint: "custom/tracking/track"
        }
    }
});
```

--------------------------------

### Configure LogRocket Private Query Parameters (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Customizes LogRocket telemetry by specifying custom private query parameter names to exclude from logs. This helps in maintaining privacy by filtering out sensitive query string values.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    logRocket: {
        appId: "my-app-id",
        options: {
            privateQueryParameterNames: ["a-custom-param"]
        }
    }
});
```

--------------------------------

### Retrieve HoneycombInstrumentationClient Instance (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/useHoneycombInstrumentationClient.md

This snippet demonstrates how to retrieve an instance of `HoneycombInstrumentationClient` using the `useHoneycombInstrumentationClient` hook. It shows the basic import and usage, including setting global span attributes.

```typescript
import { useHoneycombInstrumentationClient } from "@workleap/telemetry/react";

const client = useHoneycombInstrumentationClient();

client.setGlobalSpanAttributes({
    "app.user_id": "123"
});
```

--------------------------------

### Initialize Telemetry with Custom Span Processor (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Initializes Workleap Telemetry and integrates a custom span processor. This allows for custom logic to be applied to spans before they are exported. It requires the '@workleap/telemetry/react' package and the definition of the 'CustomSpanProcessor'.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";
import { CustomSpanProcessor } from "./CustomSpanProcessor.ts";

const client = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "my-app-name",
        apiServiceUrls: [/.+/g],
        options: {
            proxy: "https://sample-proxy",
            spanProcessors: [
                new CustomSpanProcessor()
            ]
        }
    }
});
```

--------------------------------

### Provide CommonRoomInstrumentationProvider Client (React)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/common-room/CommonRoomInstrumentationProvider.md

This snippet demonstrates how to provide a CommonRoomInstrumentationClient instance to the application using the CommonRoomInstrumentationProvider. It imports necessary components, registers the instrumentation client, and renders the application within the provider.

```tsx
import { registerCommonRoomInstrumentation, CommonRoomInstrumentationProvider } from "@workleap/common-room/react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

const client = registerCommonRoomInstrumentation("my-site-id")

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

root.render(
    <CommonRoomInstrumentationProvider client={client}>
        <App />
    </CommonRoomInstrumentationProvider>
);
```

--------------------------------

### Responsive Layout for Correlation IDs (CSS)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/_includes/head.html

This CSS rule applies a flex display to elements with the class 'getting-started-correlation-ids', enabling flexible arrangement of child elements. It also adds a right margin to the first figure within this flex container, ensuring spacing between elements when they are laid out horizontally.

```css
.getting-started-correlation-ids {
  display: flex !important;
}
.getting-started-correlation-ids figure:first-of-type {
  margin-right: 1.5rem !important;
}
```

--------------------------------

### Initialize Telemetry with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/best-practices.md

Initializes the Workleap Telemetry SDK with a LogRocketLogger instance for capturing logs in session replays. This configuration includes settings for LogRocket, Honeycomb, Mixpanel, and the logger itself. Ensure LogRocket is properly configured for your application.

```typescript
import { initializeTelemetry, LogRocketLogger } from "@workleap/telemetry/react";
import { LogLevel } from "@workleap/logging";

const client = 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: [new LogRocketLogger({ logLevel: LogLevel.information })]
});
```

--------------------------------

### Initialize Platform Widgets with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/best-practices.md

Initializes the Workleap Platform widgets with verbose mode enabled and a LogRocketLogger instance. This is useful for capturing detailed logs from widget interactions in LogRocket session replays. Replace placeholders with your application's specific identifiers.

```typescript
import { initializeWidgets } from "@workleap-widgets/client/react";
import { LogLevel } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/telemetry/react";

const widgetsRuntime = initializeWidgets("wlp", "development" , {
    loggers: [new LogRocketLogger({ logLevel: LogLevel.information })]
});
```

--------------------------------

### Log Messages with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/LogRocketLogger.md

Demonstrates how to log messages at various severity levels using the LogRocketLogger. Each method corresponds to a different log level: debug, information, warning, error, and critical.

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
logger.debug("Hello world!");
```

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
logger.information("Hello world!");
```

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
logger.warning("Hello world!");
```

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
logger.error("Hello world!");
```

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
logger.critical("Hello world!");
```

--------------------------------

### Create Storybook Telemetry Provider Decorator (TypeScript/React)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/guides/use-with-storybook.md

This snippet demonstrates how to create a Storybook decorator using `NoopTelemetryClient` and `TelemetryProvider` from `@workleap/telemetry/react`. It ensures that components depending on telemetry clients receive a mock instance, preventing actual data transmission.

```tsx
import { NoopTelemetryClient, TelemetryProvider } from "@workleap/telemetry/react";
import { Decorator } from "storybook-react-rsbuild";

const telemetryClient = new NoopTelemetryClient();

export const withTelemetryProvider: Decorator = Story => {
    return (
        <TelemetryProvider client={client}>
            <Story />
        </TelemetryProvider>
    );
};
```

--------------------------------

### Initialize LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/LogRocketLogger.md

Initializes a new instance of LogRocketLogger. An optional options object can be provided to configure the logger, such as setting the minimum logLevel for messages to be processed.

```typescript
import { LogRocketLogger } from "@workleap/telemetry/react"; // or from "@workleap/logrocket/react";

const logger = new LogRocketLogger();
```

--------------------------------

### MixpanelClient - Global Properties

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/MixpanelClient.md

This section covers methods for setting global properties that will be automatically included with all tracked events.

```APIDOC
## POST /global-properties

### Description
Sets or updates global properties that are appended to all subsequent events tracked by the MixpanelClient.

### Method
POST

### Endpoint
/global-properties

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **values** (object) - Required - An object containing key-value pairs of global properties to set.

### Request Example
```json
{
  "values": {
    "User Id": "123",
    "Plan Type": "Premium"
  }
}
```

### Response
#### Success Response (200)
- **void** - The request was successful and no data is returned.

#### Response Example
(No response body for success)
```

--------------------------------

### Initialize Common Room Instrumentation (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/common-room/registerCommonRoomInstrumentation.md

Initializes Common Room instrumentation with a given site ID. This function returns a CommonRoomInstrumentationClient instance.

```typescript
import { registerCommonRoomInstrumentation } from "@workleap/common-room";

const client = registerCommonRoomInstrumentation("my-site-id");
```

```typescript
import { registerCommonRoomInstrumentation } from "@workleap/common-room";

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

```typescript
import { registerCommonRoomInstrumentation } from "@workleap/common-room";
import { LogRocketLogger } from "@workleap/logrocket";
import { BrowserConsoleLogger, LogLevel } from "@workleap/logging";

const client = registerCommonRoomInstrumentation("my-site-id", {
    loggers: [new BrowserConsoleLogger(), new LogRocketLogger({ logLevel: LogLevel.information })]
});
```

--------------------------------

### Initialize Squide Firefly with LogRocketLogger

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-logrocket/best-practices.md

Initializes the Squide firefly service with a LogRocketLogger instance. This enables the capture of firefly-related logs within LogRocket session replays for debugging and analysis. Ensure the LogRocketLogger is configured with the desired log level.

```typescript
import { initializeFirefly } from "@squide/firefly";
import { LogLevel } from "@workleap/logging";
import { LogRocketLogger } from "@workleap/telemetry/react";

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

--------------------------------

### Create Default User Traits for Workleap Platform (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/LogRocketInstrumentationClient.md

Generates default user traits for identifying users within the Workleap platform. This method requires an identification object containing user and organization details. It's used in conjunction with LogRocket.identify to associate user data with session replays.

```typescript
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);
```

--------------------------------

### Register Session URL Listener with LogRocket

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/LogRocketInstrumentationClient.md

This snippet shows how to register a listener for session URLs using the `useLogRocketInstrumentationClient`. When a session URL is available, the provided callback function will be executed, logging the URL to the console.

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

const client = useLogRocketInstrumentationClient();

client.registerGetSessionUrlListener(sessionUrl => {
    console.log(sessionUrl);
});
```

--------------------------------

### Track Events for a Specific Product with MixpanelClient

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/MixpanelClient.md

Shows how to specify a `targetProductId` when creating a tracking function. This allows events to be associated with a different product than the one currently being used.

```typescript
import { useMixpanelClient } from "@workleap/telemetry/react";

const client = useMixpanelClient();

const track = client.createTrackingFunction({
    targetProductId: "wov"
});

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });
```

--------------------------------

### Send Additional User Traits with LogRocket

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/LogRocketInstrumentationClient.md

This snippet demonstrates how to merge default Workleap user traits with custom traits before sending them to LogRocket for improved filtering. It utilizes the `useLogRocketInstrumentationClient` hook and assumes LogRocket is initialized.

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

const client = useLogRocketInstrumentationClient();

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

Logrocket.identify(allTraits.userId, allTraits);
```

--------------------------------

### Configure LogRocket Private Fields (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/reference/telemetry/initializeTelemetry.md

Customizes LogRocket telemetry by specifying custom private field names to exclude from logs. This enhances data privacy by preventing sensitive information from being captured.

```typescript
import { initializeTelemetry } from "@workleap/telemetry/react";

const client = initializeTelemetry({
    logRocket: {
        appId: "my-app-id",
        options: {
            privateFieldNames: ["a-custom-field"]
        }
    }
});
```

--------------------------------

### Track an event using useMixpanelTrackingFunction (TypeScript)

Source: https://github.com/workleap/wl-telemetry/blob/main/docs/introduction/learn-mixpanel/features.md

Demonstrates how to obtain a tracking function using the `useMixpanelTrackingFunction` hook and subsequently use it to send a telemetry event with properties. This is the basic method for logging user interactions.

```typescript
import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction();

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });
```