Monitor OpenTelemetry JavaScript with Uptrace

This guide explains how to configure the OpenTelemetry JavaScript SDK to export telemetry data to Uptrace using OTLP/HTTP and OTLP/gRPC. You'll learn how to set up comprehensive monitoring for your Node.js and browser applications with distributed tracing capabilities.

Prerequisites

Before you begin, ensure you have:

A JavaScript application running on Node.js 16+ or modern browsers
An Uptrace account with a valid DSN (Data Source Name)
Basic familiarity with your application's architecture

Installation

Node.js

Install the Uptrace wrapper for Node.js:

bash

npm install @uptrace/node --save

Browser

Install the Uptrace wrapper for browsers:

bash

npm install @uptrace/web --save-dev

Basic configuration

Node.js

Configure OpenTelemetry for Node.js applications:

javascript

const uptrace = require('@uptrace/node')

uptrace.configureOpentelemetry({
  dsn: '<YOUR_UPTRACE_DSN>',
  serviceName: 'myservice',
  serviceVersion: '1.0.0',
})

Browser

Configure OpenTelemetry for browser applications:

javascript

import { configureOpentelemetry } from '@uptrace/web'

configureOpentelemetry({
  dsn: '<YOUR_UPTRACE_DSN>',
  serviceName: 'myservice',
  serviceVersion: '1.0.0',
})

Replace <YOUR_UPTRACE_DSN> with your actual Uptrace DSN from your project settings.

Detailed guides

For comprehensive setup instructions and advanced configuration:

OpenTelemetry for Node.js - Server-side JavaScript applications with automatic instrumentation
OpenTelemetry for Browsers - Client-side web applications with manual instrumentation

Key features

OpenTelemetry JavaScript provides:

Automatic Instrumentation: Built-in support for popular libraries and frameworks like Express, Fastify, and HTTP modules
Manual Instrumentation: Custom spans and metrics for your specific business logic
Cross-Platform: Works seamlessly in both Node.js and browser environments
Vendor Neutral: Send data to any OpenTelemetry-compatible backend including Uptrace
Performance Optimized: Minimal overhead on your applications with configurable sampling

What you'll learn

This documentation covers everything you need to implement OpenTelemetry in your JavaScript applications:

Tracing: Capture distributed traces to understand request flows across microservices
Metrics: Collect performance and business metrics for monitoring application health
Resource Detection: Automatically detect and configure resource attributes for your environment
TraceParent Header: Handle distributed tracing headers for cross-service communication

Querying your data in Uptrace

Once you've instrumented your application, you can query spans and logs in Uptrace using:

Span Search: Filter traces by service name, operation name, duration, and custom attributes
Log Search: Search logs by message content, severity level, and associated trace context
Advanced Filters: Use SQL-like queries for complex data analysis and aggregation
Correlation: Navigate between related spans and logs seamlessly using trace IDs
Performance Analysis: Identify bottlenecks and optimize your application performance

Verifying your setup

After configuration, your application will automatically start sending telemetry data to Uptrace. To verify the setup:

Start your application with the new configuration
Generate activity by making HTTP requests, database queries, or triggering your instrumented code paths
Check the Uptrace dashboard for incoming traces within 1-2 minutes
Review trace details to ensure spans are being created with proper attributes and timing

Troubleshooting

If traces don't appear in Uptrace:

Verify DSN: Double-check your Uptrace DSN in the configuration
Check connectivity: Ensure your application can reach the Uptrace endpoint
Review logs: Look for OpenTelemetry error messages in your application logs
Test configuration: Use the console exporter for local testing and debugging