如何干净地处理 nextjs getStaticProps 中的错误

Posted 2023-03-30

【中文标题】如何干净地处理 nextjs getStaticProps 中的错误

【英文标题】：how to cleanly handle errors in nextjs getStaticProps

【发布时间】：2021-07-14 01:09:57

【问题描述】：

目前我正忙于构建我的第一个 Next.JS 应用程序（Next 和 Strapi）。现在一切正常，但我很好奇在使用 getStaticProps 时实现错误处理的最佳方法是什么。

我自己尝试了一些事情（传递多个道具等，但这一切都不起作用（典型的未序列化 JSON 错误）。我想要实现的是页面本身（例如 /about）上的错误消息，没有找到了数据。附加了一条错误消息（statusCode）。

我希望这是可能的，我做了很多研究，发现：https://github.com/vercel/next.js/pull/17755 这个。但这并不是我想要的。

【参考方案1】：

您可以创建custom 404 and 500 error pages。有一个显示statusCode 的选项，但是您可以通过在getStaticProps 中返回notfound: true 来告诉Next 使用404 页面。

如果你返回notfound: true，statusCode会一直显示404页面，你知道statuscode就是404。

这是在getStaticProps 中捕获错误的示例 - 这将生成您的页面或显示根据您的规范设计的自定义错误页面。

export const getStaticProps = async () => 
  try 
    const  data, errors  = await someQuery();
    if (errors || !data) 
      return  notFound: true ;
    
    return  props:  data  ;
   catch () 
    return  notFound: true ;
  
;

---

notFound 的一个不太明显的附加用例是使用它从生产环境中排除目录或页面。下面的检查将在下一个/导出 (SSG) 期间跳过整个页面或目录。此检查用于生成仅用于开发的静态页面。

如果目录中的单个页面具有以下检查，则在构建过程中会跳过该页面。如果目录中的每个页面都有检查 - 将跳过整个目录，包括文件夹。

export const getStaticProps = async () => 
  if (process.env.NODE_ENV === 'production') 
    return  notFound: true ;
  
  ...
;

确保您不包含您不希望在getStaticPaths 中内置的路由。

【讨论】：

非常感谢您的回答。这对我接下来理解错误处理的正确方法有很大帮助。问题解决了。

从各方面来说这都不是一个合适的解决方案。我有兴趣并研究一个适当的解决方案来报告 montiroing 系统中未处理的异常，如 newrelic/sentry 任何东西。 nextjs 有这样的方法吗？在 php 和其他框架中的以前的应用程序中非常容易，但现在正在努力寻找一种方法来捕获所有未处理的异常，无论服务器端发生在哪里，可能在 getstaticprops 或其他地方想要捕获和报告它们

如果你在 getStaticProps 中做了一个容易出错的过程，你也需要在那里捕获错误。以上仅适用于 getStaticPaths - 您还可以允许您的应用程序出现硬错误以防止其构建。上述解决方案应与错误边界一起使用，以捕获更多未处理的客户端错误。我建议使用像 Sentry 这样的第三个库 - 但它超出了 OPs 问题的范围。不幸的是，在 React 中没有默认的全局方法来捕获未处理的运行时或服务器错误。查看 Next.js 示例 - github.com/vercel/next.js/tree/canary/examples/with-sentry。