improve: LDP-2496: Add server error handling (#225)

* improve: custom-fetch-instance: Add  helper and include query in server routes

* improve: LDP-2496: Add server error logging

* custom-fetch-instance: Add useCeApi helper

* custom-fetch-instance: Improve code

* custom-fetch-instance: Add dist

* custom-fetch-instance: Remove query and add dist

* LDP-2496: Add handling for 5xx errors in

* LDP-2496: Improve code and add dist

* LDP-2496: Rename to serverLogLevel and remove 5xx handling

* LDP-2496: Add dist

* LDP-2496: Update message

* LDP-2496: Improve error status

* LDP-2496: Add special case for fetch failed

* try fix error handling

* LDP-2496: Move error handling to pageErrorHandler

* LDP-2496: Fix tests

* LDP-2496: Remove dist

---------

Co-authored-by: Wolfgang Ziegler <[email protected]>

Author: alexieremia

README.md

@@ -97,6 +97,11 @@ is added automatically to requests. Defaults to `false`.
 
 - `passThroughHeaders`: Response headers to pass through from Drupal to the client. Defaults to ['cache-control', 'content-language', 'set-cookie', 'x-drupal-cache', 'x-drupal-dynamic-cache']. Note: This is only available in SSR mode.
 
+- `serverLogLevel`: The log level to use for server-side logging. Defaults to 'info'. Options:
+  - false: The server plugin will not be loaded, keeps the default Nuxt error logging.
+  - 'info': Log all server requests and errors.
+  - 'error': Log only errors.
+
 ## Overriding options with environment variables
 
 Runtime config values can be overridden with environment variables via `NUXT_PUBLIC_` prefix. Supported runtime overrides:

src/module.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, createResolver, addImportsDir, addServerHandler, addServerImports, addImports } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, addServerPlugin, createResolver, addImportsDir, addServerHandler } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { NuxtOptionsWithDrupalCe } from './types'
 
@@ -18,6 +18,7 @@ export interface ModuleOptions {
   serverApiProxy: boolean,
   passThroughHeaders?: string[],
   exposeAPIRouteRules?: boolean,
+  serverLogLevel?: boolean | 'info' | 'error',
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -41,6 +42,7 @@ export default defineNuxtModule<ModuleOptions>({
     addRequestFormat: false,
     serverApiProxy: true,
     passThroughHeaders: ['cache-control', 'content-language', 'set-cookie', 'x-drupal-cache', 'x-drupal-dynamic-cache'],
+    serverLogLevel: 'info'
   },
   setup (options, nuxt) {
     const nuxtOptions = nuxt.options as NuxtOptionsWithDrupalCe
@@ -58,6 +60,9 @@ export default defineNuxtModule<ModuleOptions>({
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
     nuxt.options.build.transpile.push(runtimeDir)
     addPlugin(resolve(runtimeDir, 'plugin'))
+    if (options.serverLogLevel) {
+      addServerPlugin(resolve(runtimeDir, 'server/plugins/errorLogger'))
+    }
     addImportsDir(resolve(runtimeDir, 'composables/useDrupalCe'))
 
     nuxt.options.runtimeConfig.public.drupalCe = defu(nuxt.options.runtimeConfig.public.drupalCe ?? {}, options)

src/runtime/composables/useDrupalCe/index.ts

@@ -51,7 +51,7 @@ export const useDrupalCe = () => {
     const useFetchOptions = processFetchOptions(fetchOptions)
 
     return $fetch.create({
-      ...useFetchOptions
+      ...useFetchOptions,
     })
   }
 
@@ -262,9 +262,27 @@ const menuErrorHandler = (error: Record<string, any>) => {
   })
 }
 
-const pageErrorHandler = (error: Record<string, any>, context: Record<string, any>) => {
-  if (error.value && (!error.value?.data?.content || context.config.customErrorPages)) {
-    throw createError({ statusCode: error.value.statusCode, statusMessage: error.value.message, data: error.value.data, fatal: true })
+const pageErrorHandler = (error: Record<string, any>, context?: Record<string, any>) => {
+  const errorData = error.value.data
+  if (error.value && (!errorData?.content || context?.config.customErrorPages)) {
+    // At the moment, Nuxt API proxy does not provide a nice error when the backend is not reachable. Handle it better.
+    // See https://github.com/nuxt/nuxt/issues/22645
+    if (error.value.statusCode === 500 && errorData.message === 'fetch failed' && !errorData.statusMessage) {
+      throw createError({
+        statusCode: 503,
+        statusMessage: 'Unable to reach backend.',
+        data: errorData,
+        fatal: true
+      })
+    }
+    throw createError({
+      statusCode: error.value.statusCode,
+      statusMessage: error.value.message,
+      data: error.value.data,
+      fatal: true
+    })
+  }
+  if (context) {
+    callWithNuxt(context.nuxtApp, setResponseStatus, [error.value.statusCode])
   }
-  callWithNuxt(context.nuxtApp, setResponseStatus, [error.value.statusCode])
 }

src/runtime/server/plugins/errorLogger.ts

@@ -0,0 +1,22 @@
+import { getRequestURL } from 'h3'
+import { useRuntimeConfig, defineNitroPlugin } from '#imports'
+
+export default defineNitroPlugin((nitro: any) => {
+  const { ceApiEndpoint, serverLogLevel } = useRuntimeConfig().public.drupalCe
+
+  if (serverLogLevel === 'error' || serverLogLevel === 'info') {
+    nitro.hooks.hook('error', (error: any, { event }: any) => {
+      const url = getRequestURL(event)
+      const fullUrl = url.origin + url.pathname + url.search
+      console.error(`[${event?.node.req.method}] ${fullUrl} - ${error}`)
+    })
+  }
+
+  // Log every request when serverLogLevel is set to info.
+  if (serverLogLevel === 'info') {
+    nitro.hooks.hook('request', (event: any) => {
+      const origin = getRequestURL(event).origin
+      console.log(`[${event.node.req.method}] ${origin + event.node.req.url}`)
+    })
+  }
+})