предисловие

Учитывая, что фронтенд развивается в разнонаправленном направлении, сценарии становятся все более сложными, а в производственной среде часто возникают проблемы, которые невозможно воспроизвести в локальной среде и тестовой среде. Более того, мы не можем предсказать конкретное поведение и действия пользователей, а внутренний мониторинг ошибок может отслеживать журнал ошибок только после того, как запрос инициирован, поэтому мы можем полагаться только на отзывы пользователей при возникновении ошибки. Однако такая обратная связь не в режиме реального времени и часто содержит только скриншоты или текстовые описания, которые не могут предоставить другую ключевую информацию, которая нам нужна. информация о стеке, которую мы получаем, не слишком велика.

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

В этой статье ориентирована на интерфейс Project Project Centry, объясняют набор шагов и правил, а также другие фоновые инструкции Sentry.

Почему часовые

1. Зрелая платформа мониторинга уже на рынке

• Fundebug
• Bugsnag
• Badjs
• Sentry

2. Преимущества Сентри

• Открытый исходный код, доступна бесплатная версия
• Вы можете развернуть свой собственный сервер, безопасный
• Идеальное сообщение об ошибке и механизм предупреждения
• Простота и удобство использования, низкая стоимость разработки
• Отслеживание ошибок и передача статуса своевременны и удобны
• Богатый SDK
• активное сообщество

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

Введение

Sentry is a service that helps you monitor and fix crashes in realtime. The server is in Python, but it contains a full API for sending events from any language, in any application.

Sentry — это сервис, который помогает отслеживать и исправлять ошибки в режиме реального времени. Сервер использует Python, но включает полный API для отправки событий с любого языка в любом приложении.

• Официальный сайт:sentry.io
• Сообщество:forum.sentry.io

концепция

• Событие: событие.

Каждый раз, когда создается запись журнала, каждое событие имеет много метаинформации, включая уровень события, информацию о проекте, среду и т. д. Его можно просмотреть, щелкнув данные «JSON», соответствующие конкретному событию.

• Вопрос: Проблема.

Исключение, сгенерированное в одном и том же месте, называется Issue (агрегация однотипных проблем). Если две ошибки происходят в одном и том же месте, будут сгенерированы два события Event, но только одна Issue.

• DSN: ключ клиента (специфический для проекта).

DSN — это URL-адрес, содержащий соответствующую ключевую информацию. Клиент и сервер (сентри-сервер) взаимодействуют через этот DSN и сообщают информацию об ошибках.

• Токен аутентификации: токен авторизации.

Токен авторизации позволяет использовать Sentry API на основе вашей учетной записи. В основном мы используем @sentry/cli для таких операций, как загрузка файлов sourceMap. Sentry/cli вызывает соответствующий метод API на основе токена аутентификации.

• Организация: Название организации.

Соответствует названию организации на сторожевом сервере, развернутом компанией.

• Релиз: номер версии.

• Проект: Имя клиента. (Конкретное имя проекта часового доступа)

• Тег: тег.

развертывать

Хотя Sentry официально предоставляет бесплатную версию, мы по-прежнему рекомендуем создавать службу Sentry с точки зрения безопасности и функциональных ограничений. Официальный предоставляет два способа установки: через установку Python или через установку Docker. Официальная рекомендация — использовать Docker для развертывания, так как официальная документация очень подробная, здесь она не будет подробно останавливаться, следует отметить, что соответствующие конфигурационные файлы должны быть изменены в соответствии с реальными потребностями.

• Установите Docker-Compose
• Вытащите репозиторий Sentry
• Измените соответствующий файл конфигурации
• Сопоставление доменных имен
• Создать пароль администратора и пользователя

доступ

1. Создайте проект

• Создайте новый проект на сервере Sentry: ProjectName (название проекта), выберите Team.
• Выберите соответствующий шаблон языка разработки, здесь выберите Vue.

2. Проектный доступ к Sentry

• После создания проекта появится подробный документ с шагами настройки, и вы сможете настроить его в соответствии с документом.

• Установить зависимости

$ yarn add @sentry/browser -D
$ yarn add @sentry/integrations -D

