Dash0 Logo
Infrastructure MonitoringLog ManagementApplication Performance ManagementDistributed TracingKubernetes MonitoringWebsite MonitoringSynthetic MonitoringDashboardsAlertingService MapIntegrationsTransparent CostObservability as Code
PricingDocs
GuidesBlogKnowledgeComparisonsPodcastNewsletterIntegerationsChangelog
Contact usMeet our TeamCareersSecurity
  • Book A Demo
  • Sign In
  • Start Free Trial
Book a demoSign in
Start Free Trial

Resources

  • Pricing
  • Blog
  • Guides
  • Knowledge
  • Comparisons
  • Integrations
  • Documentation
  • Glossary
  • OTelBin.io
  • Sitemap

Company

  • Our Team
  • Careers
  • Trust Center
  • Security

Compare

  • Datadog
  • Grafana
  • Dynatrace
  • New Relic
  • Elastic
  • Honeycomb
  • Sentry

Contact

  • Contact us
  • GitHub
  • LinkedIn
  • X
  • YouTube
  • Dash0 Newsletter
  • Terms and Conditions
  • Privacy Policy
  • Data Processing Agreement
  • Vulnerability Disclosure

©2025 Dash0 Inc.

Hub/OpenTelemetry JS SDK

Technology

OpenTelemetry JS SDK

Opentelemetry-js is OpenTelemetry's official set of SDKs for instrumentation within web browsers

Related Integrations

Browser

In this section
    TechnologyOverviewUse CasesSetupInstallInitializationBundlingTrying ItRelated integrations

Overview

This integration is based on the official OpenTelemetry browser JavaScript instrumentation. While widely used, it is still officially marked as experimental.

Overview

Opentelemetry-js is OpenTelemetry's official set of SDKs for the instrumentation of javascript applications running in web browsers. This SDK allows you to observe end-user page loads, sessions, fetch requests, errors, and asset retrievals.

Instrumenting web applications with opentelemetry-js sdks will emit trace signals, which will be available in dash0's tracing product area. If you want to make use of dash0's website monitoring, please consider using the Dash0 web sdk instead.

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.

Setup

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.