Getting started

dash0-init.ts
12345678910111213
import { init } from "@dash0hq/sdk-web";

init({
serviceName: "my-app",
endpoint: {
// Get in the OTLP over HTTP tab of https://app.dash0.com/settings/endpoints
url: "...",
// Get or create from the https://app.dash0.com/settings/auth-tokens
authToken: "...",
},
sessionInactivityTimeoutMillis: 30 * 60 * 1000, // 30 min
sessionTerminationTimeoutMillis: 4 * 60 * 60 * 1000, // 4 hours
});

Dash0 Web SDK

This SDK enables users of Dash0's web monitoring features to instrument a website or single-page-application to capture and transmit telemetry to Dash0.

Features include:

• Page view instrumentation
• Navigation timing instrumentation
• HTTP request instrumentation
• Error tracking

Getting started

Prerequisites

To setup the web sdk you'll need the following:

1. Log in to your desired Dash0 account. You can sign up here

2. Retrieve the following information from your Dash0 account:

   • endpoint URL for your Dash0 region (Dash0 link)

   • authToken with Ingesting permissions for the dataset (Dash0 link)

     • Auth tokens for client monitoring will be public as part of your website, please make sure to:
       • Use a separate token, exclusively for website monitoring; if you want to monitor multiple websites, it is best to use a dedicated token for each
       • Limit the dataset permissions on the auth token to the dataset you want to ingest Website Monitoring data with
       • Limit permissions on the auth token to Ingesting

Installation steps

1. Add the SDK to your dependencies

# npm
npm install @dash0/sdk-web
# yarn
yarn add @dash0/sdk-web
# pnpm
pnpm install @dash0/sdk-web

2. Initialize the SDK in your code: you'll need to call the init function at a convenient time in your applications lifecycle. Ideally this should happen as early as possible in the web page initialization, as most instrumentations shipped by the SDK can only observe events after init has been called.

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

init({
  serviceName: "my-website",
  endpoint: {
    // Replace this with the endpoint URL for your Dash0 region, that you retrieved earlier in "prerequisites"
    url: "{endpoint}",
    // Replace this with your auth token you retrieved earlier in "prerequisites"
    // Ideally, you will inject the value at build time in order not commit the token to git,
    // even if its effectively public in the HTML you ship to the end user's browser
    authToken: "{authToken}",
  },
});

For more detailed instructions, refer to INSTALL.md.

Development

See DEVELOPMENT.md for instructions on the development setup, testing and release process.

count-users.js
123456789
import { identify } from "@dash0/sdk-web";

// For logged-in users
identify("user123", {
  name: "johndoe",
  fullName: "John Doe",
  email: "john@example.com",
  roles: ["admin", "user"],
});

track-anonymous-visitors.js
1234567
let anonymousId = localStorage.getItem('dash0_anonymous_id');
if (!anonymousId) {
  // Use your preferred method to generate a unique string identifier
  anonymousId = generateUniqueId(); // Implement this function based on your needs
  localStorage.setItem('dash0_anonymous_id', anonymousId);
}
identify(anonymousId);