• Создать экземпляр Sentry в файле входа

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
Sentry.init({
    dsn: 'https://xxx.sentry域名/项目id',
    integrations: [new Integrations.Vue({Vue, attachProps: true})],
})

P.S. Здесь dsn — это ключ клиента, соответствующий только что созданному проекту, который можно просмотреть в Project -> Settings -> Client Key (DSN).

3. Загрузите исходную карту

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

Sentry официально предоставляет два способа загрузки sourceMap: с помощью командной строки Sentry-cli и плагина webpack. Потому что метод командной строки слишком громоздкий, и он оторван от концепции фронтенд-инжиниринга. Поэтому файл sourceMap загружается с помощью подключаемого модуля веб-пакета.

• Установите плагин веб-пакета

yarn add @sentry/webpack-plugin -D

• Добавьте файл конфигурации Sentry в корневой каталог проекта: .sentryclirc

@sentry/cli автоматически проверит информацию в файле конфигурации при загрузке файла исходной карты и использует

[defaults]
url=https://xxxxxx       //  - sentry服务器地址
org=xxx                  //  - 组织名称
project=projectname      //  - 项目名称
[auth]
token=xxx                //  - auth token

P.S. Обратите внимание, что применяемый здесь токен аутентификации должен выбирать разрешения project:read и project:releases.

• Добавить плагин в файл конфигурации webpack

const SentryCliPlugin = require('@sentry/webpack-plugin')
const version = '' // 版本号
config.devtool('source-map')
config.plugin('SentryCliPlugin').use(SentryCliPlugin, [{
  release: version,
  // 打包后的代码目录 根据项目实际调整
  include: './dist',
  // url路径访问到的js资源前缀 根据项目实际调整 默认不用动
  // urlPrefix: "~/static/js/",
  ignore: ['node_modules'],
  setCommits: {
    // ==================== 需要改成对应项目的git地址=============
    repo: 'https://xxx.xx.xx',
    // ==================== 需要改成对应项目的git地址=============
    auto: true,
  },
}]
)

Здесь следует отметить несколько моментов:

• Загруженный формат SourceMap должен быть "source-map".
• Версия номера версии может быть установлена ​​в соответствии с реальной ситуацией и спецификациями кодирования компании, и этот номер версии необходимо заполнить при входе (оставить прежним)
• Параметр urlPrefix должен соответствовать фактическому пути к ресурсу (подробнее будет объяснено позже).

4. Удалите SourceMap после загрузки в sentry

Поскольку плагин @sentry/cli не удаляет автоматически соответствующий файл карты после загрузки файла исходной карты на сервер sentry, для обеспечения безопасности кода сайта файл карты необходимо удалить после загрузки.

• использоватьclean-webpack-pluginплагин

config.plugins.push(
  new CleanWebpackPlugin({
    cleanAfterEveryBuildPatterns: ["./dist/js/*.js.map"]
  })
)

• Используя rimraf, выполните удаление в скрипте после сборки.

"postbuild:prod": "rimraf ./dist/js/*.js.map"

• При загрузке файлов на сервер после упаковки исключить файлы карты

5. Дифференцируйте окружающую среду

Чтобы избежать слишком большого количества бесполезной информации о тревогах в проекте, вы можете различать среду с помощью настроек кода и выполнять разные операции для разных сред. Вот различие, основанное на переменной среды BUILD_ENV (введенной в команду скрипта). Следующие места должны быть соответствующим образом изменены: (выделенная жирным шрифтом часть - это недавно добавленный измененный код)

• команда сценария package.json

"build:test": "cross-env BUILD_ENV=test vue-cli-service build",
"build:prod": "cross-env BUILD_ENV=production vue-cli-service build",

• Экземпляр генерации входного файла

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'
const isProd = process.env.BUILD_ENV === 'production'
isProd && Sentry.init({
    dsn: 'https://xxx.sentry域名/项目id',
    integrations: [new Integrations.Vue({Vue, attachProps: true})],
})

• конфигурационный файл вебпака

