# Setup Honeycomb

Squide integrates with @workleap/telemetry v2 or later (or @workleap/honeycomb v7 or later) to automatically send performance traces for the bootstrapping flow of an application.

# Install the packages

To set up Honeycomb, first, open a terminal at the root of the host application and install the following packages:

pnpm add @workleap/telemetry @opentelemetry/api

# Register the instrumentation

Then, refer to the create an host application guide as a starting point and update the host application bootstrapping code to register Honeycomb instrumentation:

import { FireflyProvider, initializeFirefly } from "@squide/firefly";
import { initializeTelemetry } from "@workleap/telemetry/react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";
import { registerHost } from "./register.tsx";

const telemetryClient = initializeTelemetry({
    honeycomb: {
        namespace: "sample",
        serviceName: "squide-sample",
        apiServiceUrls: [/.+/g,],
        options: {
            proxy: "https://my-proxy.com"
        }
    }
});

const runtime = initializeFirefly({
    localModules: [registerHost],
    honeycombInstrumentationClient: telemetryClient.honeycomb
});

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

root.render(
    <FireflyProvider runtime={runtime}>
        <App />
    </FireflyProvider>
);

For additional information about this Honeycomb instrumentation setup, refer to the @workleap/telemetry library documentation.

Avoid using /.+/g, in production, as it could expose customer data to third parties. Instead, ensure you specify values that accurately matches your application's backend URLs.

We recommend using an OpenTelemetry collector over an ingestion API key, as API keys can expose Workleap to potential attacks. To use a collector, set the proxy option with your collector's proxy address.

# Default instrumentation

With instrumentation in place, a few default traces are now available 👇

# Bootstrapping flow

The performance of an application bootstrapping flow can now be monitored:

# Deferred registration update

When a deferred registration is updated, the performance of the operation can be monitored:

# Fetch requests

Individual fetch request performance can be monitored from end to end:

# Document load

The loading performance of the DOM can be monitored:

# Unmanaged error

When an unmanaged error occurs, it's automatically recorded:

# Real User Monitoring (RUM)

The default instrumentation will automatically track the appropriate metrics to display RUM information:

# Set custom user attributes

Refer to the set Honeycomb custom attributes essential page.

# Custom traces

To send custom traces to Honeycomb, applications should use the OpenTelemetry API directly:

import { useEffect } from "react";
import { trace } from "@opentelemetry/api";

const tracer = trace.getTracer("my-tracer");

export function Page() {
    useEffect(() => {
        // OK, this is a pretty bad example.
        const span = tracer.startSpan("my-span");
        span.end();
    }, []);

    return (
        <div>Hello from a page!</div>
    );
}

# Try it 🚀

Start the application in a development environment using the dev script. Render a page, then navigate to your Honeycomb instance. Go to the Query page and type root.name = squide-bootstrapping into the Where input. Run the query, select the Traces tab at the bottom of the page and view the detail of a trace. You should view the performance of your application bootstrapping flow.

# Troubleshoot issues

If you are experiencing issues with this guide:

Set the initializeTelemetry function verbose option to true.
Open the DevTools console. You'll see a log entry for every for each dispatched event, along with multiple console outputs from Honeycomb's SDK. Squide's bootstrapping instrumentation listens to events to send Honeycomb traces. Most events should match an Honeycomb trace and vice versa.
- [squide] Honeycomb instrumentation is registered
- [squide] Dispatching event "squide-local-modules-registration-completed"
- [squide] Dispatching event "squide-remote-modules-registration-completed"
- [squide] Dispatching event "squide-public-data-fetch-started"
- [squide] Dispatching event "squide-public-data-ready"
- @honeycombio/opentelemetry-web: Honeycomb link: ...
Refer to a working example on GitHub.
Refer to the troubleshooting page.