Custom logger for Server Errors

[Marcosld]

Hello,

With the new app folder Server Side errors are captured and logged in the backend and a digest is sent to the frontend to be able to match the corresponding error in Server Logs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#securing-sensitive-error-information.

Currently, the error is logged in the backend as plain text, but we would like to capture the error to be able to send it to our elastic stack. Even logging it to the console but with JSON format would be enough for us, as we automatically capture those logs and save them.

Is it possible to achieve this kind of behaviour? Can we change the Server Side log? Can we capture the Server Side error?

[nmiddendorff]

Hey @Marcosld, our team had a very similar issue until I discovered the experimental.instrumentationHook. You can use this hook in combination with next-logger to console.log JSON rather than plain text. The JSON object even contains the log level and stack trace.

Steps

1. Install package:

npm install next-logger

2. (Option 1) - using standard output

Simply add NODE_OPTIONS to start command:

NODE_OPTIONS='-r next-logger' next start

2. (Option 2) - using output: 'standalone'

If you are specifying output: 'standalone' in your next.config you will need to add an instrumentationHook to ensure that the next-logger module is available at runtime. Without it you will run into the following issue. Note: you do not need to specify the NODE_OPTIONS argument when using the instrumentationHook.

Set experimental.instrumentationHook to true

// next.config.js
module.exports = {
  ...
  experimental: {
    ...
    instrumentationHook: true,
  },

Create instrumentation.js file

export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await require('pino');
    await require('next-logger');
  }
}

3. Output

This should change the logging output to something like this:

{
  "level": 50,
  "time": 1705422263578,
  "pid": 79328,
  "hostname": "xx",
  "name": "console",
  "err": {
    "type": "TypeError",
    "message": "Cannot read properties of undefined (reading 'replace')",
    "stack": "TypeError: Cannot read properties of undefined (reading 'replace')\n    at e.exports (/Users/xx/Developer/sample-app/.next/standalone/.next/server/chunks/643.js:12:102839)\n    at t.getBrowserConfig (/Users/xx/Developer/sample-app/.next/standalone/.next/server/chunks/643.js:12:100102)\n    at u (/Users/xx/Developer/sample-app/.next/standalone/.next/server/app/blog/page.js:2:102)\n    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)"
  },
  "msg": "Cannot read properties of undefined (reading 'replace')"
}

If you need to customize this output like rename a field or flatten the child object you can add a next-logger.config.js and create a custom logger using Pino.

[Marcosld]

Seems right, I'll take a look at this solution! <3

[Yimiprod]

Is the instrumentation hook really necessary ?
next-logger seem to work out of the box, like you explained, with:

NODE_OPTIONS='-r next-logger' next start

[nmiddendorff]

Good callout, @Yimiprod. The instrumentation hook is only necessary when using https://nextjs.org/docs/app/api-reference/next-config-js/output in your next.config. Without the instrumentation hook the Next.js build process will strip out next-logger and pino which leads to the following error:

Error: Cannot find module '/app/NODE_OPTIONS='-r next-logger''

sainsburys-tech/next-logger#13

If you're not using the standalone output and can get by just using the NODE_OPTIONS argument I would keep it simple. I will update my answer to reflect that.

[Netail]

next-logger does feel like a hacky temporarily solution. (Which even breaks when stuff gets moved around in output/log.ts or the entire file gets moved) There should be an easier way to add a custom logger, which is why I created the following proposal; #63787

[theogravity]

If you want an alternative to next-logger that will let you use other loggers and cloud providers (like DataDog), see my example impl:

#63787 (comment)