OpenTelemetry · OTLP/HTTP

Send frontend telemetry to LogzAI via OpenTelemetry

Use the official OTel browser SDK to instrument your frontend. LogzAI accepts OTLP/HTTP directly — no vendor lock-in, standard spans, your way.

Get ingest token

npm install @opentelemetry/sdk-web

No credit card required. 5M events free/month.

What you get out of the box

Standard OTLP/HTTP protocol

No proprietary SDK. Any OTel-compatible data ships to LogzAI via standard OTLP.

Auto-instrument document load

DocumentLoadInstrumentation captures page load performance spans automatically.

User interaction tracing

UserInteractionInstrumentation tracks clicks and form events as spans.

Fetch/XHR tracing

Outbound HTTP calls are traced and correlated to parent spans automatically.

Vendor-neutral

Swap the exporter URL to send the same data to any OTel-compatible backend.

otel.ts

import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'
import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
import { ZoneContextManager } from '@opentelemetry/context-zone'
import { registerInstrumentations } from '@opentelemetry/instrumentation'
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction'
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
import { Resource } from '@opentelemetry/resources'
import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions'

const resource = new Resource({
  [SemanticResourceAttributes.SERVICE_NAME]: 'my-frontend-app',
  [SemanticResourceAttributes.DEPLOYMENT_ENVIRONMENT]: process.env.NODE_ENV,
})

const exporter = new OTLPTraceExporter({
  url: 'https://ingest.logzai.com/v1/traces',
  headers: {
    'X-Logzai-Token': process.env.VITE_LOGZAI_TOKEN!,
  },
})

const provider = new WebTracerProvider({ resource })
provider.addSpanProcessor(new BatchSpanProcessor(exporter))
provider.register({ contextManager: new ZoneContextManager() })

registerInstrumentations({
  instrumentations: [
    new DocumentLoadInstrumentation(),
    new UserInteractionInstrumentation(),
    new FetchInstrumentation({
      propagateTraceHeaderCorsUrls: [/api\.yourapp\.com/],
    }),
  ],
})

export const tracer = provider.getTracer('my-frontend-app')

// Enrich spans with user context
export function setUserContext(userId: string, orgId: string) {
  const span = tracer.startSpan('user-context')
  span.setAttributes({ 'user.id': userId, 'org.id': orgId })
  span.end()
}

Every event arrives enriched

When OpenTelemetry captures an error or navigation, LogzAI receives these fields automatically.

Field	Example value	Captured from
service.name	my-frontend-app	Resource attribute
deployment.environment	production	Resource attribute
http.url	https://api.myapp.com/users	FetchInstrumentation
http.status_code	200	FetchInstrumentation
user.id	usr_01j8x...	setAttributes call
org.id	org_9xk...	setAttributes call
span.kind	CLIENT	OTel spec
trace_id	4bf92f3577b34da6...	OTel SDK

Start sending events in 2 minutes

Add npm install @opentelemetry/sdk-web to your OpenTelemetry app and you're done.

No infrastructure to manage. 5M events free/month.

Analyze your logs with AI

Once events are flowing, ask LogzAI questions in plain English. Find root causes in seconds.

Try LogzAI Free