С нуля приземлилась <внешняя система мониторинга аномалий>

монитор

предохранитель

В один прекрасный день мобильная страница с коллегой-тестировщиком показывает белый экран, посмотрите, где страница неверна. У меня не было ошибки при открытии страницы, и в итоге я нашел ошибку только в его мобильном телефоне.Мобильный проект был в среде WeChat.Было бы более хлопотным, и, наконец, использовать его отладку мобильного телефона, чтобы найти проблему : это диалог под его учетной записью Данные сообщения имеют проблемы, вызванные страницей. Обычно в этой ситуации используется только его мобильный телефон или отладка учетной записи, чтобы очень быстро найти проблему.Если это внешний пользователь, я не могу взять его телефон для проверки.

 

На самом деле эта проблема очень распространена, но на этот раз я думаю, что если эта проблема не будет обнаружена нашими собственными коллегами, то будет очень страшно, может быть потрачено много сил на выяснение проблемы, и даже привести к серьезным онлайн ошибки. Так получилось, что Е Сяочай говорил о мониторинге на большом собрании по обмену интерфейсами FCC Чэнду не так давно, что также вдохновило меня. Эти общественные услуги являются основным богатством компании. В настоящее время развитие бизнеса компании на подъеме.Все больше и больше требования к стабильности системы будут становиться все выше и выше.Поскольку у нас все еще нет этой услуги, уместно сделать это сейчас.

 

Предварительная подготовка

С самого начала этой идеи я знал, что ключ в ее реализации, иначе все это будет пустой болтовней. Чуть больше чем через полмесяца нашей front-end команде нужно сделать шаринг в компании.Я сейчас тему, которая подходит для шаринга, и другие back-end и тестовые коллеги могут ее легко прослушать. Сначала я рассматривал ситуацию с внутренним хранилищем и визуализацией и хотел найти готовый инструмент внутренней интеграции, который помог бы мне справиться с внутренней работой. Я спросил своего коллегу по бэкенду, и мой коллега порекомендовал это. Elasticsearch+Fluentd+Kibana. После небольшого исследования я всегда чувствовал, что что-то не так. Во всяком случае, после исследования я обнаружил, что, возможно, все же потребуется выполнить некоторую индивидуальную разработку, чтобы удовлетворить спрос. Коллеги из бэк-энда также сказали то же самое, выслушав мое требование. Сила одного человека ограничена, и в бизнесе компании много вещей. Найти совершенно хорошо сотрудничать. Использование своих соответствующих преимуществ может приземлиться быстрее, так что я также могу сосредоточиться на передней работе и контролировать Реализация всего проекта. Таким образом, я обсуждал это с моим спине-коллегой, и он также согласился на то время, чтобы сделать это со мной. Откладывая в стороне спины, я начал думать о фронт-концевой работе, и исследовали решения других людей и знаний об этом. Есть некоторые сторонние библиотеки или проекты с открытым исходным кодом, которые предоставляют аналогичные функции, и это очень просто понять. Наконец, я подумал, что было бы легче адаптироваться к своему собственному бизнесу, развивая его, а текущая первая версия функции спроса не имеет такого большого количества развития, поэтому я могу сделать это сам. На ранней стадии я столкнулся с некоторыми функциональными точками, которые необходимо решить и реализовано: генерирование SourceMap, мониторинг отчетности об ошибках JS и отчеты об ошибках, распределение SourceMap после того, как сообщается сжатый код JS, как применить его в бизнес-проектам более плавно, данные Оптимизация хранения и т. Д.

 

В принципе

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

  • js отчет об ошибках мониторинг событий + обработка и отчетность
  • Инструмент сборки создает файл исходной карты
  • загрузка файла исходной карты

задняя часть

  • Обеспечьте интерфейс для сбора ошибок
  • Прочитайте файл исходной карты и разберите загруженную ошибку (время разбора: интерфейс будет обрабатываться сразу после его сбора, и обрабатываться при извлечении позже)
  • Хранение данных

 

Мониторинг отчетов об ошибках js и информационных отчетов

С помощью onerror мы можем отслеживать и получать информацию об ошибках js, а также пять параметров следующего кода. Два параметра columnNo и error могут быть недоступны в некоторых старых браузерах, таких как браузеры IE8-9 и более ранние версии Opera, но это не имеет значения. Мы совместимы с кодом, который не может получить параметры. Если последние два параметра отсутствует параметр, просто передайте нулевое значение. Вы также можете получить параметры columnNo и error этих старых браузеров другими способами.В настоящее время мониторинг в основном предназначен для мобильных терминалов, и нет необходимости быть совместимым со старыми браузерами.

