SDKs
SDK JavaScript Browser
Instrumentação frontend com replay, métricas e propagação
npm install @obtrace/sdk-browser
import { initBrowserSDK, SemanticMetrics } from "@obtrace/sdk-browser/browser";
const sdk = initBrowserSDK({
apiKey: import.meta.env.VITE_OBTRACE_API_KEY,
tenantId: import.meta.env.VITE_OBTRACE_TENANT_ID,
projectId: import.meta.env.VITE_OBTRACE_PROJECT_ID,
appId: "checkout-web",
env: import.meta.env.MODE,
serviceName: "checkout-web",
serviceVersion: import.meta.env.VITE_OBTRACE_SERVICE_VERSION
});
const obFetch = sdk.instrumentFetch();
await obFetch("/api/ping");
sdk.log("info", "page.loaded");
sdk.metric(SemanticMetrics.webVitalLcp, 2400, "ms", {
attrs: {
"cloud.region": import.meta.env.VITE_APP_REGION ?? "us-east-1",
},
});
await sdk.shutdown();
- Use chaves por ambiente.
- Masque dados sensíveis antes de enviar atributos.
- Controle sampling de replay por env var.
- Valide ingestão em OTLP e replay.
- Sem dados: valide a API key e CORS.
- Sem replay: confira inicialização no runtime de browser.
- Ative logs de debug em ambiente não produtivo.