После передислокации фронтенда руководитель сказал мне, что страница зависла...

внешний интерфейс

задний план:

Каждый раз, когда внешний интерфейс обновляется и повторно развертывается, пользователь по-прежнему остается на странице до обновления. Когда запрашиваются данные страницы, страница будет белой, а сообщение об ошибке будет следующим:

Uncaught ChunkLoadError: Loading chunk {n} failed.

причина

После каждого обновления имена js и css в html-файле на стороне клиента не совпадают с именами на сервере, что приводит к сбою загрузки.

решение

1. Отслеживайте событие ошибки и обновляйте его после обнаружения ошибки.

      window.addEventListener(
        'error',
        function (event) {
          if (
            event.message &&
            String(event.message).includes('Loading chunk') &&
            String(event.message).includes('failed')
          ) {
            window.location.replace(window.location.href);
          }
        },
        true,
      );

2. Следите за событием window.console.error, эффект такой же, как и выше.

      window.console.error = function () {
        console.log(JSON.stringify(arguments), 'window.console.error'); // 自定义处理
      };

3. Другие программы

Такие как: механизм HTTP2.0 push/конструкция fis3/уведомление webSocket и т. д., не пробовал

Примечание. Есть хорошие решения, которые можно обсудить в комментариях ниже.

Эта статья включена в колонку личных трудовых книжек, в которой специально фиксируются некоторые интересные сценарии и проблемы.

постскриптум

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

image.png

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

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

решение:

Я не знаю, нашли ли вы его.Приведенный выше код для мониторинга события ошибки не включает сбой CSS, поэтому достаточно сопоставить сбой загрузки CSS.

Обновленный код выглядит следующим образом:

      window.addEventListener(
        'error',
        function (event) {
          if (
            event.message &&
            String(event.message).includes('chunk') &&
            String(event.message).includes('failed')
          ) {
            window.location.replace(window.location.href);
          }
        },
        true,
      );

Некоторые люди могут спросить, поскольку обновление не может решить проблему, может ли ее решить window.location.replace(window.location.href)?

На самом деле есть много способов обновиться.Согласно MDN, метод Location.replace() заменит текущий ресурс на заданный URL, так что эту проблему можно решить.

над

Категории