# Migrate to the umbrella package

To migrate to the new @workleap/telemetry umbrella package, follow these steps 👇

# Remove the standalone library packages

Since the @workleap/telemetry package declares dependencies on the standalone telemetry libraries, host applications no longer need to declare direct dependencies on those packages.

To get started, open a terminal at the root of your application and install the telemetry umbrella package. (If your application uses other packages for additional functionality, such as LogRocketLogger, you may still want to keep those installed separately.)

pnpm remove @workleap/logrocket @workleap/honeycomb @workleap/mixpanel

Then, install the @workleap/telemetry package:

pnpm add @workleap/telemetry logrocket

# Update the initialization code

Change the initialize code to use the initializeTelemetry function instead of standalone registration/initialization functions:

Before:

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

registerLogRocketInstrumentation("my-app-id");

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

initializeMixpanel("wlp", "development");

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

root.render(
    <App />
);

Now:

index.tsx
import { createRoot } from "react-dom/client";
import { initializeTelemetry, TelemetryProvider } 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"
    }
});

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

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

# Replace createUserTraits with the client

The createUserTraits standalone function is not exported anymore. Use the client createWorkleapPlatformDefaultUserTraits method instead.

Before:

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

Now:

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

# Replace setGlobalSpanAttribute and setGlobalSpanAttributes with the client

The setGlobalSpanAttribute and setGlobalSpanAttributes standalone functions are not exported anymore. Use the client setGlobalSpanAttribute and setGlobalSpanAttributes methods instead.

Before:

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

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

Now:

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

const client = useHoneycombInstrumentationClient();

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

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

# Replace setSuperProperty and setSuperProperties with the client

The setSuperProperty and setSuperProperties standalone functions are not exported anymore. Use the client setGlobalEventProperty and setGlobalEventProperties methods instead.

Before:

import { setSuperProperties } from "@workleap/mixpanel";

setSuperProperties({
    "User Id": "123" 
});

Now:

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

const client = useMixpanelClient();

client.setGlobalEventProperty("User Id", "123");

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

# Replace createTrackingFunction with the client

The createTrackingFunction standalone function is not exported anymore. Use the client createTrackingFunction method instead.

Before:

import { createTrackingFunction } from "@workleap/mixpanel";

const track = createTrackingFunction();

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

Now:

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

const client = useMixpanelClient();

const track = client.createTrackingFunction();

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