DevTools UI

When devtools are enabled (devtools: true in nuxtOtel config), the module provides a built-in UI for browsing traces and logs in real time.

Browse traces

The Traces view shows a resizable split panel with a trace list on the left and a waterfall timeline with span details on the right.

Each trace shows:

• Duration — Total execution time
• Spans — Number of spans in the trace
• Service — The service that generated the trace
• Timeline — Waterfall visualization of span hierarchy

Browse logs

The Logs view provides a scrollable list of log entries with expandable metadata.

Each log entry shows:

• Timestamp — When the log was emitted
• Severity — Color-coded severity badge (info, warn, error)
• Body — The log message
• Attributes — Expandable key-value metadata

Forward data from a custom SDK

When using a custom instrumentation setup, forward spans and logs to the DevTools UI by exporting to the OTLP HTTP endpoint:

{devServerUrl}/__nuxt-otel-ingest

The endpoint accepts both trace and log OTLP JSON payloads (/v1/traces and /v1/logs).

Next steps

• Configure the module
• Add manual instrumentation