window.onerror = function (msg, fileUrl, lineNo, columnNo, error) {}

 

Метод onerror примерно реализован следующим образом:

Могут быть междоменные проблемы, js в разных доменах нужно настраивать атрибут скриптаcrossorigin="anonymous" и конфигурация бэкендаAccess-Control-Allow-Origin,Однако в настоящее время в нашем проекте нет кросс-доменной проблемы js.

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

Теперь мы можем получить информацию об ошибке через onerror, но онлайн-код сжат, и количество строк, столбцов и имен переменных, которые мы можем получить при сообщении об ошибке, не может сказать нам, где исходный код неверен. Здесь нам нужно использовать исходную карту, давайте поговорим об этом.

 

sourcemap

Sourcemap — это информационный файл, в котором хранится информация о местоположении. То есть файл исходной карты записывает положение до преобразования кода и соответствующее положение после преобразования (Вууху. Руань Ифэн.com/blog/2013/0…). На рисунке 1 ниже показана сжатая версия файла login.js. Комментарий во второй строке указывает относительный путь к файлу карты. Браузер найдет файл карты и автоматически проанализирует его в соответствии с комментарием. Вы можете увидеть исходный код в отладчик; рис. 2 — файл карты (в формате json); рис. 3 и рис. 4 представляют файл исходной карты. Рисунок 2 Поле sourcesContent сгенерированного нами файла карты напрямую представляет код исходного файла (инструмент сборки может указать, нужно ли импортировать исходный файл в файл карты), что может облегчить внутренний анализ. файл, серверная часть не может проанализировать правильный результат.

(фигура 1)

(фигура 2)

(изображение 3)

 

 

(Рисунок 4)

 

 

grunt генерирует исходную карту:

Наш инструмент для создания мобильных проектов относительно старый, и мы используем grunt в качестве инструмента для упаковки. Раньше я не использовал sourceMap при сжатии кода, потому что среды разработки и тестирования не сжимаются, поэтому нет необходимости использовать sourceMap для отладки в браузере. Потом я пошел модифицировать файл gruntfile (раньше я его не писал), конфигурация sourceMap чувствовала, что она не соответствует официальной документации, и я всегда сообщал об ошибках, Наконец, я обнаружил, что версия зависимостей предыдущей упаковки инструменту было 13 лет, и он не нужен на данный момент.Чтобы забросить проблему с версией, выверните старую версию документа и настройте файл исходной карты, и он будет успешно сгенерирован в каталоге того же уровня Например, исходный файл называется xx.js, а файл карты — xx.js.map. Мы добавили номер версии md5 в файл js, поэтому фактическими файлами являются xx.md5.js и xx.md5.js.map (md5 изменяется в зависимости от содержимого).

 

проблема с разбором исходной карты

Думая, что это было наиболее сложно решить в исходной карте. Первоначально коллеги по бэкэнду думали, что исходная карта - это файлы, сгенерированные nodejs, они идут с бэкэндом или php, похоже, не могут его разрешить, если вы знаете принцип исходной карты, должны знать, что это только формат данных, и разработка языка не имеет значения. Я передал файл карты и информацию об ошибках бэкенд-сотрудникам, они использовали инструмент, чтобы успешно разрешить язык ответа, реализовать синтаксический анализ локальных файлов. Но нам нужно разрешить это автоматизировано, не всегда можно выйти вручную искать соответствующие файлы карты сделать искусственный магазин сообщений об ошибках синтаксического анализа. Поэтому нам нужно найти собственный файл карты серверной программы и разобрать сообщение об ошибке.

В результате есть две ключевые проблемы с бэкенд-парсингом:

  1. где хранится файл карты
  2. когда разбирать

①Где хранится файл карты?

Здесь мы говорим только о нашем решении, файл карты и исходный файл js упакованы в каталог одного уровня и загружены на сервер вместе (например, путь js — www.xxx.com/dist/index.md5. js адрес файла карты — www.xxx.com/dist/index.md5.js.map), сервер может найти файл карты по пути ошибки js плюс суффикс .map. В сжатом файле есть комментарий, описывающий sourceMappongURL, указывающий расположение файла карты. После открытия браузера отладчик найдет файл карты, и вы сможете увидеть исходный код в браузере. Во избежание такой ситуации сервер требуется конфигурация..js.mapфайлы с суффиксом недоступны. Если это так, сервер не может напрямую загрузить файл статического ресурса .map при разборе, а должен найти файл карты, соответствующий серверу локально, очень хлопотно настраивать путь и писать логику отдельно, а структуру папок изменен гибкий. Поэтому наше решение состоит в том, чтобы выполнить проверку разрешения токена.Файл карты должен быть добавлен с правильным параметром токена, и сервер вернет ресурс (xxx.js.map?token=xxxx), иначе nginx будет блокировать запросы без токена или неправильный токен.

 

