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

packages/vue-app/template/client.js

@@ -18,6 +18,7 @@ import {
 } from './utils.js'
 import { createApp, NuxtError } from './index.js'
 import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client" : "server" %>.js' // should be included after ./index.js
+<% if (isDev) { %>import consola from 'consola'<% } %>
 
 // Component: <NuxtLink>
 Vue.component(NuxtLink.name, NuxtLink)
@@ -36,6 +37,12 @@ const NUXT = window.<%= globals.context %> || {}
 
 Object.assign(Vue.config, <%= serialize(vue.config) %>)<%= isTest ? '// eslint-disable-line' : '' %>
 
+<% if (isDev) { %>
+const logger = consola.withScope('nuxt:ssr')
+const logs = NUXT.logs || []
+logs.forEach(logObj => logger[logObj.type](logObj))
+delete NUXT.logs
+<% } %>
 <% if (debug) { %>
 // Setup global Vue error handler
 if (!Vue.config.$nuxt) {

packages/vue-app/template/server.js

@@ -1,4 +1,5 @@
 import { stringify } from 'querystring'
+import consola from 'consola'
 import Vue from 'vue'
 <% if (fetch.server) { %>import fetch from 'node-fetch'<% } %>
 import middleware from './middleware.js'
@@ -12,9 +13,6 @@ Vue.component('NLink', NuxtLink)
 
 <% if (fetch.server) { %>if (!global.fetch) { global.fetch = fetch }<% } %>
 
-const debug = require('debug')('nuxt:render')
-debug.color = 4 // force blue color
-
 const noopApp = () => new Vue({ render: h => h('div') })
 
 const createNext = ssrContext => (opts) => {
@@ -66,11 +64,13 @@ export default async (ssrContext) => {
   const beforeRender = async () => {
     // Call beforeNuxtRender() methods
     await Promise.all(ssrContext.beforeRenderFns.map(fn => promisify(fn, { Components, nuxtState: ssrContext.nuxt })))
+    ssrContext.rendered = () => {
     <% if (store) { %>
       // Add the state from the vuex store
       ssrContext.nuxt.state = store.state
     <% } %>
     }
+  }
   const renderErrorPage = async () => {
     // Load layout for error page
     const errLayout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(app.context) : NuxtError.layout)
@@ -85,7 +85,7 @@ export default async (ssrContext) => {
     return renderErrorPage()
   }
 
-  <% if (isDev) { %>const s = Date.now()<% } %>
+  <% if (debug) { %>const s = Date.now()<% } %>
 
   // Components are already resolved by setContext -> getRouteData (app/utils.js)
   const Components = getMatchedComponents(router.match(ssrContext.url))
@@ -98,7 +98,7 @@ export default async (ssrContext) => {
     try {
       await store.dispatch('nuxtServerInit', app.context)
     } catch (err) {
-      debug('error occurred when calling nuxtServerInit: ', err.message)
+      consola.debug('Error occurred when calling nuxtServerInit: ', err.message)
       throw err
     }
   }
@@ -219,7 +219,7 @@ export default async (ssrContext) => {
     return Promise.all(promises)
   }))
 
-  <% if (isDev) { %>if (asyncDatas.length) debug('Data fetching ' + ssrContext.url + ': ' + (Date.now() - s) + 'ms')<% } %>
+  <% if (debug) { %>if (asyncDatas.length) consola.debug('Data fetching ' + ssrContext.url + ': ' + (Date.now() - s) + 'ms')<% } %>
 
   // datas are the first row of each
   ssrContext.nuxt.data = asyncDatas.map(r => r[0] || {})

packages/vue-renderer/src/renderers/ssr.js

@@ -1,6 +1,7 @@
 import path from 'path'
 import crypto from 'crypto'
 import fs from 'fs-extra'
+import consola from 'consola'
 import devalue from '@nuxt/devalue'
 import { createBundleRenderer } from 'vue-server-renderer'
 import BaseRenderer from './base'
@@ -37,12 +38,30 @@ export default class SSRRenderer extends BaseRenderer {
     )
   }
 
+  async devRenderToString(renderContext) {
+    const logs = []
+    const devReporter = {
+      log(logObj) {
+        if (logObj.args[0] instanceof Error) {
+          logObj.args[0] = logObj.args[0].stack
+        }
+        logs.push(logObj)
+      }
+    }
+    consola.addReporter(devReporter)
+    const APP = await this.vueRenderer.renderToString(renderContext)
+    consola.removeReporter(devReporter)
+    renderContext.nuxt.logs = logs
+
+    return APP
+  }
+
   async render(renderContext) {
     // Call ssr:context hook to extend context from modules
     await this.serverContext.nuxt.callHook('vue-renderer:ssr:prepareContext', renderContext)
 
     // Call Vue renderer renderToString
-    let APP = await this.vueRenderer.renderToString(renderContext)
+    let APP = await (this.options.dev ? this.devRenderToString(renderContext) : this.vueRenderer.renderToString(renderContext))
 
     // Call ssr:context hook
     await this.serverContext.nuxt.callHook('vue-renderer:ssr:context', renderContext)