JavaScript Browser SDK

Frontend instrumentation for replay, metrics, and propagation

Install

npm install @obtrace/sdk-js

Configuration

import { initBrowserSDK } from "@obtrace/sdk-js/browser";
 
const sdk = initBrowserSDK({
  apiKey: import.meta.env.VITE_OBTRACE_API_KEY,
  ingestBaseUrl: import.meta.env.VITE_OBTRACE_INGEST_BASE_URL,
  tenantId: import.meta.env.VITE_OBTRACE_TENANT_ID,
  projectId: import.meta.env.VITE_OBTRACE_PROJECT_ID,
  appId: "web-app",
  serviceName: "web-app"
});

Quick start

const obFetch = sdk.instrumentFetch();
await obFetch("/api/ping");
sdk.log("info", "page.loaded");
await sdk.shutdown();

Production hardening

  1. Use environment-scoped keys.
  2. Mask sensitive fields before custom attributes.
  3. Control replay sampling via env vars.
  4. Validate ingestion in /v1/logs and /v1/replay/index.

Troubleshooting

  • No data: verify OBTRACE_INGEST_BASE_URL and CORS.
  • No replay: confirm initialization in browser runtime.
  • Enable debug logs in non-production environments.

On this page