How to log nuxt server side network requests?

Question

Is there some way how to log all network requests which are done by nuxtjs on server side?

I'm already using node --inspect to enable chrome console, but network tab is missing there.

Thanks a lot for any tip.

Answer 1

I'm using axios nuxt plugin (https://axios.nuxtjs.org).

I've created a plugin to extend it (https://axios.nuxtjs.org/extend.html):

export default ({$axios, store}) => {
  $axios.onResponse(response => {
    console.log(`[${response.status}] ${response.request.path}`);
  });

  $axios.onError(err => {
    console.log(`[${err.response && err.response.status}] ${err.response && err.response.request.path}`);
    console.log(err.response && err.response.data);
  })
}

• onError() logs errored requests
• onResponse() logs successfull requests

Here is a sample output:

[200] /dashboard/rights/user
[200] /dashboard/rights/segment
[200] /dashboard/user/me
[400] /group/entries?group_id=undefined
{ status: 'error',
  codeStatus: 400,
  detail:
   [ { message:
        '"group_id" with value "undefined" fails to match the valid object id pattern',
       path: 'group_id',
       type: 'string.regex.name' } ] }

Hope it helps

Answer 2

FWIW, I didnt have much luck with either approach in the other answers. What eventually worked for me was adding a ssr: false to nuxt.config.js to make it a SPA instead of an SSR and debugging on the browser console.‍♂️

Answer 3

Adding on to Nicolas' solution.

Once you created the axios plugin in your Nuxt app, you could add it to your Nuxt config file and set the mode to server as you want to run it on server-side.

More on Nuxt plugin here.

plugins: [
    { src: '~/plugins/axios', mode: 'server' },
]

Answer 4

If I understand the question correctly, you want to log the requests served by your nuxtjs app in server side rendering mode.

Therefore, Axios is not the answer because it is used to make requests, not serve them.

The challenging part is figuring out how to get into the server rendering part. I have the same requirement and have decided to make the nuxtjs middleware and use Express as my server. Then I configure logging in Express. This works well for me because I can add other routes, e.g. healthcheck endpoint.

This Nuxtjs doc suggests that this an expected pattern: https://nuxtjs.org/docs/internals-glossary/nuxt-render