fix(nuxt): support serialising rich server logs (#26503)

nuxt · Mar 27, 2024 · fa9d437 · fa9d437
1 parent 8c3ddf7
commit fa9d437
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/...src/app/plugins/dev-server-logs.client.ts → ...s/nuxt/src/app/plugins/dev-server-logs.ts b/...src/app/plugins/dev-server-logs.client.ts → ...s/nuxt/src/app/plugins/dev-server-logs.ts
@@ -1,13 +1,19 @@
 import { consola, createConsola } from 'consola'
 import type { LogObject } from 'consola'
+import { parse } from 'devalue'
 
 import { defineNuxtPlugin } from '../nuxt'
 
 // @ts-expect-error virtual file
 import { devLogs, devRootDir } from '#build/nuxt.config.mjs'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  if (!import.meta.client || import.meta.test) { return }
+  if (import.meta.test) { return }
+
+  if (import.meta.server) {
+    nuxtApp.ssrContext!.event.context._payloadReducers = nuxtApp.ssrContext!._payloadReducers
+    return
+  }
 
   // Show things in console
   if (devLogs !== 'silent') {
@@ -43,8 +49,9 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   // pass SSR logs after hydration
   nuxtApp.hooks.hook('app:suspense:resolve', async () => {
-    if (typeof window !== 'undefined' && window.__NUXT_LOGS__) {
-      await nuxtApp.hooks.callHook('dev:ssr-logs', window.__NUXT_LOGS__)
+    if (typeof window !== 'undefined') {
+      const logs = parse(document.getElementById('__NUXT_LOGS__')?.textContent || '[]', nuxtApp._payloadRevivers) as LogObject[]
+      await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
     }
   })
 })

diff --git a/packages/nuxt/src/app/types/augments.d.ts b/packages/nuxt/src/app/types/augments.d.ts
@@ -1,5 +1,4 @@
 import type { UseHeadInput } from '@unhead/vue'
-import type { LogObject } from 'consola'
 import type { NuxtApp, useNuxtApp } from '../nuxt'
 
 interface NuxtStaticBuildFlags {
@@ -18,7 +17,6 @@ declare global {
   interface ImportMeta extends NuxtStaticBuildFlags {}
 
   interface Window {
-    __NUXT_LOGS__?: LogObject[]
     __NUXT__?: Record<string, any>
     useNuxtApp?: typeof useNuxtApp
   }

diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
@@ -202,7 +202,7 @@ async function initNuxt (nuxt: Nuxt) {
   }
 
   if (nuxt.options.dev && nuxt.options.features.devLogs) {
-    addPlugin(resolve(nuxt.options.appDir, 'plugins/dev-server-logs.client'))
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/dev-server-logs'))
     addServerPlugin(resolve(distDir, 'core/runtime/nitro/dev-server-logs'))
     nuxt.options.nitro = defu(nuxt.options.nitro, {
       externals: {

diff --git a/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts b/packages/nuxt/src/core/runtime/nitro/dev-server-logs.ts
@@ -1,7 +1,7 @@
 import { AsyncLocalStorage } from 'node:async_hooks'
 import type { LogObject } from 'consola'
 import { consola } from 'consola'
-import devalue from '@nuxt/devalue'
+import { stringify } from 'devalue'
 import type { H3Event } from 'h3'
 import { withTrailingSlash } from 'ufo'
 import { getContext } from 'unctx'
@@ -53,7 +53,11 @@ export default (nitroApp: NitroApp) => {
   nitroApp.hooks.hook('render:html', (htmlContext) => {
     const ctx = asyncContext.tryUse()
     if (!ctx) { return }
-    htmlContext.bodyAppend.unshift(`<script>window.__NUXT_LOGS__ = ${devalue(asyncContext.use().logs)}</script>`)
+    try {
+      htmlContext.bodyAppend.unshift(`<script type="application/json" id="__NUXT_LOGS__">${stringify(ctx.logs, ctx.event.context._payloadReducers)}</script>`)
+    } catch (e) {
+      console.warn('[nuxt] Failed to stringify dev server logs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.', e)
+    }
   })
 }