Browser

Embed
Preview of the card
<a href="https://forumulate.com/p/watchtower/docs/browser"><img src="https://forumulate.com/api/public/orgs/watchtower/spaces/docs/pages/eb6addbf-b495-4faa-aeb8-b139c6c06edd/social-card.svg?v=3e7ae33eec8b" alt="Browser" width="600" height="315"></a>

<!-- status: beta language: browser -->

Browser

Send traces from a web page with the OpenTelemetry web SDK over OTLP/HTTP. A page cannot read environment variables, so the endpoint and key are set in code.

  1. Create a project, then an ingestion key (wti_...) with the ingest:traces scope.

  2. Install the SDK and run this once at page start:

npm install @opentelemetry/sdk-trace-web @opentelemetry/sdk-trace-base @opentelemetry/exporter-trace-otlp-http
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';

const exporter = new OTLPTraceExporter({
  url: 'https://ingest.example.com/v1/traces',
  headers: { 'x-watchtower-key': 'wti_YOUR_KEY' },
});
const provider = new WebTracerProvider({ spanProcessors: [new BatchSpanProcessor(exporter)] });
provider.register();

provider.getTracer('onboarding').startSpan('hello-watchtower').end();

  1. The onboarding screen polls GET /v1/projects/{prj}/onboarding/first-event and turns green when the first span arrives.

A key in page source is public. Use a key scoped to the one signal you need and expect it to be copied; publishable browser keys with an origin allowlist arrive with the browser SDK (sdks/browser). Until then use this for development, or send through your own backend.

Updated