> ## Documentation Index
> Fetch the complete documentation index at: https://docs.honeycomb.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Get Started with Embrace & Honeycomb

> Forward metrics and network spans from Embrace to Honeycomb.

export const HnyIcon = ({alias, path, size = 16, iconColor}) => {
  const iconMap = {
    "home": "house.svg",
    "marker": "caretFilledDown.svg",
    "show-marker-options": "chatTextLeft.svg",
    "download": "arrowLineDown.svg",
    "trace-waterfall": "trace.svg",
    "show-query-details": "listDashes.svg",
    "table": "table.svg",
    "log-lines": "logLines.svg",
    "chart": "chartLine.svg",
    "show-settings": "gear.svg",
    "add": "plus.svg",
    "remove": "delete.svg",
    "persist": "caretDown.svg",
    "close": "close.svg",
    "copy": "copy.svg",
    "zoom-in": "magnifyingGlassPlus.svg",
    "zoom-out": "magnifyingGlassMinus.svg",
    "color-assignment": "drop.svg",
    "drag": "dots-six-vertical.svg",
    "drawer": "drawer.svg",
    "show-actions": "dotsThree.svg",
    "edit": "pencil.svg",
    "delete": "trash.svg",
    "move": "arrowsOutCardinal.svg",
    "show-legend": "circleInfo.svg",
    "usage-ok": "usageGood.svg",
    "usage-warning": "usageWarning.svg",
    "usage-danger": "usageDanger.svg",
    "open-query-builder": "query.svg",
    "home-menu": "house.svg",
    "query-menu": "query.svg",
    "boards-menu": "board.svg",
    "triggers-menu": "bell.svg",
    "slos-menu": "handshake.svg",
    "service-map-menu": "serviceMap.svg",
    "history-menu": "clockCounterClockwise.svg",
    "manage-data-menu": "cube.svg",
    "usage-menu": "usageGood.svg",
    "canvas-menu": "sparkle.svg",
    "anomalies-menu": "anomalies.svg",
    "show-details": "dotsThreeVertical.svg",
    "resize-handle": "board-panel-resize-handle.png",
    "standard-dataset": "cube.svg",
    "trace-dataset": "cubeChat.svg",
    "all-datasets": "linkedSquares.svg",
    "share": "arrowBentRight.svg",
    "run-in-query-builder": "arrowSquareUpRight.svg",
    "link": "link.svg",
    "text": "text.svg",
    "receive": "arrowLineDown.svg",
    "process": "lightning.svg",
    "sample": "drop.svg",
    "send": "arrowLineUp.svg",
    "submit": "arrowUp.svg",
    "canvas-menu": "sparkle.svg",
    "canvas": "sparkle.svg",
    "chat-about-this-page": "sparkle.svg",
    "private": "lockKey.svg",
    "shared": "people.svg",
    "expand": "caretDown.svg",
    "previous": "caretLeft.svg",
    "next": "caretRight.svg",
    "expand-chat": "caretLeft.svg",
    "minimize-chat": "caretRight.svg",
    "open-in-canvas": "arrowSquareUpRight.svg"
  };
  const iconBasePath = "/_assets/icons/";
  const iconPath = path || (alias ? `${iconBasePath}${iconMap[alias]}` : undefined);
  return <span className="hny-icon" style={{
    display: "inline-block",
    width: `${size}px`,
    height: `${size}px`,
    maskImage: `url(${iconPath})`,
    maskSize: "contain",
    maskRepeat: "no-repeat",
    maskPosition: "center",
    WebkitMaskImage: `url(${iconPath})`,
    WebkitMaskSize: "contain",
    WebkitMaskRepeat: "no-repeat",
    WebkitMaskPosition: "center",
    backgroundColor: iconColor || "var(--hny-icon-color)",
    verticalAlign: "middle"
  }} />;
};

