winston logger not working in middleware

[axelvaindal]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64
    Binaries:
      Node: 16.14.2
      npm: 8.5.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.4.4
      eslint-config-next: 13.4.4
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesanboxisnotworkingproperly.com

To Reproduce

How to reproduce:

1. npm install --save winston
2. Create a logger and import it in middleware.js
3. try to log in your middleware

Describe the Bug

Winston relies on colors which relies dependencies that only works on runtime: nodejs.

It seems middleware.js relies on Edge Runtime (if not mistaken), and thus is missing some core nodejs dependencies that are required by dependencies of winston (notably @colors/colors).

Importhing these dependencies and trying to run them breaks.

See: DABH/colors.js#41

Expected Behavior

A way to opt-out of edge runtime in middleware to allow dependencies to work inside middleware.js.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[theDanielJLewis]

I've observed this, too.

@axelvaindal, did you find any workaround or a replacement logger?

[axelvaindal]

Unfortunately no. My hands are kinda tied because winston interacts very nicely with GCP, so I wasn't in favour of using another module. In consequence, I've mostly stopped using middleware as much as I could.

[theDanielJLewis]

Pino seems to be working for me.

[aylton-almeida]

Is there any update on this? I'd love to improve logging in my middleware

[nachten]

Would love to see this working also ... or provide something out of the box with some more configuration options ? e.g. structured logging ?

[denisrudov]

still doesn't work because of edge runtime 😢

[naishe]

I haven't tried this yet, going to try this weekend but there's a workaround suggested on Winston repo: winstonjs/winston#2327 (comment) with a caveat. They suggested adding the following block to package.json:

"overrides": {
  "@colors/colors": "1.6.0"
},

[guscsales]

I haven't tried this yet, going to try this weekend but there's a workaround suggested on Winston repo: winstonjs/winston#2327 (comment) with a caveat. They suggested adding the following block to package.json:

"overrides": {
  "@colors/colors": "1.6.0"
},

This should work on next before v13, after it continues not working since winston uses Node.js resources

[Lewischarlton93]

Thought it might be useful for some people - A workaround (Until they sort the issue with edge runtime) to get Winston logger working in NextJS13+ is to set some headers on the response in the middleware, and then call your logger method in the root Layout file (src/app/layout.tsx). Using Pathname as an example, but you should use the built in { params } prop to get that.

Here's how you might go about it:

Middleware.ts:

import { NextResponse } from 'next/server'
import { NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
  const method = request.method
  const url = request.url
  const pathname = new URL(url).pathname

  const response = NextResponse.next({
    request: {
      headers: requestHeaders
    }
  })
  response.headers.set('x-method', method)
  response.headers.set('x-pathname', pathname)

  return response
}

src/app/layout.tsx
import { headers } from 'next/headers'
import { headersToObject } from '@/utils/Formatting/Utils'
import logger from '@/utils/Logging/Logger'

const headersToObject = (headers: Headers): { [key: string]: string } => {
  const result: { [key: string]: string } = {}
  headers.forEach((value, key) => {
    result[key] = value
  })
  return result
}

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
}>) {
  const reqHeaders = headers()
  const method = reqHeaders.get('x-method')
  const urlPath = reqHeaders.get('x-pathname')
  const headersForLogging = headersToObject(reqHeaders)

  if (urlPath !== '/health/') {
    logger.info('request made....', {
      method,
      url: urlPath,
      requestHeaders: headersForLogging
    })
  }

  return (
    ...
  )
}

It was fine for my use case at least anyway :)

[theDanielJLewis]

Thanks! This is handy, but then you also have to build in the logging into all route handlers.