feat(vue-renderer/vue-app): report SSR console logs to the browser with consola

[atinux]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This feature is for development mode to improve the developer experience while developing.

Problem

Switching and looking at the terminal when you want to debug your Nuxt app by doing some console.log can be annoying. This can disturb newcomers to universal rendering.

Solution

In dev only, it copies the SSR logs to the browser and display them before mounting the Vue app.

This is how it look like when adding some logs to examples/hello-world/pages/index.vue:

asyncData() {
  console.log('Log')
  console.warn('Warning')
  console.error('Error')
  console.error(new Error('Aie'))
}

Result:

Checklist:

• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.
• fix(browser): use console.warn when possible unjs/consola#49

@clarkdo I would like your insight regarding the tests and the best place to test this feature.

[codecov-io]

Codecov Report

Merging #5673 into dev will decrease coverage by 0.09%.
The diff coverage is 72.72%.

@@            Coverage Diff            @@
##              dev    #5673     +/-   ##
=========================================
- Coverage   95.67%   95.57%   -0.1%     
=========================================
  Files          81       81             
  Lines        2635     2645     +10     
  Branches      671      673      +2     
=========================================
+ Hits         2521     2528      +7     
- Misses         96       98      +2     
- Partials       18       19      +1

Impacted Files	Coverage Δ
packages/vue-renderer/src/renderers/ssr.js	92.15% <72.72%> (-5.41%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2fd05e0...a1fc458. Read the comment docs.

[galvez]

YES! So simple, very nicely done @atinux :)

[galvez]

@atinux perhaps this could be an opt-in feature?

[kevinmarrec]

Great stuff @atinux, well done !

[clarkdo]

Do you think if this feature needs an extra option ? Maybe sth like: server.console: true|false|'info'|'warn'|'error'

If there is any user who is using dev mode in production or integration testing environment, this may be a risk for sensitive information leak.

About the test, I think it could be in fixture like base, ssr or with-config, and verify NUXT.logs in jsdom or html string

[atinux]

I added a PR to consola to support console.warn on the browser (unjs/consola#49).

@clarkdo I am not up to add another option for this, it's like for the loading-screen in dev.
They should not run nuxt dev in production in any way.
Thanks for the tests I will look into it 😄

[clarkdo]

@atinux Another thing comes into my mind is: Do we need to support messages from console as well ?

consola has already wrapped console function in dev mode

[pi0]

consola updated to 2.6.1 (#5674)

[atinux]

I could not find a quick way to check for logs since they are mocked in testing and catched by Jest.