If you want to send OpenTelemetry data to Highlight from OTeL's Browser instrumentation you can do this by making a couple tweaks to your configuration.

1. Add span resource atributes

In order to associate spans with your project and sessions in Highlight, you'll need to add a few attributes:

highlight.project_id - Allows us to associate traces with your project. This can be accessed from your Highlight account.
highlight.session_id - Allows us to associate traces with a specific session in your project. This can be accessed as the sessionSecureID attribute of the object returned from H.getSessionData().
service.name (optional) - Specify the service name you want to assign on your traces. This makes it easier to filter to all traces from this instrumentation.

You can set these attributes when creating your trace provider:

const provider = new WebTracerProvider({
  resource: new Resource({
    'highlight.project_id': 'your-project-id',
    'highlight.session_id': 'your-session-id',
    'service.name': 'your-service-name', // optional
  })
});

2. Send data to Highlight's collector

Update your OTeL exporter to send data to the Highlight collector by updating the url config attribute:

const exporter = new OTLPTraceExporter({
  url: 'https://otel.highlight.io/v1/traces',
  // ...
})

3. Verify data is flowing correctly

Verify data is being sent to Highlight correctly. You can check the network traffic in your browser dev tools to verify requests are being made. If data is flowing you can log into Highlight and go to the Traces page, then filter by service_name to the value you sent in the service.name attribute to see all traces from the browser instrumentation.

Tracing Fullstack Frameworks