or run

tessl search

Version

Workspace: tessl
Visibility: Public
Created: 22 days ago
Last updated: 2 days ago
Describes: pkg:npm/@dash0/sdk-web@0.18.x

docs

tile.json

tessl/npm-dash0hq--sdk-web

tessl install tessl/npm-dash0hq--sdk-web@0.18.0

Browser telemetry SDK for monitoring page views, errors, web vitals, and HTTP requests with OpenTelemetry integration

Dash0 Web SDK

Browser telemetry SDK for monitoring page views, errors, web vitals, and HTTP requests with OpenTelemetry integration.

Package Information

Package: @dash0/sdk-web
Installation: npm install @dash0/sdk-web
TypeScript: Full type definitions included
Browser Support: Modern browsers (ES6+), IE11 not supported

Quick Start

import { init } from "@dash0/sdk-web";

init({
  serviceName: "my-website",
  endpoint: {
    url: "https://ingress.dash0.com",
    authToken: "auth_your_token_here",
  },
});

Critical: Call init() early in page lifecycle (ideally in <head>) before other SDK functions.

See Quick Start Guide for detailed setup instructions.

Core Concepts

Automatic Instrumentation

The SDK automatically collects:

Page views and navigation timing
Core Web Vitals (CLS, INP, LCP)
HTTP requests (fetch API)
Unhandled errors and promise rejections

Session Management

Sessions are automatically tracked with configurable timeouts:

Inactivity timeout: Default 3 hours (max 24 hours)
Termination timeout: Default 6 hours (max 24 hours)
Sessions persist across page loads via browser storage

Custom Telemetry

Send custom events, report errors, and identify users:

import { sendEvent, reportError, identify } from "@dash0/sdk-web";

// Custom events
sendEvent("purchase_completed", {
  attributes: { "order.id": "123" },
});

// Error reporting
reportError(error, {
  attributes: { "user.id": userId },
});

// User identification
identify("user-123", {
  email: "user@example.com",
  roles: ["admin"],
});

API Quick Reference

Function	Purpose	Link
`init()`	Initialize SDK	Reference
`identify()`	Associate user with telemetry	Reference
`sendEvent()`	Send custom events	Reference
`reportError()`	Manually report errors	Reference
`addSignalAttribute()`	Add attributes to all signals	Reference
`removeSignalAttribute()`	Remove signal attributes	Reference
`terminateSession()`	End current session	Reference
`setActiveLogLevel()`	Configure logging verbosity	Reference
`debug()`	Inspect SDK configuration	Reference

Import Methods

ESM (Recommended)

import { init, identify, sendEvent } from "@dash0/sdk-web";

CommonJS

const { init, identify, sendEvent } = require("@dash0/sdk-web");

IIFE (Script Tag)

<script>
  (function(d,a,s,h,z,e,r,o){d[a]||((z=d[a]=function(){h.push(arguments);}),(z._t=new Date()),(z._v=1),(h=z._q=[]));})(window,"dash0");
  dash0("init", {
    serviceName: "my-website",
    endpoint: { url: "...", authToken: "..." },
  });
</script>
<script defer crossorigin="anonymous" src="https://unpkg.com/@dash0/sdk-web/dist/dash0.iife.js"></script>

Architecture

OpenTelemetry Integration: Uses OTLP protocol with standard semantic conventions
Trace Propagation: Supports W3C TraceContext and AWS X-Ray headers
Browser Storage: Uses localStorage/sessionStorage for persistence
Asynchronous: All telemetry sent asynchronously (non-blocking)

TypeScript Support

All types are exported and available:

import type {
  AttributeValueType,
  AnyValue,
  PageViewMeta,
  PropagatorConfig,
  LogLevel,
} from "@dash0/sdk-web";

// Access function parameter types
import type { init } from "@dash0/sdk-web";
type InitOptions = Parameters<typeof init>[0];

Browser Compatibility

Required APIs: fetch, localStorage/sessionStorage, Performance, Promise, URL

Supported: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+, modern mobile browsers

Not Supported: IE11, browsers without Promise/fetch support

See Browser Compatibility for details.

Resources

Guides

Quick Start Guide - Step-by-step setup instructions
Configuration Guide - Detailed configuration options

Examples

Real-World Scenarios - Common usage patterns
Edge Cases - Advanced scenarios and error handling

Reference

Initialization - Complete initialization API
User Identification - User tracking API
Custom Events - Event tracking API
Error Reporting - Error tracking API
Signal Attributes - Attribute management API
Session Management - Session lifecycle API
Debug and Logging - Debugging and logging API
Browser Compatibility - Browser support details

Common Patterns

React Integration

import { init } from "@dash0/sdk-web";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    init({
      serviceName: "my-react-app",
      endpoint: { url: "...", authToken: "..." },
    });
  }, []);
  // ...
}

Error Boundary

import { reportError } from "@dash0/sdk-web";

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    reportError(error, {
      componentStack: errorInfo.componentStack,
    });
  }
}

User Login Flow

import { identify } from "@dash0/sdk-web";

async function handleLogin(user) {
  identify(user.id, {
    email: user.email,
    roles: user.roles,
  });
}

See Real-World Scenarios for more patterns.