gatsby - 如果页面在渲染期间最终抛出，是否可以在构建期间跳过创建页面？

Question

如果页面在渲染期间最终抛出，是否可以在构建期间跳过创建页面？

此页面是 created programmatically via gatsby-node createPage 并且可能来自页面查询(来自我们的 CMS)的数据不好导致它抛出。

我不想因为一个错误页面而停止构建，因此理想情况下不会创建该页面或将后备页面放入其位置(并且错误事件将被记录到 Sentry 或类似内容)。

关于如何实现这一目标的任何想法？

编辑:我没有足够澄清我的问题，所以我想添加一些关于我正在尝试解决的问题以及原因的上下文。

我试图捕获的错误发生在构建期间呈现页面的过程中。 发生此错误是因为我尝试呈现的组件假定了一些不正确的数据(但应该是正确的)。

例如，假设我正在为我网站上的所有产品创建许多页面。组件期望每个产品都有 imagesSizes并调用 imagesSizes.split(',')在渲染过程中。因为 imagesSizes是 null来自 page query ，整个组件抛出错误并中断构建。

就像@EliteRaceElephant 建议的那样，我试过使用 React Error Boundaries 不幸的是，它们不适用于 SSR(Gatsby 在构建时使用)。因此，即使我将组件包装在错误边界中，它最终仍会破坏构建。

最后一点，我上面给出的示例只是我遇到的数据错误并破坏构建的情况之一。

我想要实现的是一个简单的后备页面，用于何时 在构建期间渲染期间发生任何任意错误 .我的理想解决方案甚至可以让我throw当我对数据做出的某些假设不正确时故意出现错误(因为我宁愿向用户发送错误页面，而不是向他们显示包含错误数据的页面)。

从历史上看，当我在 Gatsby 之外完成 SSR 时，我会简单地将整个调用包装到 ReactDOMServer.renderToString在 try catch阻止并在 catch 中返回我的后备页面堵塞。

Gatsby 的等价物是什么？

Answer 1

您可以优雅地处理错误，因为 graphQL 查询作为 promise 返回。如果 promise 未能解决并继续构建您的页面，请处理引发的错误。

来自 Gatsby node API documentation :

const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)

  return graphql(`
    query loadPagesQuery ($limit: Int!) {
      allMarkdownRemark(limit: $limit) {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }
  `, { limit: 1000 }).then(result => {
    if (result.errors) {
      throw result.errors

      // ##### Handle your ERROR here #######
      // send to sentry, try another query, etc
      // or pass an empty result object so no pages are created but the build continues

    }
    result.data.allMarkdownRemark.edges.forEach(edge => {
      createPage({
        path: `${edge.node.frontmatter.slug}`,
        component: blogPostTemplate,
        context: {},
      })
    })
  })
}

编辑#1

您的错误发生在页面模板中。您可以使用 React 方式处理组件中的错误，使用 error boundaries .在您的组件周围包裹一个错误边界并处理那里出现的任何错误。错误边界也可以开始构建错误页面。您也可以处理页面查询在 PageTemplate 组件中返回的任何内容。

<PageTemplate>
  <ErrorBoundary>
    <YourContent />
  </ErrorBoundary>
</Page Template>

编辑#2

我现在明白了这个问题，可以提供一些建议。我认为没有一个简单的解决方案，因为它涉及 React 和 Gatsby 的内部工作原理:

try catch 模板的非 React 部分。使用 try catch 错误的包装函数。

我假设您的 JSX 代码中有这样的内容:

<PageTemplate>
  { imagesSizes.split(',') // do whatever and break the build }
</PageTemplate>

相反，首先使用 try catch 通过函数运行所有代码中断变量。如果有任何函数捕获，则呈现错误页面。为此，您可能需要一个类基础组件。调用前先放置函数 render()

let pageThrows = false;

const imageSizesSplitCheck = (images) => {
  try {
    imagesSizes.split(',') // throw error
  } catch {
    pageThrows = true; // outside of the JSX flow you can still catch errors while serverside renddering
  }
}
// more try catch functions

if (pageThrows) {
  // render error page
} else {
  // render default page 
}

处理数据的边缘情况是一种很好的编码习惯，这样就不会抛出异常。我认为它甚至在 Clean Code 书中提到过。否则你会误用正常程序流的异常。异常(exception)应该仍然是异常(exception)。