const SentryCliPlugin = require('@sentry/webpack-plugin')
const version = '' // 版本号
const isProd = process.env.BUILD_ENV === 'production'
config.when(isProd, config => {
  config.devtool('source-map')
  config.plugin('SentryCliPlugin').use(SentryCliPlugin, [
    {
      release: version,
      // 打包后的代码目录 根据项目实际调整
      include: './dist',
      // url路径访问到的js资源前缀 根据项目实际调整 默认不用动
      // urlPrefix: "~/static/js/",
      ignore: ['node_modules'],
      setCommits: {
        // ==================== 需要改成对应项目的git地址=============
        repo: 'https://xxx.xx.xx',
        // ==================== 需要改成对应项目的git地址=============
        auto: true,
      },
    },
  ])
})

• Наконец, вы также можете выборочно изменить метод сообщения об исключениях Sentry.

import * as Sentry from '@sentry/browser'
const isProd = process.env.BUILD_ENV === 'production'
function ResetCaptureout(Sentry: any) {
  if (isProd) return Sentry
  Sentry.captureException = function() {
    const args = Array.prototype.slice.call(arguments).join(' ')
    return console.log('%csentry：', 'color:red;', args)
  }
  Sentry.captureMessage = function() {
    const args = Array.prototype.slice.call(arguments).join(' ')
    return console.log('%csentry：', 'color:green;', args)
  }
  return Sentry
}
Sentry = ResetCaptureout(Sentry)

6. После выполнения вышеперечисленных действий вы можете зайти на сервер Sentry для проверки после передислокации

• Проверьте, сгенерирована ли соответствующая версия:Проект -> Версия

• Проверьте, успешно ли загружен файл SourceMap:Нажмите, чтобы ввести версию -> артефакты (артефакты)

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

расширять

• Ассоциация веб-перехватчика

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

• Путь: «Элементы» -> «Настройки» -> «Устаревшие интеграции» -> «Выбрать WebHOOK» -> «Открыть коммутатор» -> «Настроить плагин».

• Интеграция с репозиторием GitLab

Интегрируя репозиторий Gitlab, мы можем связать развертывание версий, записи отправки, проблемы с часовым и т. д.

• Путь: Sentry -> Настройки -> Интеграция -> GitLab -> Добавить

• После нажатия «Добавить другой» появятся подробные инструкции по эксплуатации.
• После установки вы можете выбрать соответствующий склад в группе, чтобы добавить
• Ассоциация проблем

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

Настройки будильника

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

Правила предупреждений

• установить путь

Sentry -> Проект -> Настройки -> Оповещения -> Редактировать/Добавить

• Описание опций

• Событие видно: когда происходит событие

• Проблема впервые замечена: первое появление ошибки

• Проблема меняет состояние с решенной на нерешенную: пересмотрите сценарий исправленной проблемы.

• Проблема меняет состояние с игнорируемой на нерешенную: напоминание, когда проблема, «игнорируемая» при условиях xx, запускается повторно.

• Проблема наблюдается более x раз за раз: для некоторых известных проблем низкого уровня, которые не влияют на использование, вы можете установить количество раз, прежде чем будет поступать сигнал тревоги.

• Теги события совпадают с xx, равными или не равными xxx: Принимайте соответствующие решения на основе значений тегов событий.

• Уровень события равен/не равен xxx: выберите уровень события (неустранимый/ошибка/предупреждение/журнал)

• триггерное действие

Когда сгенерированное событие соответствует правилам тревоги, запускается действие напоминания. Вы можете выбрать электронную почту или другие интеграции. Поскольку компания использует Feishu в качестве ежедневного офисного мессенджера, здесь настроен запуск Feishu WebHook. Эффект следующий:

Входящий фильтр

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

• установить путь

Sentry -> Проекты -> Настройки -> Входящие фильтры

• Просмотр условий ошибки фильтра

Issue Owners

С помощью параметра «Владельцы проблемы» мы можем автоматически установить связь между проблемой и ответственным лицом при возникновении проблемы и в то же время напрямую отправить электронное письмо или уведомление Feishu соответствующему ответственному партнеру. Существует два метода настройки,сопоставляются в соответствии с регулярными выражениями.

