Support per-signal OTLP exporter endpoints for Hyperdx internal telemetry

[vinzee]

Summary

This change allows for more granular control over OpenTelemetry data routing by enabling independent configuration of traces, metrics, and logs endpoints. This is particularly useful for complex networking environments or when using different backends for different telemetry types.

Additionally, the browser instrumentation has been updated to a local wrapper to better manage these signal-specific configurations and improve internal consistency.

How to test locally or on Vercel

1. Verify default behavior (no per-signal env vars set)

1. Start HyperDX
2. Confirm the app loads and works as before (login, search, navigate).
3. curl http://localhost:8080/api/config | jq . -- verify collectorUrl is present and collectorTracesUrl / collectorMetricsUrl / collectorLogsUrl are absent (undefined values are omitted from JSON).

2. Verify per-signal env vars are exposed via the config API

1. Stop the app. Set per-signal env vars and restart:

   export NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT="http://localhost:4318/v1/traces"
   export NEXT_PUBLIC_OTEL_EXPORTER_OTLP_LOGS_ENDPOINT="http://localhost:4318/v1/logs"
   yarn dev

2. curl http://localhost:8080/api/config | jq . -- confirm collectorTracesUrl and collectorLogsUrl now appear with the values set above.

3. Verify browser telemetry routes to separate endpoints

1. Set the per-signal env vars to two different ports:

   export NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT="http://localhost:4318/v1/traces"
   export NEXT_PUBLIC_OTEL_EXPORTER_OTLP_LOGS_ENDPOINT="http://localhost:4319/v1/logs"
   yarn dev

2. Open the app in a browser with DevTools -> Network tab open.
3. Navigate around, then filter requests by v1/traces and v1/logs. Confirm trace exports hit :4318 and session replay log exports hit :4319.

4. Verify server-side Node.js telemetry (API + Next.js server)

1. @hyperdx/node-opentelemetry natively reads per-signal env vars. Set them and start:

   export OTEL_EXPORTER_OTLP_TRACES_ENDPOINT="http://localhost:4318/v1/traces"
   export OTEL_EXPORTER_OTLP_LOGS_ENDPOINT="http://localhost:4319/v1/logs"
   export OTEL_EXPORTER_OTLP_METRICS_ENDPOINT="http://localhost:4320/v1/metrics"
   yarn dev

2. Confirm in otel-collector logs that each signal arrives at its respective endpoint.

References

• Linear Issue: [Feature request] Support per signal OTLP endpoints for hyperdx-frontend's internal telemetry signals #2076

[vercel]

@vinzee is attempting to deploy a commit to the HyperDX Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6a2a41c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

PR Review

• ⚠️ collectorMetricsUrl is exposed in /api/config response and NextApiConfigResponseData type but is never passed to HyperDX.init() in _app.tsx, nor does hdx-browser.ts's InitConfig accept a metricsUrl. Either remove it or add a comment explaining it's reserved for future use/other consumers.

• ⚠️ hdx-browser.ts duplicates initialization logic from @hyperdx/browser (which it replaces). The DEFAULT_URL = 'https://in-otel.hyperdx.io' hardcoded in the wrapper will only be used if url is undefined, but callers in _app.tsx always pass url: _jsonData.collectorUrl (which itself has a 'http://localhost:4318' default). The constant is effectively dead but harmless — worth a comment or removal to avoid confusion.

• ℹ️ SearchPage.module.scss CSS refactor (:global { .selector } → :global(.selector)) is unrelated to the PR's purpose. Not a problem, but may want to split into a separate commit for cleaner history.

✅ Core logic is sound — env var → config.ts constants → /api/config API → browser init() with per-signal URLs is a clean design. The SSR/client boundary is handled correctly (server-side OTEL_EXPORTER_OTLP_* vars are read in the API route and forwarded to the browser via the config endpoint).

[karl-power]

Hi @vinzee - thanks for the PR! This is a good idea. I think it would be better to update hyperdx-js directly to support this feature rather than re-implementing it here.