Не удалось загрузить чанк 77 из-за тайм-аута, но в Sentry обнаружена ошибка

Question

Я использую Sentry (аналог Bugsnag) для отслеживания ошибок интерфейса на моем сайте.

В Sentry у меня много ошибок, подобных этой:

Error: Loading chunk 77 failed.
(timeout: https://www.exemple.com/77.6a28baf2f4e4ff5f87a6.js)

Я выполняю отложенную загрузку но старые файлы сохраняются во время развертывания, поэтому проблема не связана с новой версией развернутого веб-сайта.

Как и в случае с ошибкой, похоже, что время ожидания истекло, поэтому, вероятно, пользовательское соединение понемногу.

Но я не понимаю:

• Я вижу эти ошибки в Sentry: если пользовательское соединение падает при загрузке сайта, как он может отправить что-то в Sentry, который сообщает об ошибках

• В Sentry я смотрю на ошибки от пользователей, использующих Windows, так что это означает, что они находятся на рабочем столе => Вероятность того, что их соединение обрывается, когда на рабочем столе низкая.

Я искал в Интернете объяснения всего, что нашел:

• развертывание и отложенная загрузка (я сохраняю старые файлы, поэтому не проблема)

• Проблема с подключением (почему я вижу эти сообщения об ошибках)

У каждого есть идея, которую можно изучить, чтобы попытаться выяснить, почему возникают ошибки.

Answer 1

У меня была похожая проблема (если не та же самая) когда-то go, которая наблюдалась в тех случаях, когда пользователь активен (в сеансе) во время и после развертывания интерфейса, которое (время от времени ) привел к ситуации, когда у пользователя были ссылки на некоторые из старых файлов в приложении angular, которое он / она выполнял (которых не было после развертывания), что вызвало эти ошибки чанка.

Исправление, которое я использовал для этой проблемы, является простым расширением SentryErrorHandler по умолчанию, например

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() { }
  handleError(error) {
    const chunkFailedMessage = /Loading chunk [\d]+ failed/;
    if (chunkFailedMessage.test(error.message)) {
      window.location.reload();
    } else {
      Sentry.captureException(error.originalError || error);
    }
  }
}

Итак, с помощью этого решения мы заставляем пользователя перезагрузить приложение и получить последние артефакты (если что-то пойдет не так). Мы также пропускаем регистрацию ошибок, потому что это не сообщение, которое приносит нам какое-либо значение, потому что это не то, что мы можем исправить, это просто то, как работает angular.

Возможно, другим способом решения этой проблемы может быть для предварительной загрузки всех ленивых модулей, когда приложение бездействует, таким образом, вы никогда не будете пытаться загружать несуществующие модули.