Changing log format to JSON

[gkatsanos]

Is your feature request related to a problem? Please describe.

As many production grade nuxt apps use solutions like DATADOG and others to monitor their apps, json log formatting seems to be required to be able to parse logs correctly.

Would it be possible to change the consola configuration to switch to JSON logging?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

[pi0]

Hi @gkatsanos. Yes actually it is possible changing consola reporters. One simple usage is within nuxt.config:

import consola from "consola";

consola.setReporters([
  {
    log: (e) => {
      process.stdout.write(JSON.stringify(e) + "\n");
    }
  }
]);

export default {};

Example output:

{"date":"2020-12-17T10:25:18.086Z","args":["homepage fetch..."],"type":"info","level":3,"tag":""}

Remarks:

• We should directly use process.stdout or process.stderr because nuxt uses consola wrapper to spy on all console calls. This way way watch everything
• It would be better if you can use addReporter to make a reporter to write logs to a file or send to logging endpoint
• You may filter based on type,level,tag

[gkatsanos]

@pi0 thank you, one clarification I'd like: Can I use consola, winston, or simply process.stdout (or other NodeJS loggers) inside the Vue components as well ? (since Nuxt provides also the Node context)

[pi0]

Can I use consola, winston, or simply process.stdout (or other NodeJS loggers)

Yes you can use winston as well example integration

inside the Vue components

Yes but it only works for server-side errors. If you want a complete error logging solution, i would suggest using something like sentry-module or a nuxt plugin to integrate with loggers.

[gkatsanos]

@pi0 Sorry just to come back to JSON logging, I see in https://github.com/nuxt-contrib/consola#reporters-1 that there's a built in JSON Reporter, can I use this one instead? How would I pass this in Nuxt.config?

[pi0]

Actually you can also use default JSON reporter but i'm afraid you might want to do some filtering/output aligning which is easier if do it yourself but can also use it like this:

import consola from "consola";

consola.setReporters([ new consola.JSONReporter() ]);

export default {};

[gkatsanos]

but i'm afraid you might want to do some filtering/output aligning

what kind?

[pi0]

Like merging args array

[gkatsanos]

Following up on this one, I created a custom plugin to make consola available in the scope of my Nuxt app, like so:

// plugins/consola.js
import consola from 'consola'

export default (_, inject) => {
  consola.setReporters([ new consola.JSONReporter() ])

  inject('logger', msg => consola.log(msg))
}

which I use inside my asyncData() hook in a page:

  async asyncData({ store, route, error, app, redirect }) {
    try {
      app.$logger({ message: 'test', level: 6 })
      // calls to API 
     } catch(e) {
       // error handling 
     }
   }

I get the log but I also get an error :

TypeError: consola__WEBPACK_IMPORTED_MODULE_4___default.a.JSONReporter is not a constructor

[pi0]

Browser build of consola does not includes json reporter nor is designed for this purpose. You may use custom reporter method to implement it.