ios - 是什么导致了这个 vue-router 异步组件错误 - TypeError : undefined is not an object (evaluating 't.__esModule' )?

Question

我注意到 Sentry 中有很多错误，并带有以下堆栈跟踪:

TypeError: undefined is not an object (evaluating 't.__esModule')
  at isESModule(./node_modules/vue-router/dist/vue-router.esm.js:1955:3)
  at ? (./node_modules/vue-router/dist/vue-router.esm.js:1882:27)
  at promiseReactionJob([native code])

我自己在重现错误并找出导致它的原因时遇到了很多麻烦。看vue-router源码，来源于这个函数:

  function isESModule (obj) {
    return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module')
  }

所以 obj未定义。如果我们再上一层，我们会得到这个函数:

  function resolveAsyncComponents (matched) {
    return function (to, from, next) {
      var hasAsync = false;
      var pending = 0;
      var error = null;

      flatMapComponents(matched, function (def, _, match, key) {
        // if it's a function and doesn't have cid attached,
        // assume it's an async component resolve function.
        // we are not using Vue's default async resolving mechanism because
        // we want to halt the navigation until the incoming component has been
        // resolved.
        if (typeof def === 'function' && def.cid === undefined) {
          hasAsync = true;
          pending++;

          var resolve = once(function (resolvedDef) {
            if (isESModule(resolvedDef)) {
              resolvedDef = resolvedDef.default;
            }
            // save resolved on async factory in case it's used elsewhere
            def.resolved = typeof resolvedDef === 'function'
              ? resolvedDef
              : _Vue.extend(resolvedDef);
            match.components[key] = resolvedDef;
            pending--;
            if (pending <= 0) {
              next();
            }
          });

...

所以它看起来像 resolvedDef未定义。

我的猜测是 Vue 路由器成功解析了一个异步组件，但它最终未定义，并且代码中没有任何内容可以解释这种情况。

我使用的是 vue-router 3.1.3，这些错误总是只发生在 iOS(Safari 或 Chrome)上。

我试过谷歌搜索错误，我似乎无法在其他任何地方找到对它的单一引用。我也无法在 vue-router Github 上发布问题，因为我无法提供最小的复制。

通常(但不总是)Sentry 还会在错误之前显示此控制台日志:

console [vue-analytics] An error occured! Please check your connection or disable your AD blocker
logger console
extra {"arguments":["[vue-analytics] An error occured! Please check your connection or disable your AD blocker"]}

我不确定这是否相关。

我正在考虑的一个疯狂的解决方案是部署一个补丁版本的 vue-router，在 resolvedDef 的情况下，它会抛出一个带有更有用上下文的错误。未定义。该错误有望最终出现在我们的 Sentry 日志中。

是什么导致了这个错误？

Answer 1

我 fork 了 vue-router 库并修补了 resolveAsyncComponents用这条线:

if (!resolvedDef) {
  window.onerror(`router wtf ${matched.join(',')} ${def} ${_} ${match} ${key} ${pending} ${hasAsync} ${error}`);
}

最终哨兵出现以下错误:

router wtf [object Object] function(){return u(Promise.all([n.e("dashboard~orders~products~publicUser"),n.e("dashboard~discounts~products~publicUser"),n.e("orders~publicUser~tips"),n.e("publicUser~tips"),n.e("publicUser")]).then(n.bind(null,"89c6")))...

在生产环境中，我们的 Vue 应用程序似乎使用名为 bootstrap 的启动器加载这些组件:



然后我突然想到，我们对 router.js 中的每个异步组件导入使用以下包装器:

      {
        path: 'dashboard',
        name: 'dashboard',
        component: () =>
          handleChunkLoadError(
            import(/* webpackChunkName: 'dashboard' */ '../views/Dashboard')
          ),
      },

function handleChunkLoadError(importPromise) {
  return importPromise.catch(() => {
    Vue.toasted.error('Network error encountered', {
      duration: null,
      action: {
        text: 'Reload',
        onClick: () => window.location.reload(),
      },
    });
  });
}

如果 block 加载失败，它应该显示允许用户刷新页面的 toast。

但是我们忘记将错误传递给 vue-router:

function handleChunkLoadError(importPromise) {
  return importPromise.catch(error => {
    Vue.toasted.error('Network error encountered', {
      duration: null,
      action: {
        text: 'Reload',
        onClick: () => window.location.reload(),
      },
    });

    return error;
  });
}

返回 .catch 中的错误处理程序解决了这个问题。

🤦