javascript - Webpack 代码拆分 : ChunkLoadError - Loading chunk X failed, 但 block 存在

Question

几天前我已将 Sentry 与我的网站集成，我注意到有时用户会在他们的控制台中收到此错误:

ChunkLoadError: Loading chunk <CHUNK_NAME> failed.
(error: <WEBSITE_PATH>/<CHUNK_NAME>-<CHUNK_HASH>.js)

所以我在网上调查了这个问题，发现了一些类似的案例，但与 session 期间的发布更新或缓存问题导致的丢失 block 有关。
这些情况和我的主要区别在于失败的 block 实际上可以从浏览器访问，因此加载错误不取决于 block 哈希的发布后刷新，而是(我猜)来自一些网络相关问题。
此统计数据强化了这一假设: 所涉及的设备中约有 90% 是移动设备 .
最后，我来答题 :我应该以某种方式管理问题(例如，如果失败则重试 block 加载)还是最好直接忽略它并让用户手动刷新？

2021.09.28 编辑:
一个月后，问题仍然存在，但我还没有收到用户的任何报告，而且我一直在用 Hotjar 记录用户 session ，但到目前为止还没有发现任何相关的问题。
我最近与 Sentry 支持进行了一次聊天，帮助了我 排除网络相关假设 :

Our React SDK does not have offline cache by default, when an error is captured it will be sent at that point. If the app is not able to connect to Sentry to send the event, it will be discarded and the SDK will no try to send it again.

Rodolfo from Sentry

我可以确认这个问题很不寻常，我与您分享另一个有趣的统计数据:自第一次出现以来受影响的用户是 332.227 位独立访客中的 882 位 (~0,26%) ，但我注意到 90% 的事件来自 iOS (不是我一个月前注意到的通用移动设备)，所以如果我计算与 iOS 用户相同的比例(128.444 中的 794(882 的 90%))，我们接近 0.62%。仍然很小，但在 iOS 上肯定更相关。

Answer 1

这很可能是因为浏览器正在缓存您应用的主 HTML 文件，例如 index.html服务于 webpack 包和 list .
首先，我会确保您的 Web 服务器正在发送正确的 HTTP 响应 header ，以不缓存应用程序的 index.html。文件(假设它被称为)。如果您使用的是 NGINX，您可以像这样设置适当的 header :

location ~* ^.+.html$ {
  add_header Cache-Control "no-store max-age=0";
}

对于 SPA，此文件的大小应该相对较小，因此只要您缓存应用程序所需的所有其他 Assets (如 JS 和 CSS 等)，就可以不缓存它。您应该在您的JS 捆绑包以支持这些缓存破坏。有了这些，对您网站的访问应该始终包含最新版本的 index.html。使用最新的 Assets ，包括记录 block 名称的最新 webpack list 。
如果要处理 block 加载错误，可以设置如下:

import { ErrorBoundary } from '@sentry/react'

const App = (children) => {
  <ErrorBoundary
    fallback={({ error, resetError }) => {
      if (/ChunkLoadError/.test(error.name)) {
        // If this happens during a release you can show a new version alert
        return <NewVersionAlert />

        // If you are certain the chunk is on your web server or CDN
        // You can try reloading the page, but be careful of recursion
        // In case the chunk really is not available
        if (!localStorage.getItem('chunkErrorPageReloaded')) {
          localStorage.setItem('chunkErrorPageReloaded', true)
          window.location.reload()
        }
      }

      return <ExceptionRedirect resetError={resetError} />
  }}>
    {children}
  </ErrorBoundary>
}

如果您决定重新加载页面，我会事先向用户显示一条消息。