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.
Why Nuxt Needs Better Observability
Common debugging challenges that traditional monitoring tools miss.
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 TraceKit to your Nuxt project 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';What You Get with TraceKit
Everything you need to monitor Nuxt in production.
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
Docs, guides, and tools to help you get the most out of TraceKit.
Ready to debug Nuxt in production?
Start free and see distributed traces, live breakpoints, and error tracking in minutes -- no credit card required.