Recommended logging package or framework

[jaybytez]

New to the framework and understand there are portions that run on the server vs on the client and didn't know if there was a recommended logging framework that works best?

Starting to mess with Winston which seems to work on server-side code but once I through it into a component, it throws errors looking for an 'fs' dependency.

Any suggestions would be greatly appreciated.

[jamesmosier]

I've used debug for both client & server console logging in the past with Next.

Otherwise if you want to log to a file, you'll only be able to do this in any of the functions that run on the server (for example getServerSideProps).

[jaybytez]

Are there any good examples of Next using a logger like debug for both client & server and using a file on the server logging?
I am in the process of trying to use Winston and Next.js keeps complaining about fs when I include a file transport. I created two loggers (one Console only and one for File only). In my component, I only use the Console only and I still get errors in the Component related to the filesystem:

error - ./node_modules/winston/dist/winston/tail-file.js
Module not found: Can't resolve 'fs' in 'D:\\master\node_modules\winston\dist\winston'
TypeError: utils_logger__WEBPACK_IMPORTED_MODULE_6___default.a.info is not a function
    at getStaticPaths (D:\\master\.next\server\pages\[...slug].js:7324:55)
    at buildStaticPaths (D:\\master\node_modules\next\dist\build\utils.js:17:86)
    at Object.loadStaticPaths (D:\\master\node_modules\next\dist\server\static-paths-worker.js:8:140)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  type: 'TypeError'

[miguel9554]

@jaybytez I just started using winston and it worked OK. Do you still have that problem? Can you expand on how you are creating the logger and using it?

[jaybytez]

I tried out using the main 3 that seem to get discussed (winston, bunyan, pino).
For context, part of where I am probably stumbling is that one file contains both client/server. So the distinction of what you log in those specific functions, and how are getStaticProps/getStaticPaths utilized when SSG and fallback=true and revalidate.

In this context, I used Winston which worked very well for server-side logging. But once I tried to use it for client-side logging, even with Winston Browser, it didn't work at all. The problem I was seeming to have is that I even tried to use Winston BrowserConsole relies on Winston which pulls in 'fs'. Unfortunately for a newbie, this really isn't defined well, but there are some posts on Next.js about the fact that you cannot use any library with a dependency on 'fs': (#14450) and therefore I couldn't use Winston on the client side. Here is my logger:

`import { createLogger, format } from 'winston';
import BrowserConsole from 'winston-transport-browserconsole';

const clogger = createLogger({
level: 'debug',
format: format.combine(
format.timestamp({
format: 'YYYY-MM-DD HH:mm:ss',
}),
format.errors({ stack: true }),
format.splat(),
format.json()
),
defaultMeta: { service: 'your-service-name' },
transports: [
new BrowserConsole({
format: format.simple(),
level: 'debug',
}),
],
});

export default clogger;`

If I import this into a Page and don't even use it, just import it, I get an error:

error - ./node_modules/winston/dist/winston/tail-file.js:9:0 Module not found: Can't resolve 'fs'

Where both Bunyan and Pino worked. Pino had distinct loggers I would create (one for client and one for server) since they don't support multiple destinations (without using an additional module that would have a performance hit). Bunyan, I was able to create a client logger that just goes to console and a server logger that goes to console and file...and this worked within the page component for the client logger and the server logger worked in getStaticProps/getStaticPaths.

[cheildo]

Add this to your next.config.js file. It should works

future: {
webpack5: true, // by default, if you customize webpack config, they switch back to version 4.
// Looks like backward compatibility approach.
},
webpack(config) {
config.resolve.fallback = {
...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
// by next.js will be dropped. Doesn't make much sense, but how it is
fs: false, // the solution
};
return config;
},

[j-joker]

Add this to your next.config.js file. It should works

future: { webpack5: true, // by default, if you customize webpack config, they switch back to version 4. // Looks like backward compatibility approach. }, webpack(config) { config.resolve.fallback = { ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified // by next.js will be dropped. Doesn't make much sense, but how it is fs: false, // the solution }; return config; },

but this will include winston in client side bundle

[jaybytez]

I was able to resolve this by using Pino for client (I could have used this on the server) and also using Winston (but just for server). Winston would not work for me in client logging because it appears to full in the 'fs' library and this causes errors in the client portions of the code. I was able to get Bunyan working in the client but Pino was just cleaner.

[Manikanta-20]

@jaybytez
Please Provide logger repo?

[leerob]

Check out Pino + Logflare -> https://github.com/Logflare/pino-logflare-nextjs-vercel-example

[mryechkin]

Is Pino + Logflare still the recommended pairing these days? That example above hasn't been updated since Next v9, and I'm having a hard time getting it to run in a new project (Next v11)

[GorvGoyl]

Updated url: https://github.com/Logflare/next-pino-logflare-logging-example

[sgharms]

Hey @jaybytez , following your path here. Same issue with 'fs', same "Huh, well Pino seems next best." I'm seeing the issue in the Next middleware function. For those who google to this waypoint, let me link you: #33866

[aman-godara-ria]

We were looking for an isomorphic logging solution so that a developer doesn't have to care whether they are logging on the client side or server side.

We used log-level and loglevel-remote-plugin with it (to push batch of logs generated on client side to server)

[gpremnat]

Hi, I configured Pino logger to support both client and server on nextJS. While the application is running smoothly. I am trying to lo to Datadog from nextJS. But my logs are not flowing to DD . I cant see any logs received by my pod. I have logger.ts in utils and tracer.init({}) initialized in layout.tsx file. What different I should be doing to get it working?