Написание кода — это лишь малая часть качественной работы над проектом, а при написании кода неизбежно возникают ошибки. Поэтому после запуска проекта нам также необходимо активно собирать ошибки проекта, мы не можем ждать, пока пользователи найдут ошибки, тогда свяжитесь с нами, и мы с ними разберемся. Таким образом, легко привести к большим потерям.Заблаговременный сбор и устранение ошибок может уменьшить потери.
Я не делал никакой связанной работы.Следующая статья - это всего лишь небольшая мысль и резюме моего исследования.Может быть много недостатков и ошибок.Я надеюсь, что вы можете исправить меня и направить меня.
Эта статьяПередовая продвинутая сериячасть,
Добро пожаловать, чтобы следовать иstarэтот блог или следуйте за мнойgithub
Какая информация об ошибках собирается
Начнем с вопроса интервью. Тема второго раунда телефонных интервью Tencent: если пользователь использует веб-страницу и находит пустой экран, а затем связывается с вами, какую информацию вы спросите у него?
Неинтересно нагромождать ответы один за другим, давайте изменим мышление и подумаем, почему экран пустой.
Где возникла ошибка
с моим предыдущимстатьи по оптимизации производительностиТаким же образом примерно проверим процесс доступа пользователя к странице.
- Пользователь не открывает сеть
- Перехват домена DNS
- http угон
- cdn или другая ошибка доступа к файлу ресурсов
- Ошибка сервера
- Ошибка внешнего кода
- Проблемы совместимости с интерфейсом
- Ошибка операции пользователя
Какая информация собирается
По указанным выше ссылкам, где могут возникать ошибки, нам необходимо показать следующую информацию о пользователе на мобильный телефон пользователя.
- текущее состояние сети
- оператор
- Географическое положение
- время интервью
- Версия клиента (при доступе через клиент)
- версия системы
- информация о браузере
- разрешение устройства
- источник страницы
- Информация об учетной записи пользователя
- Соберите время, затраченное пользователем на процесс доступа к странице через API производительности, и посмотрите, где возникает ошибка.
- Собирать информацию об ошибках пользовательского кода js
Как собрать неверную информацию
Теперь речь идет о том, как собирать информацию об ошибках.
Есть две основные школы сбора ошибок во внешнем интерфейсе:
Одним из них является мониторинг виртуальных машин.Преимущество в том, что индикаторы полные, и можно отслеживать конкурирующие продукты.Недостаток в том, что отражение неполное и его легко исказить.
Другой — скриптовый мониторинг, преимущество которого в том, что он может собирать большие объемы реальных данных, а недостаток в том, что он влияет на производительность и склонен к искажениям при небольшом количестве выборок.
Здесь мы пока говорим только о мониторинге скриптов (выкопайте яму и засыпьте ее позже)
запись времени доступа
performance API
Введите Performance.timing в консоли браузера Chrome, и вы получите объект, который записывает время каждого этапа доступа браузера.
При сборе ошибок вы можете сравнить это время, чтобы увидеть, на каком этапе произошли ошибки.
- Время запроса DNS: domainLookupEnd - domainLookupStart
- Длительное TCP-соединение: connectEnd - connectStart
- запрос занимает много времени: responseEnd - responseStart
- Трудоемкий разбор дерева dom: domComplete - domInteractive
- Время белого экрана: responseStart - navigationStart
- время готовности: domContentLoadedEventEnd - navigationStart
- время загрузки: loadEventEnd – navigationStart
Другие методы
Существуют следующие способы записи времени начала доступа:
- Сервер отображает время посещения страницы
- Для SPA запишите время выгрузки предыдущей страницы
Зафиксируйте время процесса доступа
- После анализа тега head тег script добавляется перед рендерингом тега body.Как правило, это время считается временем белого экрана.
- Захватите событие DOMContentLoaded, чтобы записать время загрузки элемента dom.
- Запись после загрузки всех изображений на верхней странице и сохранение времени в верхней части страницы.
- Захватите событие загрузки, чтобы записать время загрузки страницы.
Сбор ошибок скрипта
window.onerror
window.onerror может фиксировать ошибки времени выполнения, вы можете получить информацию об ошибке, стек, файл ошибки, номер строки, номер столбца
Обратите внимание на следующее:
-
Синтаксические ошибки можно отловить, отделив блок кода window.onerror и выполнив его перед другими скриптами (обратите внимание на эту предпосылку!).
-
Поскольку аномальные события сетевых запросов не будут всплывать, их необходимо обрабатывать на этапе захвата.
-
Не удается поймать сообщение об ошибке обещания
-
Ресурсы кросс-происхождения требуют специальной обработки, вам нужно добавить атрибут crossorigin в тег скрипта, а сервер устанавливает Access-Control-Allow-Origin
-
Только когда функция window.onerror возвращает true, исключение не будет выброшено наверх, иначе в консоли будет отображаться Uncaught Error: xxxxx, даже если исключение известно.
Обработка ошибок промисов
В дополнение к использованию метода catch для перехвата ошибок промисы также могут использовать событие unhandledrejection окна для перехвата исключений.
window.addEventListener("unhandledrejection", function(e){
// Event新增属性
// @prop {Promise} promise - 状态为rejected的Promise实例
// @prop {String|Object} reason - 异常信息或rejected的内容
// 会阻止异常继续抛出，不让Uncaught(in promise) Error产生
e.preventDefault()
})try catch
Синтаксические ошибки не могут быть обнаружены, только ошибки времени выполнения;
Вы можете получить информацию об ошибке, стек, файл ошибки, номер строки, номер столбца; вам нужно использовать инструменты, чтобы добавить все функциональные блоки и блоки файлов, чтобы попытаться поймать, и вы можете ввести больше статической информации на этом этапе.
Следует отметить, что try catch может перехватывать только исключения синхронного кода и ничего не может делать с обратными вызовами, setTimeout, промисами и т. д.
Как сообщать об ошибках
-
Серверная часть предоставляет интерфейс, а внешняя загрузка ajax
-
Создайте новое изображение с сообщением об ошибке в параметре URL.
function report(error) {
var reportUrl = 'http://xxxx/report';
new Image().src = reportUrl + 'error=' + error;
}наконец
Эта статьяПередовая продвинутая сериячасть,
Добро пожаловать, чтобы следовать иstarэтот блог или следуйте за мнойgithub