Is it possible to log client-side requests?

[gkatsanos]

In our application, some of the HTTP calls done are server-side (asyncData / page level) but others client-side (mounted hook, created hook, fetch hook). How would the latter be logged with winston? Is it possible?

[aaronransley]

Hi @gkatsanos, I've had good success creating a Nuxt serverMiddleware to proxy logs to the Winston process on the backend. You can then call this new endpoint from your client-side code (e.g. using fetch against a new endpoint like /log or similar).

I believe (but am by no means certain!) that the Nuxt context is passed to serverMiddlewares (though I am not sure in which argument), so you could then reach into context.$winstonLog to write logs from the server-side.

If you can't figure out how to access the Nuxt context from a serverMiddleware, you could also try reaching into the process global where winston is instanced; process.winstonLog.

Let me know how it works out for you!

[gkatsanos]

sorry as I'm relatively new to the field of logging.. we're using Datadog actually as logging solution and there's a browser integration for it : https://docs.datadoghq.com/logs/log_collection/javascript/ I also noticed that simply console.log ing calls (for example in our Axios interceptors) does forward it to Datadog (it catches all STDOUT/STDERR) . In this scenario what would the advantage of using winston/nuxt-winston be? (I'm not saying there's no advantage but there's probably stuff I'm missing out here)

[aaronransley]

Oh great, we're in a similar boat at the agency where I work - Datadog for browser log collection, winston for backend log collection, then they both end up in the same Datadog dashboard.

So the value here is really serverside logging support. Having the ability to write to actual log files on a server, then having the Datadog agent come along and ingest those is beneficial in some cases. Similarly, more can be done with logfile rotations, etc. Another example is logging during a store's nuxtServerInit or other serverside exclusive code, where the browser never enters the equation.

In case it's helpful, I have an unreleased Datadog browser log collection + Nuxt module integration here, you're welcome to try and use this to ease the use of DD_LOGS in Nuxt/Vue!

Module: datadog-browser.zip FYI: lodash and vue are dependencies for this module. Note: Super untested, app specific code. You may need to pull out some $prismic specific stuff, etc.

[gkatsanos]

@aaronransley :) I'm using console.log actually now without any additional stuff besides using Nuxt's

consola.setReporters([
  {
    log: (e) => {
      process.stdout.write(`${JSON.stringify(...e.args)}\n`)
    },
  },
])

in my nuxt.config.js and it actually works :)

[aaronransley]

That's great to hear, sometimes stdout is just what you need :)

I'm going to close this issue for now, sounds like you're on the right track. Let me know if you have further questions!