②Когда анализировать

Существует два метода: первый заключается в том, что после того, как внутренний интерфейс получает сообщение об ошибке, он немедленно находит файл карты, анализирует его и сохраняет в базе данных. Один из них заключается в том, чтобы сначала сохранить полученную информацию, а затем проанализировать ее при запросе через интерфейс. Мы выбрали первое.После того, как интерфейс получает данные, бэкэнд проверяет, был ли текущий файл скачан локально по URL-адресу текущего файла с отчетом об ошибке.Если файл уже существует, он будет проанализирован непосредственно с локальным файлом. , Если нет, путь Добавьте параметры .map и token, загрузите соответствующий файл карты на локальный, а затем прочитайте текущий локальный файл и проанализируйте его.Проанализированные данные и отчетные данные сохраняются в виде записи. Если это последний метод, возникает много неприятных проблем, поэтому я не буду говорить об этом здесь.

Картинка подробно описывает наш процесс парсинга:

 

Возможна ситуация: Текущий проект обновился до версии 1.1, а ошибка в версии 1.0 ранее не срабатывала, в это время пользователь закешировал код версии 1.0 и сработала новая ошибка В это время , сервер хранит локальное хранилище.Если в файле карты нет такого файла, он принесет токен для загрузки файла карты, потому что текущая версия 1.1, исходный файл js был изменен, а версия md5 отсутствует больше не совместим, поэтому файл карты не может быть найден в настоящее время.Он не может быть проанализирован, поэтому в этом особом случае может быть сохранена только сообщенная информация errorInfo.

 

Как более плавно применять его в бизнес-проектах

В настоящее время метод js onerror имеет небольшой объем кода, и он будет добавлен позже. Текущая идея состоит в том, чтобы попытаться не слишком сильно контактировать с бизнес-кодом, а нужно только напрямую внедрять текущий js в каждый бизнес-проект.Каждый проект не нужно слишком сильно настраивать, и сделать его максимально простым.

 

оптимизация хранилища

Последнее сделает руководство предпосылкой для запроса и статистического журнала этих исключений, та же ошибка может загружать данные на ошибку сервера, проверить задний конец - это раздел отдельные записи, мы не можем различать между собой Дублирующие данные и не должны иметь возможность выполнять контрастность заднего поля. Тогда я думаю, чтобыСообщенный путь к файлу + строка + столбецИнформация собирается в поле для генерации md5, и md5 генерируется в соответствии с этим уникальным значением.В финальном запросе нужно запросить только текущее поле md5, чтобы узнать, сколько записей содержится в этой ошибке. Однако я слишком наивен. Разные браузеры сообщают о разных строках и столбцах ошибок. Одна и та же ошибка может генерировать разные строки md5. Даже если здесь есть проблема, я все равно использую это решение для сохранения md5 (по причинам ядра, мобильного. Разница между два конца все еще относительно малы, и текущее поле также может иметь определенное различие).

Основные данные, хранящиеся в нашем первом издании (есть некоторые общие, о которых я не буду говорить):

{
    "businessInfo": "{}",//业务项目自定义的数据
    "errorMd5": "80bb86b86da0607c0dc5c3a77e16eab6",//根据报错部分信息生成的md5
    "manualSendError": "{}",//手动上传的报错信息
    "pageUrl": "http://www.xxx.com/xxx.html",//放生报错的页面url
    "parseError": true,//解释是否失败
    "parsed": '{"col":0,"errKey":"list","file":"xxx.js","line":105}',//解析后的行列、文件路径和变量
    "raw": '{"msg":'', "fileUrl":'', "lineNo":'', "columnNo":'', "error":''}',//onerror的五个参数
    "userAgent": "Mozilla/5.0 (Linux; Android 6.0.1; Redmi 4X Build/MMB29M; wv)..." //navigator.userAgent
}

 

 

отправить электронное письмо

Напоминание по электронной почте является очень необходимой функцией, и функция напоминания по электронной почте была реализована в режиме реального времени. Создайте отдельный почтовый ящик для корпоративного почтового ящика компании и назовите его frontendmonitor@.Когда внутренний интерфейс получает ошибку, он отправляет проанализированные данные на внешний интерфейс через этот почтовый ящик для достижения эффекта напоминания. Если вы используете почтовый ящик QQ или личный почтовый ящик, вам необходимо включить службу smtp в своей учетной записи.В корпоративном почтовом ящике QQ эта функция включена по умолчанию. Почтовая функция должна обращать внимание на проблемы с производительностью и оптимизацией, а сервер не должен зависать из-за слишком большого количества внешних ошибок.

 

