dash0/agent-skills
Expert guidance for configuring and deploying the OpenTelemetry Collector. Use when setting up a Collector pipeline, configuring receivers, exporters, or processors, deploying a Collector to Kubernetes or Docker, or forwarding telemetry to Dash0. Triggers on requests involving collector, pipeline, OTLP receiver, exporter, or Dash0 collector setup.
100
100%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Advisory
Suggest reviewing before use
browser.mdskills/otel-instrumentation/rules/sdks/
- title:
- Browser Instrumentation
- impact:
- HIGH
- tags:
- browser, web, frontend, rum
Browser Instrumentation
Instrument web applications to monitor performance, user sessions, requests, and errors.
Use Cases
- Real User Monitoring (RUM): Capture actual user performance metrics including page load times and resource loading
- Frontend Performance Analysis: Identify bottlenecks in network requests, script execution, and rendering
- Error Tracking: Capture uncaught JavaScript errors and promise rejections
- End-to-End Tracing: Connect frontend interactions with backend traces
- Custom Instrumentation: Monitor specific user interactions or business logic workflows
Option 1: Dash0 SDK Web (Recommended)
100% open source. Designed to work with Dash0. Simplest setup with sensible defaults.
Prerequisites
- OTLP Endpoint: Your observability platform's HTTP endpoint
- In Dash0: Settings → Organization → Endpoints → "OTLP via HTTP"
- Format:
https://<region>.your-platform.com
- Auth Token: API token for telemetry ingestion
- In Dash0: Settings → Auth Tokens → Create Token
Security: Browser auth tokens are exposed in client code. Use a dedicated auth token with:
- Limited dataset access
Ingestingpermissions only- No access to sensitive data or admin functions
Installation
npm install @dash0/sdk-webInitialization
Initialize as early as possible in your application:
import { init } from '@dash0/sdk-web';
init({
serviceName: 'my-frontend',
endpoint: {
url: 'https://<OTLP_ENDPOINT>',
authToken: 'YOUR_AUTH_TOKEN',
},
});For Next.js, use the instrumentation-client.js file.
Features
Auto-instrumentation captures without code modifications:
- Page loads and navigation timing
- Fetch/XHR requests with trace propagation
- User sessions
- JavaScript errors and promise rejections
Customization
// Add custom attributes
import { addAttributes } from '@dash0/sdk-web';
addAttributes({ 'user.tier': 'premium' });
// Identify users
import { setUser } from '@dash0/sdk-web';
setUser({ id: 'user-123' });
// Report custom errors
import { reportError } from '@dash0/sdk-web';
reportError(new Error('Custom error'));
// Send custom events
import { sendEvent } from '@dash0/sdk-web';
sendEvent('checkout.completed', { order_id: '123' });Resources
Option 2: OpenTelemetry JS SDK
OpenTelemetry's official SDK for browser instrumentation. Use when you need fine-grained control.
Note: Currently experimental.
Installation
npm install @opentelemetry/api \
@opentelemetry/sdk-trace-web \
@opentelemetry/auto-instrumentations-web \
@opentelemetry/exporter-trace-otlp-httpFor bundling (Rollup example):
npm install --save-dev rollup @rollup/plugin-node-resolve rollup-plugin-commonjsAdd to package.json:
{ "type": "module" }Initialization
Create instrumentation.js:
import {
WebTracerProvider,
BatchSpanProcessor,
} from '@opentelemetry/sdk-trace-web';
import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
const provider = new WebTracerProvider();
provider.addSpanProcessor(
new BatchSpanProcessor(
new OTLPTraceExporter({
url: 'https://<OTLP_ENDPOINT>/v1/traces',
headers: { Authorization: 'Bearer YOUR_AUTH_TOKEN' },
}),
),
);
provider.register();
registerInstrumentations({
instrumentations: [getWebAutoInstrumentations()],
});Bundling
Create rollup.config.js:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'src/instrumentation.js',
output: { file: 'dist/index.js', format: 'iife' },
plugins: [resolve(), commonjs()],
};Build:
npm run buildHTML Integration
<script src="dist/index.js"></script>Testing
Open your website in a browser. Network tab will show calls to the Dash0 ingestion API.
Resources
Browser-to-Server Correlation
To connect frontend traces with backend traces:
1. Configure Trace Propagation
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
new FetchInstrumentation({
propagateTraceHeaderCorsUrls: [/api\.yoursite\.com/],
});2. Backend CORS Configuration
app.use(
cors({
allowedHeaders: [
'Content-Type',
'Authorization',
'traceparent',
'tracestate',
],
}),
);