reactjs - NextJS 处理 "Server Error"和 "Client side error"的最佳实践

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) {
    <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