Improve documentation of addReporter and setReporter

[gkatsanos]

I believe there's no examples of addReporter in the docs, and in general the logging mechanism could be explained a little more.
I created a consola Nuxt plugin, set the reporter to be FancyReporter, and then went on to use $consola.debug in my code. All worked as expected. Later, I set some $consola.error()s and the output was plaintext. I had to explicitely set the Reporter to JSONReporter above the $consola.error() calls to get them to log JSON.

[atinux]

Always up to improve documentation, if you see how it can be enhancement, feel free to open a PR 😊

[pi0]

Hi dear @gkatsanos. PR for improving docs is more than welcome.

BTW I again (nuxt/nuxt#8507 (comment)) consola is not meant to be used as logging infrastructure neither as a nuxt plugin for client-side. You might need to use error loggers like sentry or using same methods they use for custom error reporter implementation.

[gkatsanos]

Hi dear @gkatsanos. PR for improving docs is more than welcome.

BTW I again (nuxt/nuxt.js#8507 (comment)) consola is not meant to be used as logging infrastructure neither as a nuxt plugin for client-side. You might need to use error loggers like sentry or using same methods they use for custom error reporter implementation.

thank you :) let me explain the exact setup. We do have sentry in place as well as datadog, but when developping localhost we had some trouble picking up issues that happened server-side. I also wanted pretty-formatted JSON responses from these server-side requests. The idea was to re-use consola as it wouldn't add another dependency (comes with Nuxt) and make our bundle bigger.

Any recommendations welcome, as I can imagine my assumptions/solution isn't ideal?

[pi0]

but when developping localhost we had some trouble picking up issues that happened server-side

Unless using nuxt with programmatic usage, it should proxy SSR logs to browser (nuxt/nuxt#5810, nuxtjs-from-terminal-to-browser. Are there some logs missing?

The idea was to re-use consola as it wouldn't add another dependency (comes with Nuxt) and make our bundle bigger.

Actually the reason i was saying to not use in client-side is that nuxt does not adds consola to bundle. We only use it for fancier (NodeJS) cli outputs and ssr log proxy during dev.

I also wanted pretty-formatted JSON responses from these server-side requests

Would you please elaborate more about this? 1) What exact logs do you want to capture 2) Is it meant for dev or production environment and 3) Is the goal to replace fancy reporter to stdout/stderrr json reporter?

[gkatsanos]

Unless using nuxt with programmatic usage, it should proxy SSR logs to browser (nuxt/nuxt#5810, nuxtjs-from-terminal-to-browser. Are there some logs missing?

We wanted to log all Axios requests/responses and catch all errors in the asyncData() hook. This isn't logged by default:

  $axios.onResponse((response) => {
    app.$consola.debug(response)
  })

  $axios.onRequest((config) => {

    if (!config.url.includes('switcher.internal') && !config.url.includes('traffic-source')) {
      app.$consola.debug(config)
    }
})

  $axios.onResponseError((error) => {
    consola.setReporters([ new consola.JSONReporter() ])
    consola.error({ message: error.message, stack: error.stack })
    app.$sentry.withScope((scope) => {
      scope.setExtra('route', route)
      app.$sentry.captureException(error)
    })
  })

I hope the above helps to explain our setup :)

Actually the reason i was saying to not use in client-side is that nuxt does not adds consola to bundle. We only use it for fancier (NodeJS) cli outputs and ssr log proxy during dev.

The main goal is to log the Server-Side requests though.

Would you please elaborate more about this? 1) What exact logs do you want to capture 2) Is it meant for dev or production environment and 3) Is the goal to replace fancy reporter to stdout/stderrr json reporter?

1. see above
2. fancy JSON for dev + plain JSON for cloud logging (datadog)
3. any reporter is fine as long as it emmits JSON (so Datadog formats the logs properly and I can pretty-print them on my localhost console)

I hope I explained it fully!

[pi0]

I still can't understand how $consola instance is created but I think your solution is pretty good. Just need to use console.error(...)/console.debug(...) in axios interceptors and use json reporter for fancy/plain output which you can put it in nuxt.config :) (nuxt/nuxt#8507 (comment))

(BTW if still struggling, please DM me in discord. would be happy to take a look on project)

[JasonLandbridge]

@gkatsanos , could you post your consola plugin? I'm struggling to get it working

This is my attempt

import Vue from 'vue';
import Log from 'consola';

import { Context } from '@nuxt/types';

export default (ctx: Context): void => {
	// Setup logging
	Vue.config.devtools = !ctx.$config.isProduction;
	Vue.config.productionTip = false;
	Log.level = ctx.$config.isProduction ? 3 : 5;
	// @ts-ignore
	Log.setReporters([new Log.JSONReporter()]);

	Log.info(`Nuxt Environment: ${ctx.$config.nodeEnv}`);
};

I just keep getting the following error:
TypeError: consola__WEBPACK_IMPORTED_MODULE_5___default.a.JSONReporter is not a constructor

[pi0]

Hi dear @JasonLandbridge please see my original comment nuxt/nuxt#8507 (comment). Browser build of consola does not includes JSONReporter not is recommanded to use consola in a nuxt (client) plugin at least for logging infra integration purpose.