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 type { LogObject } from 'consola'
import { parse } from 'devalue'
import { defineNuxtPlugin } from '../nuxt'
@ -7,7 +8,12 @@ import { defineNuxtPlugin } from '../nuxt'
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)
}
})
})

View File

@ -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
}

View File

@ -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: {

View File

@ -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)
}
})
}