or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.mdreal-world-scenarios.md

guides

configuration.mdquick-start.md

reference

browser-compatibility.mdcustom-events.mddebug-logging.mderror-reporting.mdinitialization.mdsession-management.mdsignal-attributes.mduser-identification.md
index.md
tile.json

quick-start.mddocs/guides/

Quick Start Guide

Get started with Dash0 Web SDK in minutes.

Installation

npm install @dash0/sdk-web

Basic Setup

1. Import and Initialize

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

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

Critical: Call init() as early as possible in your page lifecycle, ideally in the <head> section or immediately after opening <body>.

2. Placement in HTML

Recommended (in <head>):

<!DOCTYPE html>
<html>
<head>
  <script>
    // Initialize SDK early
    import { init } from "@dash0/sdk-web";
    init({
      serviceName: "my-website",
      endpoint: {
        url: "https://ingress.dash0.com",
        authToken: "auth_your_token_here",
      },
    });
  </script>
</head>
<body>
  <!-- Your app -->
</body>
</html>

3. React/Next.js Setup

React:

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

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

  return <div>Your app</div>;
}

Next.js (in _app.tsx or _app.js):

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

export default function App({ Component, pageProps }) {
  useEffect(() => {
    init({
      serviceName: "my-nextjs-app",
      endpoint: {
        url: "https://ingress.dash0.com",
        authToken: "auth_your_token_here",
      },
    });
  }, []);

  return <Component {...pageProps} />;
}

4. Script Tag (IIFE) Setup

If you're not using a bundler:

<script>
  // Queue function - must be defined before SDK loads
  (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");

  // Queue initialization
  dash0("init", {
    serviceName: "my-website",
    endpoint: {
      url: "https://ingress.dash0.com",
      authToken: "auth_your_token_here",
    },
  });
</script>
<script defer crossorigin="anonymous" src="https://unpkg.com/@dash0/sdk-web/dist/dash0.iife.js"></script>

Verify Installation

After initialization, check the browser console for SDK logs (if log level is set to debug):

import { setActiveLogLevel, debug } from "@dash0/sdk-web";

// Enable debug logging
setActiveLogLevel("debug");

// Inspect configuration
debug();

Next Steps

  • Configure Options: See Configuration Guide for all available options
  • Identify Users: See User Identification
  • Send Custom Events: See Custom Events
  • Handle Errors: See Error Reporting
  • Real-World Examples: See Real-World Scenarios

Common Issues

SDK Not Initializing

  • Ensure init() is called before other SDK functions
  • Check that serviceName and endpoint are provided
  • Verify endpoint URL is valid and accessible

No Telemetry Appearing

  • Check browser console for errors
  • Verify auth token is correct
  • Ensure network requests aren't blocked (ad blockers, CORS)
  • Check that required browser APIs are available

Session Not Persisting

  • Verify localStorage/sessionStorage is available
  • Check if private browsing mode is enabled
  • Ensure storage quota hasn't been exceeded

See Edge Cases for more troubleshooting.