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

This commit is contained in:
Daniel Roe 2024-03-27 11:42:43 +00:00 committed by GitHub
parent 8c3ddf7fc4
commit fa9d43753d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 17 additions and 8 deletions

View File

@ -1,5 +1,6 @@
import { consola, createConsola } from 'consola' import { consola, createConsola } from 'consola'
import type { LogObject } from 'consola' import type { LogObject } from 'consola'
import { parse } from 'devalue'
import { defineNuxtPlugin } from '../nuxt' import { defineNuxtPlugin } from '../nuxt'
@ -7,7 +8,12 @@ import { defineNuxtPlugin } from '../nuxt'
import { devLogs, devRootDir } from '#build/nuxt.config.mjs' import { devLogs, devRootDir } from '#build/nuxt.config.mjs'
export default defineNuxtPlugin((nuxtApp) => { 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 // Show things in console
if (devLogs !== 'silent') { if (devLogs !== 'silent') {
@ -43,8 +49,9 @@ export default defineNuxtPlugin((nuxtApp) => {
// pass SSR logs after hydration // pass SSR logs after hydration
nuxtApp.hooks.hook('app:suspense:resolve', async () => { nuxtApp.hooks.hook('app:suspense:resolve', async () => {
if (typeof window !== 'undefined' && window.__NUXT_LOGS__) { if (typeof window !== 'undefined') {
await nuxtApp.hooks.callHook('dev:ssr-logs', window.__NUXT_LOGS__) const logs = parse(document.getElementById('__NUXT_LOGS__')?.textContent || '[]', nuxtApp._payloadRevivers) as LogObject[]
await nuxtApp.hooks.callHook('dev:ssr-logs', logs)
} }
}) })
}) })

View File

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

View File

@ -202,7 +202,7 @@ async function initNuxt (nuxt: Nuxt) {
} }
if (nuxt.options.dev && nuxt.options.features.devLogs) { 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')) addServerPlugin(resolve(distDir, 'core/runtime/nitro/dev-server-logs'))
nuxt.options.nitro = defu(nuxt.options.nitro, { nuxt.options.nitro = defu(nuxt.options.nitro, {
externals: { externals: {

View File

@ -1,7 +1,7 @@
import { AsyncLocalStorage } from 'node:async_hooks' import { AsyncLocalStorage } from 'node:async_hooks'
import type { LogObject } from 'consola' import type { LogObject } from 'consola'
import { consola } from 'consola' import { consola } from 'consola'
import devalue from '@nuxt/devalue' import { stringify } from 'devalue'
import type { H3Event } from 'h3' import type { H3Event } from 'h3'
import { withTrailingSlash } from 'ufo' import { withTrailingSlash } from 'ufo'
import { getContext } from 'unctx' import { getContext } from 'unctx'
@ -53,7 +53,11 @@ export default (nitroApp: NitroApp) => {
nitroApp.hooks.hook('render:html', (htmlContext) => { nitroApp.hooks.hook('render:html', (htmlContext) => {
const ctx = asyncContext.tryUse() const ctx = asyncContext.tryUse()
if (!ctx) { return } 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)
}
}) })
} }