Nuxt Observability with TraceKit
Nuxt splits your application across server middleware, Nitro engine routes, and Vue client plugins -- each with its own execution context. TraceKit traces all three layers so you can see where server processing ends and client hydration begins.
Nuxt observability challenges
Common problems that Nuxt developers face in production -- and how TraceKit solves them.
Server Middleware vs Client Plugin Separation
Nuxt server middleware and client plugins run in completely different environments with separate lifecycles. A bug that only appears during SSR but not in the client is hard to diagnose without server-side trace visibility. TraceKit instruments both layers independently so you can compare server and client execution paths.
Nitro Engine Server Route Tracing
Nuxt 3's Nitro engine handles server routes, API endpoints, and server middleware in a separate runtime from the Vue rendering pipeline. TraceKit traces Nitro's request handling so you can see exactly how server routes interact with the rendering layer.
Hydration Payload Debugging
Nuxt serializes server-fetched data into the HTML payload for client hydration. When the payload is large or contains unexpected data shapes, hydration can be slow or fail. TraceKit captures the server data fetching trace so you can correlate payload size with server-side query patterns.
Get started in minutes
Add OpenTelemetry instrumentation to your Nuxt app with a few lines of code.
// server/plugins/tracing.ts (Nuxt Nitro server)
const { NodeSDK } = require('@opentelemetry/sdk-node');
const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
const sdk = new NodeSDK({
instrumentations: [getNodeAutoInstrumentations()],
serviceName: 'my-nuxt-server',
});
sdk.start();
// Client-side: use a Nuxt plugin with TraceKit Vue SDK
// plugins/tracing.client.ts
// import { createTraceKit } from '@tracekit/vue';JavaScript Distributed Tracing Guide
Go deeper with our JavaScript distributed tracing guide -- covering common pain points, production patterns, and code examples.
What you get with TraceKit
Distributed Tracing
Trace requests across Nuxt server middleware, Nitro API routes, Vue components, and external services. Full visibility into the Nuxt SSR pipeline.
Live Code Monitoring
Set breakpoints in your Nuxt server routes and composables. Inspect useAsyncData results, server state, and API responses in production without redeploying.
Simple Pricing
$29/month flat for your entire Nuxt application. No per-route fees, no per-middleware charges -- one price for server and client observability.
Related Resources
Learn distributed tracing patterns and best practices for Node.js
Full-stack observability head to head. Compare error tracking, session replay, source maps, and distributed tracing.
Calculate SLA uptime and error budgets for your services
Step-by-step APM implementation checklist covering SDK installation, instrumentation, alerting, and production rollout with OpenTelemetry best practices.
Step-by-step guide to migrate from Datadog to TraceKit. Replace dd-trace with TraceKit SDK, map environment variables, and verify traces in minutes.
Ready to add observability to Nuxt?
Get started with TraceKit in under 5 minutes. $29/month flat -- no per-host fees, no surprises.