Оптимизация после фактического использования

  • Мы обнаружили, что переменные, сообщаемые разными браузерами, могут быть разными. Эта же ошибка сообщается о Chrome Browser и Firefox.columnNo Параметры немного смещены. Я проанализировал его с помощью двух видов отчетов об ошибках, как показано на рисунке ниже, код ошибки составляет все 18 строк, что не является проблемой.Ошибка Firefox является первой на рисунке ниже: console 18 0 true, chrome testBase 18 0 правда, количество строк не проблема, отклонение не влияет на нашу окончательную проверку ошибок Мой 18-строчный исходный код: console.log(testBase). testBase намеренно не объявлен, testBase undefined, проблема должна заключаться в переменной testBase, но с точки зрения отчета об ошибке действительно Google Chrome точнее. Хотя меня не волнует IE, количество столбцов ошибок, сообщаемых IE11, такое же, как и у Firefox.

​

  • Страница инициирует событие, чтобы сообщить об ошибке, и пользователь продолжает нажимать кнопку, а затем сообщение об ошибке будет продолжать появляться. Решение: сохраните последнее сообщение об ошибке и время и сравните одно и то же сообщение об ошибке, чтобы избежать повторной отправки в течение короткого периода времени.
  • Шаблон фреймворка сообщает об ошибке, которая фиксируется самим фреймворком и не вызывает срабатывание window.onerror.Необходимо использовать собственный глобальный мониторинг фреймворка для захвата информации и последующей загрузки вручную.Вот метод ручной загрузки необходимо добавить информацию об ошибке.
  • Для мониторинга проектов может потребоваться загрузка некоторой бизнес-информации по бизнес-причинам для облегчения анализа.Поэтому поле конфигурации зарезервировано.При загрузке ошибок запрос будет содержать информацию, связанную с бизнесом.

 

Суммировать

Такого рода некоммерческие услуги исходят из личного интереса и размышлений, и на вас нет давления со стороны высшего уровня, чтобы вы делали это или когда это будет сделано. С самого начала у меня была идея, я пошел на исследование, обратился за помощью к коллегам из бэкенда, начал работать и, наконец, приземлился. Этот процесс нужно сделать самому, потому что я боюсь, что я не смогу окончательно приземлиться, поэтому ловите время, шаг за шагом, чтобы реализовать идею каждой детали, пусть вещи приземляются и выходят в онлайн, как только можно, чтобы не затягивать с этим делом надолго. Как требователь, я лучше понимаю весь проект и свои собственные интересы, поэтому на этот раз я также немного изучил язык go, чтобы убедиться, что я могу понять внутренний код и понять внутреннюю логику, это лучше всего сделать небольшую разработку, в этот раз на базе кода back-end коллег реализована небольшая функция отправки писем.называю легко понять, а потом убегаю после загрузки.получил письмо с ошибкой , что испугало меня в спешке найти баг, а вскоре нашел проблему. Этот баг должен был существовать давно, но так как он не блокирует и не влияет на бизнес, то не обнаружен. что у нас есть эта функция мониторинга исключений внешнего интерфейса по-прежнему очень успешна! На более позднем этапе предстоит разработать множество функций, таких как статистика, визуализация данных, интеллектуальная сигнализация и так далее. Посадка первой версии заложила хорошую основу для будущих итераций и эволюции.

В процессе этого я хотел сделать все как можно скорее, и я был очень напряжен, и я не провел достаточно исследований, например, как это сделали некоторые существующие проекты с открытым исходным кодом. Позже я узнал от коллегиsentryПосле этих трехсторонних проектов с открытым исходным кодом я тоже чувствовал себя немного потерянным.Хотя я также решил свои потребности, трехсторонний проект с открытым исходным кодом представляет собой очень полную систему, которая предоставляет множество функций и намного мощнее, чем моя.В чем смысл ? Мне кажется, что я вообще не могу конкурировать с другими. Будет ли этот мой проект продолжать итерации в будущем? Нужно ли продолжать итерации? Когда в будущем возникнут особые потребности в настройке, может быть проще разработать свою собственную, чтобы лучше соответствовать бизнесу, но есть ли такая возможность? На этот раз лендинг уже удовлетворил мои первоначальные требования, а также может помочь решить текущую проблему, впереди еще много вызовов и итераций, пройду ли я его до конца или умру на полпути? Я хочу сказать:

 

Наконец, я хотел бы поблагодарить наших коллег из back-end за их мощную поддержку! ! ~

 

Обратите внимание на публичный аккаунт великого поэта и получайте свежие статьи в первый раз.

Категории