Browser and React — Telemio Documentation

Choose client-side credentials

Browser bundles are public. Use a restricted, client-safe ingest key, or route browser data through a controlled first-party gateway.

Before you begin: Create a Telemio workspace and a scoped ingest credential in the console. Keep server keys in deployment secrets. Set service.name and an environment on every service, and verify signals in the console after starting the process.

Generate a client key in Console → Manage → API keys. Restrict its allowed origins, permitted signals and rate limits. Do not use TELEMIO_API_KEY or a server key in frontend environment variables.

Add explicit browser events

The SDK can send telemetry from environments with fetch, but a browser must only receive a safe client key.

TypeScript (browser)

import { createTelemio } from "@telemio/sdk"

const telemetry = createTelemio({
  clientKey: import.meta.env.VITE_TELEMIO_CLIENT_KEY,
  appId: "shop-web",
  serviceName: "shop-web",
  environment: "production"
})

export async function recordSearch(searchType: string): Promise<void> {
  await telemetry.track("catalog.search", { "search.type": searchType })
}

Only expose a publishable client key approved for browser ingestion. Confirm the deployed key’s origin restrictions and supported signals match this use case before shipping.

Trace network boundaries

Use OpenTelemetry browser instrumentation or Telemio’s browser RUM setup for page loads, errors, and request timing.

Preserve W3C traceparent across calls to your backend, configure cross-origin propagation only for approved destinations, and never export form values or authentication headers. See client-safe ingestion.

Verify in production

Load a page in a staging origin, submit a search, and confirm the signal in the browser service.

Inspect the browser network panel for CORS, 401/403 and payload validation errors. Confirm an unauthorized origin cannot reuse your client key.