If your web or mobile applications use [Embrace](https://embrace.io/), you can forward metrics and network spans to Honeycomb.
Sending your Embrace telemetry to Honeycomb lets you:

* Analyze your mobile and web client telemetry and backend traces in one place
* Go from a backend trace in Honeycomb to the originating Embrace session (`emb.dashboard_session`)
* Set up [trigger alerts](/notify/triggers/) or [SLOs](/notify/slos/) for web/mobile performance
* Monitor frontend sessions and performance by [creating a new board with the Embrace board template](#create-a-board-from-the-embrace-dashboard-template)

## Before you begin

Before starting, confirm you have:

* A Honeycomb environment with at least one backend service sending OpenTelemetry traces
* An Embrace account on an Enterprise plan
* A mobile or web application using an Embrace SDK that supports [network spans forwarding](https://embrace.io/docs/data-forwarding/network-spans-forwarding/#sdk-version-requirements)

If you haven't added Embrace to your application, visit [Embrace's documentation](https://embrace.io/docs/) for guides on how to install and set up the Embrace SDK for your platform:

* [Android](https://embrace.io/docs/android/integration/)
* [iOS](https://embrace.io/docs/ios/6x/getting-started/installation/)
* [Web](https://embrace.io/docs/web/getting-started/basic-setup/)
* [React Native](https://embrace.io/docs/react-native/integration/)
* [Flutter](https://embrace.io/docs/flutter/integration/)

## Set up network spans forwarding

[Network spans forwarding](https://embrace.io/docs/data-forwarding/network-spans-forwarding/) stitches Embrace client spans into your backend traces in Honeycomb. Network spans forwarded from Embrace will have a `emb.dashboard_session` link. This link connects a Honeycomb trace to the originating Embrace session.

<Steps titleSize="h3">
  <Step title="Configure domains for network spans forwarding">
    Network spans forwarding requires you to specify which apps and domains to forward spans from.
    Configure this in the Embrace dashboard:

    1. Navigate to **Settings** > **Integrations**.
    2. Select the **Network Spans Forwarding** view.
    3. Select **Honeycomb** as the data destination.
    4. Select the apps you want to forward spans from.
    5. Add the domain names of the backend services you want to trace.

    Embrace forwards spans only for configured, internet-reachable domains.
    You can add domains as exact matches or use regex patterns for more flexible matching.
  </Step>

  <Step title="Create a Honeycomb Ingest Key">
    The Embrace SDK uses a Honeycomb Ingest Key to forward spans to your environment.
    If you already have an Ingest Key for this environment, you can use it here.

    To learn how to create a new Ingest Key, visit [Manage Environment API Keys](/configure/environments/manage-api-keys).
    When creating the key, enable **Create datasets**, so Embrace can create a dataset for the forwarded spans.

    You will use this key in the next step to configure the SDK exporter.
  </Step>

  <Step title="Configure the Embrace SDK exporter">
    The exporter tells the Embrace SDK where to send spans.
    Add a Honeycomb OTLP exporter to your Embrace SDK configuration, using your Ingest Key as the `x-honeycomb-team` header.
    Here is an example using the Embrace Web SDK:

    ```javascript highlight={6-10} theme={}
    import { EmbraceWebSDK } from '@embrace-io/web-sdk';

    const embrace = new EmbraceWebSDK({
        appId: "YOUR_EMBRACE_APP_ID",
        appVersion: "YOUR_APP_VERSION",
        exporters: [{
            type: 'otlp',
            endpoint: 'https://api.honeycomb.io/v1/traces',
            headers: { 'x-honeycomb-team': YOUR_HONEYCOMB_INGEST_KEY }
        }]
    });

    if (embrace) {
        console.log("Successfully initialized the Embrace SDK");
        embrace.start();
    } else {
        console.log("Failed to initialize the Embrace SDK");
    }
    ```

    The SDK automatically attaches a W3C `traceparent` header to every network request your app makes and forwards the resulting spans to Honeycomb with `emb.*` attributes included.
  </Step>
</Steps>

## Set up metrics forwarding

[Metrics forwarding](https://embrace.io/docs/metrics-forwarding/) sends session data from Embrace to Honeycomb, so you can query and alert on user experience signals alongside your backend traces.

<Steps titleSize="h3">
  <Step title="Create a Honeycomb Configuration Key">
    Embrace uses a Honeycomb Configuration Key to authenticate when forwarding metrics to your environment.
    To learn how to create one, visit [Manage Environment API Keys](/configure/environments/manage-api-keys).
  </Step>

  <Step title="Add Honeycomb as a Data Destination in Embrace">
    Adding Honeycomb as a Data Destination tells Embrace where to send session metrics.
    In the Embrace dashboard:

    1. Navigate to **Settings** > **Integrations**.
    2. Select the **Data Destinations** view.
    3. Select **Add Data Destination**.
    4. Choose **Honeycomb** and enter your Honeycomb Configuration Key.

    Once configured, Embrace forwards metrics to Honeycomb where you can query them alongside your trace data.
    To learn which metrics are forwarded, visit [Embrace Integration Overview: Session Metrics](/integrations/embrace/overview#session-metrics).
  </Step>
</Steps>

## Verify the integration

Verification confirms that both flows are working: spans appearing in the trace view means the SDK exporter is forwarding correctly, and metrics appearing in Honeycomb means the Data Destinations configuration is correct.

### Network spans

Spans appear in Honeycomb after the SDK exporter is configured and application traffic flows through a configured domain.

1. In Honeycomb, open the dataset that corresponds to your backend service.
2. Run a query and filter for `emb.app_id` exists.
3. Select a result row and open the trace view.
4. Confirm that the trace includes a span labeled **forwarded via Embrace** at the top of the waterfall, with `emb.*` attributes visible in the span detail panel.
5. Confirm that `emb.dashboard_session` appears as a clickable link in the span detail panel.

If you don't see spans after 15 minutes, refer to the [troubleshooting section](https://embrace.io/docs/data-forwarding/network-spans-forwarding/#troubleshooting) in Embrace's network spans forwarding documentation.

### Metrics

Metrics should appear in Honeycomb within a few minutes of adding it as a Data Destination.

1. In Honeycomb, open the dataset that corresponds to your Embrace metrics.
2. Run a query and filter for `session.count` exists.
3. Confirm that data is appearing.

## Create a Board from the Embrace Dashboard template

Once you've verified your Embrace telemetry is showing up in Honeycomb, create a Board so you can see your Embrace stuff at a glance.

1. Select **Boards** (<HnyIcon alias="boards-menu" />) from the navigation menu.
2. Go to the **Templates** view, or select **Create Boards** and **From Template**.
3. Choose the **Embrace Dashboard** template.

In the template preview, review the data displayed in the query panels.
If some queries aren't displaying correctly, you may need to map required fields to your data:

1. Go to the **Setup** view.
2. Find any queries marked **Unable to display**.
3. In the **Required fields** column, select the target field, then choose the appropriate replacement field.
   <Tip>
     Your field mapping applies to all template queries using that target field.
     To revert to the original template field, select the remove icon (<HnyIcon alias="remove" />) next to the replacement field name.
   </Tip>
4. Repeat this process for any additional fields or queries.
5. Select **Use Template**.

Your new Embrace Board appears on the Boards page.
Any queries marked as unable to display during creation are not included.

## Next steps

Now that your Embrace integration is configured, put it to work:

* [Investigate backend latency](/integrations/embrace/use-cases/investigate-backend-latency)
* [Diagnose mobile ANRs and hangs](/integrations/embrace/use-cases/diagnose-mobile-anrs)
* [Investigate with Embrace and Honeycomb MCP](/integrations/embrace/use-cases/investigate-with-mcp)