How do you integrate DataDog with NextJS server without custom server like express or koa.

[jimin4]

I am trying to rely on NextJS built-in server as much as possible without relying on an external server like express or koa. When I looked at integrating DataDog and NextJS server, all the examples use hooking up middleware that performs tracing to DataDog. This is one of the blogs that explains that.

How could I integrate DataDog with built-in NextJS server?

[stolenng-investing]

I Don't think they support it :/

[kvedantmahajan]

As per RFC, https://github.com/vercel/next.js/discussions/9081 they say don't fall out of pit of success. If this is not supported then you should make custom server examples as the default documentation. Because, all serious production level applications will need APM instrumentation.

[chenrui333]

Any update on this issue?

[kelly-tock]

bump, I am hoping that in the roadmap there are plans for a few integrations:
- integrations for popular apm solutions like datadog, new relic, etc
- integrations for popular error reporting tools like sentry and rollbar
- or in lieu of that, something in next.config or somewhere where you can inject some code to run before setup, or as middleware, or a plugins architecture like hapi

the next cli is so nice, and it would be a shame to have to do custom server for these common things.

[nmkettler]

Not sure if you've tried this yet but we are temporarily using this workaround until we can come up with a better solution or support is added. This way, we can keep all of the NextJS goodies and not bother with a custom server.

https://jake.tl/notes/2021-04-04-nextjs-preload-hack

So with our setup, we're running this as our start script: node ./server-preload.js && next start -p 8000

[guillermoFLM]

This is really clever workaround! thanks!

[stubar]

I've come to this discussion as I need similar support for New Relic. A closed github issue here newrelic/node-newrelic#295 gives a few pointers on how to do this without going down the custom server route but I'm not sure if it's working for everyone. I've managed to get it working as suggested where you alter the package.json scripts to pre load something before running Next --> node -r newrelic node_modules/.bin/next start.

I think I may have achieved the same thing by simply requiring the newrelic module at the top of next.config.js this is a lot more elegant than changing the launch commands I think, and it seems to work. It almost seems too simple considering all the posts from folks who are struggling.

[FelipeLahti]

@stubar were you able to load newrelic in next.config.js? I'm trying something similar with Datadog but no lucky so far...

[stubar]

yes that approach worked

[serg06]

@stubar Can you clarify how you modified package.json? Was it just changing the "start" command from "next start" to what you listed above?

[stubar]

No I didn't edit the package.json start command. I'm not working on said project anymore nor do I use Next, I was using this back on v11.1 not sure if it would still work. I just checked the next.config.js file and the 1st line is require('newrelic');. Hope that helps.

[davscro]

Maybe this is possibile now with _middleware? 🤔
https://nextjs.org/docs/middleware

[ristomatti]

This didn't seem to work. Datadog's dd-trace calls Node.js API's which aren't available inside Next.js middlewares.

[jhanke00]

Something that I have done was to use the NODE_OPTIONS=-r dd-trace/init which NextJS understands as node options to next commands using the CLI.

DataDog also specifies that you can run via CLI: https://docs.datadoghq.com/tracing/trace_collection/dd_libraries/nodejs/?tab=containers#adding-the-tracer-via-command-line-arguments.

NextJS specifies in their documentation about their CLI: https://nextjs.org/docs/api-reference/cli.

# Specify Node Options
export NODE_OPTIONS='-r dd-trace/init'

# Specify DataDog Tracer Configurations
export DD_LOGS_INJECTION=true
export DD_RUNTIME_METRICS_ENABLED=true

# Run NextJS Command
next start

You will have to configure the DataDog tracer through environment variables: https://docs.datadoghq.com/tracing/trace_collection/library_config/nodejs/

[jmrtnz94]

@ristomatti, thanks for all the information! Do you mind sharing the generalizeUrl function?

[anant-aidora]

@jmrtnz94 @jhanke00 @ristomatti - Thanks for the discussion on this thread. Newbie question how do you get vercel deployments to send the traces & logs generated by dd-trace in the above setup? Is it using the vercel datadog integration in conjunction with the above setup?

[ristomatti]

@anant-aidora We're not on Vercel on this project but perhaps all you need to do is enable instrumentation in next.config.js: experimental.instrumentationHook = true. Vercel seems to be using Datadog itself https://github.com/search?q=repo%3Avercel%2Fnext.js+dd-trace&type=code

[anant-aidora]

Thanks @ristomatti for clarifying, will try to leverage Vercel's dd tracer.

[elijaholmos]

Couldn't get registration working with Nextjs 14.2.5 app router. Kept getting some cryptic error message during Dockerfile compilation: Error: invalid unicode code point at line 1 column 608543

[ristomatti]

@jmrtnz94 There's nothing much there. I can share a reduced version with project specific parts removed. Newer versions of dd-trace might do this automatically but at least at the time it didn't. The idea is to be able to get requests to dynamic URL's to group under the same endpoint by replacing the dynamic parts with a placeholder. Similarly as Datadog seemed to be doing to API endpoint URL's of services using Java/.NET based frameworks.

const queryMatcher = /^(.*)(\?.+)$/;
const nextDataHashMatcher = /^(\/_next\/data\/)[^/]+(.*)$/;
const localeMatcher = /^(.*)\/([a-z]{2})$/;

/**
 * Generalize URL to facilitate resource name grouping.
 * @param {string} requestUrl
 *
 * @see https://docs.datadoghq.com/tracing/configure_data_security/
 * @see https://docs.datadoghq.com/tracing/troubleshooting/quantization/
 **/
const generalizeUrl = (requestUrl) => {
  let url = requestUrl.replace(queryMatcher, '$1');

  // Strip cache-busting hash from Next.js page requests
  if (nextDataHashMatcher.test(url)) {
    return url.replace(nextDataHashMatcher, '$1{hash}$2');
  }

  // Replace locale with placeholder
  if (localeMatcher.test(url)) {
    url = url.replace(localeMatcher, '$1/{locale}');
  }

  return url;
};

[jmrtnz94]

Got it, thanks for sharing!

[pjerryhu]

Does this work for vercel serverless API too?

[wiliam-ento]

NOt work properly on Vercel Deployment