• Путь (path): указав каталог, в котором находится исходный файл, и владельцев

• Маршрутизация страницы (url): путем указания конкретной маршрутизации страницы и владельцев

решение ошибки

• Resolve
  • Текущая версия решает: после выпуска версии измените статус проблемы.
  • Решено в следующей версии: проблема будет решена сразу после ее обнаружения, и код будет запущен в следующей версии.
  • другие версии: вообще не используйте эту опцию
• Ignore
  • измерение времени: Игнорировать до xx времени (настраиваемое время)
  • Размерность количества: Игнорировать до xx раз больше
  • Пользовательский параметр: игнорировать, пока еще xx пользователей не воспроизведут эту ошибку

принцип

Тип ошибки внешнего интерфейса

• Немедленная ошибка запуска: ошибка кода
• ошибка загрузки ресурса
• Ошибка загрузки изображения

Как сообщать об ошибках

• Отчеты с использованием сетевых запросов
• Отправить с картинками

Принцип реализации часового

• Запустите инициализацию, настройте выпуск и проект dsn и другую информацию, а затем подключите объект часового к глобальному объекту.
• Переопределите метод window.onerror.

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

• Переопределите метод window.onunhandledrejection.

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

1. Если вы получаете объект ErrorEvent, вы можете напрямую удалить его свойство ошибки, которое является соответствующим объектом ошибки.
2. Если получено DOMError или DOMException, имя и сообщение могут быть проанализированы напрямую, поскольку такие ошибки обычно вызваны использованием устаревшего DOMAPI, а информация о стеке ошибок не прилагается.
3. Если получен стандартный объект ошибки, не обрабатывать
4. Если получен обычный объект JavaScript
5. Используйте ajax загрузку

Когда произойдет текущее завершение, запрос FETCH в конечном итоге будет вызван на соответствующем сервере SENTRY, который требуется для использования DSN, включенного при инициализации Sentry.

Побить пит-рекорд

• urlPrefix

При загрузке файла sourceMap путь файла статического ресурса после упаковки и окончательной загрузки разных проектов может отличаться. Поэтому вам нужно настроить эту опцию urlPrefix. Этот параметр означает полный путь к соответствующему файлу ресурсов в производственной среде после того, как проект будет подключен к сети. Среди них ~ представляет собой корневой каталог веб-сайта. Следующий пример иллюстрирует:

Доменное имя сайта:www.demo.com

Путь статического ресурса:

woohoo.demo.com/assets/is/1…

woohoo.demo.com/assets/is/1…

Тогда вот: ~=www.demo.com

Параметр urlPrefix должен быть настроен как: ~/assets/js/

P.S. По умолчанию ~/static/js/

В качестве примера возьмем картинку выше:

Когда Sentry извлекает ресурсы, путь следующий: имя домена/js/chunk-xxxx.js

• sourceMap должен иметь тип "source-map", в противном случае ошибка не может быть устранена.
• DSN настроен как заголовок протокола HTTPS, поэтому он должен решать междоменные проблемы.
• Ошибки Sentry можно просмотреть с помощью параметра сети консоли.
• Если вы столкнулись с проблемами, бегите к сообществу часовых или копайтесь в предыдущих записях о проблемах, которые могут решить 80% проблем.

Суммировать

Бизнес-сценарии фронтенд-проектов становятся все более сложными, часто появляются странные баги, а тестами сложно охватить 100% сценариев. Некоторые небольшие проблемы с кодом могут иметь непредвиденные последствия. Вместо того, чтобы ждать, пока пользователи узнают о проблеме, лучше обнаружить ее на ранней стадии с помощью системы мониторинга и уничтожить до того, как она нанесет реальный ущерб.

использованная литература

У-у-у, Момонга, Талант/поезд/этот-сп/AR… zhuanlan.zhihu.com/p/75385179 nuggets.capable/post/684490… zhuanlan.zhihu.com/p/75577689 zhuanlan.zhihu.com/p/89539449

Текст｜Эван

Обратите внимание на технологию Dewu и объединитесь, чтобы двигаться к облаку технологий