or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.md real-world-scenarios.md

guides

configuration.md quick-start.md

reference

browser-compatibility.md custom-events.md debug-logging.md error-reporting.md initialization.md session-management.md signal-attributes.md user-identification.md

index.md

tile.json

tessl/npm-dash0hq--sdk-web

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

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

To install, run

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

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.