Nuxt 3 SSR服务器API端点失败时自定义错误页不显示问题

我在Nuxt 3 SSR应用中遇到问题：当服务器API端点通过createError抛出错误时，自定义错误页无法正常显示。尝试给createError传递fatal参数（true或false）后，仍显示Chrome浏览器默认错误页而非自定义错误页，无论错误是404还是500都会出现这个问题。

相关代码 #

服务器API端点（server/api/test.index.get） #

throw createError({ statusCode: 404, statusMessage: 'NOT_FOUND' });

页面组件（pages/index.vue） #

const { data, error } = await useFetch('/api/test');

if (error.value) {
  throw createError({
     statusCode: error.value.statusCode,
     message: error.value.message
  });
}

自定义错误页（error.vue） #

<script setup lang="ts">
import type { NuxtError } from '#app';

interface Props {
    error: NuxtError;
}

defineProps<Props>();

const handleError = () => clearError({ redirect: '/' });
</script>

<template>
    <NuxtLayout>
        <div>
            <h2>{{ error.statusCode }}</h2>
            <button @click="handleError">Clear errors</button>
        </div>
    </NuxtLayout>
    <Toaster />
</template>

问题排查更新 #

经排查，问题由使用h3-compression包的服务器插件导致，原插件代码如下：

原压缩插件（server/plugins/compression.ts） #

import { useCompression } from 'h3-compression';

export default defineNitroPlugin((nitro) => {
    nitro.hooks.hook('render:response', async (response, { event }) => {
        if (!response.headers?.['content-type']?.startsWith('text/html')) return;

        await useCompression(event, response);
    });
});

解决方案 #

修改压缩插件代码，增加判断条件排除Nuxt内部路由的压缩处理：

修改后的压缩插件（server/plugins/compression.ts） #

import { useCompression } from 'h3-compression';

export default defineNitroPlugin((nitro) => {
    nitro.hooks.hook('render:response', async (response, { event }) => {
        if (response.headers?.['content-type'].startsWith('text/html') && !event?.context?.matchedRoute?.path.startsWith('/__nuxt')) {
            await useCompression(event, response);
        }
    });
});

内容的提问来源于stack exchange，提问作者Kris D. J.