NextJS 处理“服务器错误”和“客户端错误”的最佳实践

Question

使用 NextJS，我看到 2 种错误：

服务器错误

• 使用throw new Error(...)内部 getInitialProps生成它...
• 它可能由于某些业务逻辑或意外的 API 响应而发生；
• 截屏：

未处理的运行时错误

• 使用throw new Error(...)组件内部生成它
• 它可能由于某些业务逻辑而发生；
• 这里的错误是由 ErrorBoundary 捕获的（设置在里面_app.js）
• 截屏：

问题：在错误边界内捕获未处理的运行时错误（就像它们在 ReactJS 中所做的那样）...如何最好地处理“服务器错误”...最佳实践是什么？

Answer 1

处理错误的最佳实践之一是使用 Early Return，即statusCode在 getInitialProps 中返回一个 prop，并statusCode在渲染页面后使用它来渲染错误页面，以防止处理页面内可能出现的错误。

• 如果一切顺利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