APM with Nuxt 3 SSR applications

[BridgeAR]

Discussed in https://github.com/DataDog/dd-trace-js/discussions/2726

^{Originally posted by nicolaspayot January 26, 2023} Hello!

I've been using dd-trace-js to enable DataDog APM with Nuxt 3 SSR applications. Here's what I've done so far, inside a server middleware:

import {defineEventHandler, H3Event} from 'h3';
import * as opentracing from 'opentracing';
import ddTrace from 'dd-trace';

const tracer = ddTrace.init({
    env: process.env.DD_ENV,
    hostname: process.env.DD_AGENT_HOST,
    logInjection: true,
    runtimeMetrics: true,
    startupLogs: true,
    profiling: true,
});

// Inspired by: https://github.com/opentracing-contrib/javascript-express/blob/master/src/middleware.js
export default defineEventHandler((event: H3Event) => {
    const {req, res} = event.node;

    const wireCtx = tracer.extract(opentracing.FORMAT_HTTP_HEADERS, req.headers);
    const pathname = new URL(req.url as string, `http://${req.headers.host}`).pathname;
    const span = tracer.startSpan(pathname!, {childOf: wireCtx!});
    span.setOperationName(pathname);

    // Include some useful tags on the trace
    span.setTag('http.method', req.method);
    span.setTag('span.kind', 'server');
    span.setTag('http.url', req.url);

    // Include trace ID in headers so that we can debug slow requests we see in the browser by looking up the trace ID found in response headers
    const responseHeaders: Record<string, string> = {};
    tracer.inject(span, opentracing.FORMAT_TEXT_MAP, responseHeaders);
    Object.keys(responseHeaders).forEach((key) => res.setHeader(key, responseHeaders[key]));

    // Add the span to the request object for handlers to use
    Object.assign(req, {span});

    res.on('finish', () => {
        span.setTag('http.status_code', res.statusCode);
        if (res.statusCode >= 500) {
            span.setTag('error', true);
            span.setTag('sampling.priority', 1);
        }
    });

    // Finalize the span when the response is completed
    res.on('close', () => {
        span.finish();
    });
});

This is working quite well to monitor page loads (through traces), however, there are not many details of what's happening internally. For example, if the page needs 700ms to load, there are no way at the moment to know why it takes that amount of time.

My first question would be: is this possible to have more information on the pages loads traces? Do I need to manually instrument some Nuxt internals?

And my second question: although profiling is enabled, nothing comes out inside the continuous profiler section on DataDog UI. Would you know by any means if something's missing in dd-trace configuration?

Thanks very much in advance

---

Commented on by @marr

@nicolaspayot were you able to make any progress on this? I am also wondering how to get client tracking working. I instrument dd_trace at app startup with:

DD_TRACE_STARTUP_LOGS=true node --max-http-header-size=64000 --require dd-trace/init .output/server/index.mjs But I'm not getting any client tracking. When I output the logs, I see: "runtime_metrics_enabled":false,"profiling_enabled":false So it seems that it's not picking up the DD_TRACE_ENABLED=true that is set in the runtime env.