Browser

Overview

Keeping track of your end-users is essential to understanding the real-world impact of misbehaving systems. To this end, Dash0 supports the official OpenTelemetry Browser JavaScript SDK. This SDK allows you to observe end-user page loads, sessions, fetch requests, errors, and asset retrievals within web browsers.

One of the excellent capabilities is a correlation between in-browser activity and backend activity. This enables you to understand which end-user has caused a backend request.

Use Cases

• Real User Monitoring (RUM): Gather detailed performance metrics from actual user interactions, including page load times, resource loading, and user interactions. This provides a realistic view of application performance compared to synthetic testing.
• Frontend Performance Bottleneck Identification: Pinpoint performance bottlenecks in the frontend by analyzing timings for various operations like network requests, script execution, and rendering.
• (Uncaught) Errors and Promise rejections: Capture and analyze JavaScript errors occurring in users' browsers, providing insights into the frequency and context of errors to prioritize bug fixes.
• Correlation of Frontend and Backend Traces: Connect frontend user interactions with corresponding backend traces, enabling end-to-end performance analysis and troubleshooting.
• Custom Instrumentation: Instrument specific user interactions or business logic within the application to gain deeper insights into critical workflows.

Install

The OpenTelemetry Browser JavaScript SDK is available as many fine-grained NPM packages under the OpenTelemetry organization. This guide will walk you through a basic setup using Rollup as a bundler. You don't need to use Rollup, though. You can also import the packages with your existing Next.js, Webpack, Parcel, and Vite builds.

To start, let's grab all the necessary dependencies:

Initialization

Now, let's initialize this SDK within your application code as early as possible so that the instrumentation can observe all interactions. Place the following code into a file called instrumentation.js (of course, you may also use TypeScript – the packages come with type definitions).

Next, make sure this file is loaded within your application, for example, by importing it into your application's code. In a React application, you can consider initializing within a useEffect hook.

We will import the bundled index.js file directly from an index.html HTML file within our minimal example.

Bundling

This is all the configuration being done. You could now open up your application to see traces being generated. If you follow our example of leveraging Rollup and an index.html, the next step is building the application. To do that, we need a configuration file for our bundler. Create a file called rollup.config.js with this content.

For the bundling process to work, you need to mark the package as a module by adding "type": "module" to your package.json, and you will also need a few more development-only dependencies:

And at last, we can build our application:

Trying It

You can now open up your website to start sending telemetry to Dash0! If you have followed along using Rollup and the index.html file, you can now open the index.html file in your web browser. The instrumentation will collect information about page loads and report these as traces to Dash0 (you can see calls to the Dash0 ingestion API in the network tab)!

Now, this is where the real fun begins: Insights into real-world impact! We also suggest you read the manual instrumentation guidelines to learn how to capture custom data about your application.