nextjs - 利用 Error.tsx 显示自定义错误内容

问：

如何利用 error.tsx 根据服务器中发生的错误类型显示自定义错误消息？

在生产过程中，实际的错误消息将被剥离，并替换为通用错误消息。
我发现这使得使用 error.tsx 显示自定义错误内容变得困难

例如，下面的代码块在生产中不起作用，因为 next 说：

• 在生产过程中，转发到客户端的 Error 对象仅包含泛型消息和摘要属性。- 这意味着以下示例在生产中不起作用

• 在开发过程中，转发到客户端的 Error 对象将被序列化，并包含原始错误的消息，以便于调试。- 这意味着下面的示例仅在开发期间有效

• page.tsx - 应用程序/仪表板/page.tsx

export default async function Page() {
    const { data } = await getUsers();

    return (
        //List of users
    );
}

• error.tsx - 应用程序/仪表板/error.tsx

'use client';

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
    return (
        <div>
            {error.message === 'UNAUTHORIZED' ? (
                <>
                    <h1>UNAUTHORIZED</h1>
                    <button onClick={reset}>Try again !!!</button>
                </>
            ) : error.message === 'INTERNAL_SERVER_ERROR' ? (
                <>
                    <h1>UNAUTHORIZED</h1>
                    <button onClick={reset}>Try again !!!</button>
                </>
            ) : (
                <>
                    <h1>Ooops</h1>
                    <h1>Something went wrong!!!</h1>
                </>
            )}
        </div>
    );
}

如果服务器操作导致 UNAUTHORIZED （401） 或 INTERNAL_SERVER_ERROR （500） 等错误，我希望 error.tsx 呈现正确的内容。在开发中，它工作正常，但在生产中，它总是会渲染最后一个块。getUsers()

我错过了什么？
我错了，认为这是应该处理的方式吗？
我怎样才能在UI中向用户显示正确的错误