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

【问题标题】：NextJS best practice for handling "Server Error" and "Client side error"NextJS 处理“服务器错误”和“客户端错误”的最佳实践
【发布时间】：2021-02-11 11:14:33
【问题描述】：

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

服务器错误

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

未处理的运行时错误

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

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

【问题讨论】：

您是否在此处取得了任何进展或可以分享有关如何最好地处理错误的任何资源？我对框架的行为感到困惑。
在每次 API 调用时尝试 catch 块...尝试测试 getInitialProps 或 getStaticProps 的每个输入以处理 null、错误和异常值；这些编码实践（尽管非常基础）是获得可靠工作应用程序的重要基本步骤

标签： reactjs error-handling next.js server-error

【解决方案1】：

处理错误的最佳实践之一是使用 Early Return，通过在 getInitialProps 中返回 statusCode 属性并在渲染页面后使用该 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

【讨论】：