Website Monitoring

SDK

The Dash0 Web SDK is a JavaScript and TypeScript-compatible client designed to instrument web applications with observability data. It leverages OpenTelemetry under the hood to automatically track and report critical performance, user interaction, and network metrics. Upon initialization, the SDK begins monitoring key events such as page views, route transitions, HTTP requests, and errors. It also collects web performance metrics, known as Web Vitals, and handles session tracking seamlessly in the background.

To get started, developers integrate the SDK as early as possible in the application lifecycle. For example, in a React or Next.js app, the SDK is typically initialized in the main entry point. This ensures all subsequent activity is captured within the context of a single session. Once initialized, the SDK batches and sends telemetry to a Dash0 OTLP endpoint using a public ingest token.

Key Responsibilities:

• Auto‑instrument page loads, route changes, http requests, errors, and web vital metrics
• Associate events with user and session context
• Batch and transmit telemetry to designed OTLP endpoint
• Allow user-identification, custom events and attributes

User

In Dash0's data model, a User refers to a unique visitor to the website. Initially, the SDK assigns an anonymous user ID using local storage or cookies. This allows tracking across sessions even before authentication occurs. When the user logs in, developers can call the identify method to associate the current session with an authenticated user ID, providing continuity between anonymous and logged-in sessions.

User metadata can also be enriched with custom attributes such as email, account type, or role. These attributes help categorize user behavior and are valuable for segmentation in analytics dashboards. In addition to the ID, the SDK automatically captures environment data like browser, operating system, and locale, providing a full picture of the user context.

Session

A Session in Dash0 represents a single period of continuous user activity. The SDK automatically starts a new session when a user visits the site and continues it until there is a period of inactivity—typically 30 minutes—or the browser is closed. If the user returns later, a new session begins, even if it's the same anonymous or authenticated user.

Each session contains one or more page views and can include interactions, network requests, errors, and performance metrics. Sessions are key to understanding engagement, as they form the foundation for calculating metrics like session duration, bounce rate, and funnel progression. Developers do not need to manage session state directly; the SDK handles this automatically.

Session Identification

Each session is assigned a unique session ID, which is included with all telemetry data sent during that session. This ID allows Dash0 to:

• Group page views, interactions, and performance metrics
• Link session-level metadata such as duration, web vitals, and bounce status
• Correlate with user identifiers (anonymous or authenticated)

Session Lifecycle

The Dash0 SDK starts a new session when the user loads the site or application. By default, a session remains active until there is 3 hours of inactivity, after which a new session will be created upon the next user interaction. A new session is also started when the user reopens the application after a browser tab was closed or if local/session storage is cleared.

The SDK uses cookies and localStorage (under the dash0_session and dash0_user keys) to persist session and user identifiers between page views and route changes.

Session Timeouts & Configuration via SDK

The Dash0 Web SDK exposes two settings for controlling session expiry:

• sessionInactivityTimeoutMillisCopy — the maximum time allowed without user activity (e.g. clicks, page loads) before a session expires. Defaults to 3 hours and must be ≤ the maximum session duration.
• sessionTerminationTimeoutMillisCopy — the absolute maximum lifetime of a session even with continuous activity. Defaults to 6 hours and likewise must be ≤ 24 hours

Example Initialization

Session Lifecycle
12345678
import { init } from "@dash0hq/sdk-web";

init({
  serviceName: "my-app",
  endpoint: { url: "...", authToken: "..." },
  sessionInactivityTimeoutMillis: 30 * 60 * 1000, // 30 min
  sessionTerminationTimeoutMillis: 4 * 60 * 60 * 1000, // 4 hours
});

In this example, if a user is inactive for 30 minutes, the session ends. Additionally, any session automatically terminates after 4 hours—even if the user remains active.

Use Cases

• Tracking bounce rates (sessions with a single page view and no interactions)
• Measuring session length and engagement levels
• Associating Web Vitals to real usage journeys

Page View

A Page View is recorded every time a user navigates to a new page. In traditional websites, this happens on each full-page load. In modern single-page applications (SPAs), the SDK detects client-side route changes to log page transitions without requiring full reloads.

Each page view includes the URL, route name, referrer, page title, and timing data such as how long the page took to load. The SDK also associates Web Vitals with each page view, making it possible to analyze performance at a granular level. Page views are the cornerstone of user navigation analysis and allow developers to measure how users move through the site or application.

Web Vitals

Web Vitals are a set of standardized performance metrics designed to measure real-world user experience. Dash0 focuses on the three Core Web Vitals defined by Google, which are critical indicators of a website’s performance and user satisfaction.

These metrics are automatically collected by the Dash0 Web SDK using native browser APIs and OpenTelemetry instrumentation. Each metric is tied to individual page views and sessions, providing deep insight into how users experience your application in practice not just in lab conditions.

Largest Contentful Paint (LCP)

LCP measures how quickly the main content of a page becomes visible to the user. It reports the render time of the largest visible element—such as an image, video, or text block—within the viewport. A fast LCP ensures that users perceive the page as loading quickly.

• Good performance: ≤ 2.5 seconds
• Helps identify slow-loading content, images, or render-blocking resources

Interaction to Next Paint (INP)

INP measures the responsiveness of your site by tracking the delay between a user's interaction (like clicking a button or typing) and when the UI updates on screen. It reflects the worst-case interaction latency during a session, replacing the older FID metric with a more comprehensive measure of interactivity.

• Good performance: ≤ 200 milliseconds
• Useful for pinpointing JavaScript blocking, slow animations, or sluggish event handlers

Cumulative Layout Shift (CLS)

​​CLS measures visual stability by calculating how often and how drastically elements shift on the screen while a page is loading or during interaction. A high CLS score typically results from unexpected layout changes, which can frustrate users or lead to mis-clicks.

• Good performance: ≤ 0.1
• Indicates problems with dynamic content, ad loading, or font shifts
• Helps improve perceived polish and usability

Custom Events

Custom Events allow you to capture specific user actions or application-level milestones that are relevant to your business logic, product goals, or feature usage. Unlike automatic events (such as page loads or fetch calls), custom events are manually defined and triggered by developers using the monitoring SDK.

Bounce Rate

The Bounce Rate is a metric that shows the percentage of sessions in which the user visited only a single page and took no additional actions. This typically indicates low engagement and can signal problems with page relevance, content quality, or performance.

In Dash0, a session is considered a "bounce" if it includes only one page view. Because the SDK tracks all of these automatically, bounce rate is calculated with high accuracy, even in single-page apps.

Reducing bounce rate often involves improving page content, speed, or encouraging users to interact through better UI design. Dash0 allows developers to dig into bounced sessions to understand where users are dropping off and why.

Geo Location

Geo Location data provides insight into where your users are accessing your site from. While the Dash0 SDK does not directly access browser-based location services (which would require user permission), it captures geographic metadata on the backend using the IP address of incoming telemetry.

This enrichment process adds fields such as country, region, city, and timezone to each event. These data points can be used to analyze geographic trends, monitor regional performance, or target users with location-specific content. For privacy and compliance, IP addresses are anonymized or hashed in accordance with GDPR and other regulations.

Geo-based segmentation is especially useful for identifying latency issues tied to specific regions, understanding market distribution, or monitoring localized deployments of global applications.