提问人：Akber Iqbal 提问时间：10/29/2020 更新时间：11/17/2023 访问量：17516
NextJS 处理“服务器错误”和“客户端错误”的最佳实践
NextJS best practice for handling "Server Error" and "Client side error"
问：
使用 NextJS，我看到 2 种错误：
服务器错误
- 使用 inside getInitialProps 生成它...
throw new Error(...) - 它可能是由于某些业务逻辑或意外的 API 响应而发生的;
- 截图：
未处理的运行时错误
- 使用组件内部生成它
throw new Error(...) - 它可能由于某些业务逻辑而发生;
- 此处的错误由 ErrorBoundary 捕获（该边界在
_app.js) - 截图：
问题： 未处理的运行时错误在 Error Boundary 中被捕获（就像在 ReactJS 中一样）......如何最好地处理“服务器错误”...最佳实践是什么？
答：
0赞
Pablopvsky
4/7/2021
#1
处理错误的最佳实践之一是使用 Early Return，方法是在 getInitialProps 中返回一个 prop，并在呈现页面后使用它来呈现错误页面，以防止处理页面内可能出现的错误。statusCodestatusCode
- 如果一切正常，200
- 如果不存在 404
- 如果服务器错误 503
import Error from "next/error"
function Page({ stars, statusCode}) {
if(statusCode !== 200) {
return <Error statusCode={statusCode} />
}
return <div>Next stars: {stars}</div>
}
Page.getInitialProps = async (ctx) => {
try{
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const json = await res.json()
if(res.status >= 400){
return { stars: json.stargazers_count, statusCode: res.status }
}
return { stars: json.stargazers_count, statusCode: 200 }
} catch(error){
return {stars: null, statusCode: 503}
}
}
export default Page
评论