Next.js调用reset()无法清除左下角错误提示小部件的问题

问题描述 #

使用Next.js框架时，按照官方文档实现的error.js组件会在页面左下角渲染一个可点击的小部件，显示“1 Error”，每次出错计数会递增（如“2 Error”等）。调用reset()方法后组件会重新渲染，但该小部件并未消失，需要实现调用reset()的同时清除这个小部件。

现有代码 #

'use client' // Error components must be Client Components

import { useEffect } from 'react'

export default function Error({
                                  error,
                                  reset,
                              }: {
    error: Error & { digest?: string }
    reset: () => void
}) {
    useEffect(() => {
        // 上报错误到错误监控服务
        console.error(error)
    }, [error])

    return (
        <div>
            <h2>Something went wrong!</h2>

            <button
                className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-1"
                onClick={() => reset()}
            >
                Try again
            </button>
        </div>
    )
}

解决方法 #

这个左下角的错误计数小部件是Next.js开发环境专属的错误追踪工具，生产环境不会显示。reset()方法仅负责重置当前路由段的错误状态、尝试重新渲染组件，但不会触发开发工具的错误计数清除。要实现点击“Try again”时同时清除小部件，需手动调用Next.js内置的错误清除方法：

修改按钮的点击事件逻辑，在调用reset()后，检查并调用开发环境下的错误清除API：

<button
    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-1"
    onClick={() => {
        reset();
        // 清除开发环境的错误计数小部件
        if (typeof window !== 'undefined' && window.__NEXT_ERROR_OVERLAY__) {
            window.__NEXT_ERROR_OVERLAY__.clearErrors();
        }
    }}
>
    Try again
</button>

补充说明 #

• window.__NEXT_ERROR_OVERLAY__是Next.js开发环境下暴露的全局对象，仅在开发模式存在，生产环境下该对象不存在，因此需要添加类型判断避免报错。
• 该方法仅用于开发环境调试，生产环境无需处理，因为生产环境不会显示这个错误计数小部件。

参考文档（中文翻译） #

Next.js的error.js组件必须是客户端组件，reset()方法用于尝试重新渲染出错的路由段以恢复正常状态，但它不会影响开发环境下的错误追踪工具状态。

内容的提问来源于stack exchange，提问作者mikeb