我正在做一个使用Next.js 13和app目录结构的项目。我已经在app/sample目录中创建了error.tsx
和not-found.tsx
页面来处理错误和找不到的情况。但是,当我尝试使用这些页面时,它们并没有按预期显示。
以下是我的错误和未找到页面的代码:
app/sample/error.tsx:
*
'use client'
import React from 'react'
export default function Error({
error,
reset,
}: {
error: Error
reset: () => void
}) {
React.useEffect(() => {
console.log('logging error:', error)
}, [error])
return (
<div className="space-y-4">
<h2 className="text-lg font-bold">Error</h2>
<p className="text-sm">{error?.message}</p>
<div>
<button onClick={() => reset()}>Try Again</button>
</div>
</div>
)
}
app/sample/not-found.tsx:
*
export default function NotFound() {
return (
<div className="space-y-4">
<h2 className="text-lg font-bold">Not Found</h2>
<p className="text-sm">Could not find requested resource</p>
</div>
)
}
在我的 * app/sample/page.tsx
* 文件中,我故意触发这样的错误:
'use client'
export default function Sample() {
const error = () => {
throw new Error(new Date().toISOString())
}
return (
<main className="flex flex-col items-center justify-between p-24">
Sample
<button onClick={error}>Throw Error</button>
</main>
)
}
我面临的问题是,当我通过单击localhost:3000/sample
访问的页面上的"Throw Error"
按钮来调用错误时,我希望看到我定义的自定义错误页面,但相反,我在屏幕左下角看到一个Next.js弹出通知,通知我错误。
我想知道我是否错过了任何配置,或者我是否需要在Next.js 13中做一些不同的事情,以正确显示自定义错误和未找到的页面。如有任何关于如何排除故障和解决此问题的指导或建议,我们将不胜感激。
在此先谢谢您!
3条答案
按热度按时间slsn1g291#
因为error.js使用react错误边界,并且它们不会从事件处理程序中捕获错误。看看黄色的笔记:https://legacy.reactjs.org/docs/error-boundaries.html
您可以使用错误状态,并在此状态更改时抛出错误
ukxgm1gy2#
根据官方文件:
未找到文件用于在路由段内抛出
notFound
函数时呈现UI而
notFound()
是您手动调用的对象,如这里的官方示例https://nextjs.org/docs/app/api-reference/functions/not-found所示。这意味着
throw new Error()
将导致您到达error
页面(只能在生产构建中可见,开发构建会显示错误消息和堆栈跟踪的模型),而不是Not Found页面。这里的建议是让你遵循官方文档的做法,并相应地调用
notFound()
。https://nextjs.org/docs/app/api-reference/functions/not-foundmklgxw1f3#
我也有类似的问题...很长一段时间我都无法理解原因,通过排除的过程,我得出结论(在我的情况下),问题出在
layout.tsx
中的<Providers>
(Providers.tsx
→用react-redux
存储Provider
Package {children})。因此,
not-found.tsx
的显示没有触发。其他错误-相同!→我把它移到一个单独的组件和
wrapped only those components that use it
.upd;触发未找到的正确方法: