如何使用 react next 来自定义内部服务器错误？（500内部服务器错误）答案

【问题标题】：How to have a custom internal server error using react next? (500 internal server error)如何使用 react next 来自定义内部服务器错误？（500内部服务器错误）
【发布时间】：2020-08-23 14:49:48
【问题描述】：

当我们得到这样的内部错误服务器 500 时，如何呈现自定义页面？ default internal server error page

我使用 react next js，我已经制作了 _error.js 文件，并且它在 404 页面上工作（例如，当我转到 localhost:3000/asdasdad 时会呈现 NotFound 组件），但是当我无法获得 Crashed当我收到内部服务器错误 500 时呈现的组件 my _error.js file

谢谢！

编辑：已解决，请参阅我的答案

【问题讨论】：

标签： javascript reactjs error-handling react-router

【解决方案1】：

原来我们不能，在运行 getInitialProps 函数后，它会跳过渲染并立即转到问题的错误页面

  if(statusCode === 404){
    return <div>error404</div>
  }
return <div/>
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404

    if(statusCode >= 500 && statusCode < 600){
      res.writeHead(302, {
        Location: '/error'
      });
      res.end();  
  }

  return { statusCode }
}

export default Error

但它可以通过这种方式被黑客入侵，如果用户收到 5xx 错误，则将用户重定向到错误页面

【讨论】：