Доступ к часовому - пусть ваши ошибки перестанут повторяться

монитор

предисловие

Каковы текущие методы поиска ошибок во фронтенд-проектах?

  1. Тестирование студентов тестирует. Минусы: версия браузера сейчас, слишком много моделей телефонов, проблемы совместимости сложно точно измерить. Кроме того, некоторые проекты являются очень длительным и сложным процессом, студенты не могут тестировать каждый раз, чтобы обеспечить 100% покрытие дела;
  2. Обзор кода коллеги. недостаток: Недостатком этого является то, что затраты времени высоки, и в большинстве случаев проверка кода находит только проблемы со стилем кода.Что касается логики и бизнеса, у других студентов нет времени на углубленное чтение;
  3. Жалобы и отзывы пользователей после выхода в интернет. Недостатки: Модели пользователей и браузеры в полном расцвете, и нам сложно воспроизвести проблему. Кроме того, большинство пользователей не понимают профессиональной терминологии, неточно выражают проблемы, а затраты на общение высоки, что приводит к очень низкой эффективности решения задач.

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

Что такое Сентри?

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

Использование sentry требует объединения двух частей: клиента и сервера. Клиент — это элемент, за которым вам нужно следить. Сервер представляет собой платформу управления данными, которая отображает собранную информацию об ошибках и информацию о проекте. И поддержка управления проектами, управление членами группы, оповещение по электронной почте и другие функции.

Серверная платформа может быть построена самостоятельно, или вы можете напрямую использовать официальную платформу SENBY.

Кроме того, sentry очень мощен в поддержке нескольких языков и фреймворков. (docs.sentry.io/platforms/) Здесь я только изучаю, как используется передняя часть. Другие языки и фреймворки, а также построение сервера пока не задействованы.

Мы уже знаем, что такое часовой, так как же его использовать?

Доступ к Часовому

Новый проект

Во-первых, новый проект завершается на платформе Sentry Server.часовой.IO/.После создания нового проекта будет сгенерирована строка DSN. DSN — это ключ для связи проекта, о котором мы хотим сообщить, и сторожевого сервера. Каждый раз, когда мы создаем новый проект на сервере sentry, мы получаем уникальный DSN. При инициализации проекта необходимо настроить DSN для проекта, таким образом, клиент сообщает об ошибке, а сервер может поймать ошибку соответствующего проекта.

Установить SDK

Установка SDK точно такая же, как мы обычно ссылаемся на сторонние пакеты в наших проектах. Существует два метода импорта cdn и внедрения пакетов npm, и конфигурация этих двух методов импорта также одинакова.

<script src="https://browser.sentry-cdn.com/5.6.1/bundle.min.js" integrity="sha384-pGTFmbQfua2KiaV2+ZLlfowPdd5VMT2xU4zCBcuJr7TVQozMO+I1FmPuVHY3u8KB" crossorigin="anonymous"></script>


npm install @sentry/browser

настроить

// When using npm, import Sentry
import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915' });

Уведомление:Если это проект Vue, пожалуйста, не используйте sentry в среде разработки.. Потому что, когда проект Vue использует sentry, вам нужно настроить @sentry/integrations. А @sentry/integrations реализуется путем настройки хука Vue errorHandler, который перестанет активировать оригинальный logError Vue. Приведет к тому, что ошибки в компонентах Vue не будут отображаться в консоли. Таким образом, проекты vue не используют часовой в среде разработки.

Позвольте мне добавить, почему проекту Vue необходимо настроить интегратор часового? Упомянутый здесь интегратор sentry — это SDK, используемый для улучшения API-интерфейса sentry. Проект Vue настраивает его так, чтобы он перехватывал имя компонента и состояние реквизита, которые вызывают ошибку.

  Кроме того, Integrations.Vue имеет следующие параметры конфигурации:

1. Vue: необязательный, если вы не передаете его, должен существовать window.Vue;

2. attachProps: необязательно, значение по умолчанию — true. Если для него установлено значение false, Sentry будет подавлять отправку имени активного компонента и состояния реквизита для всех компонентов Vue. .

3. logErrors: необязательный, по умолчанию false. Если установлено значение true, Sentry будет вызывать исходную функцию Vue logError.

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
  release: VERSION,
  dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true // 是否上报组件的 props
    })
  ]
})

Расширенное использование

Мы уже знаем, как подключить Sentry к проекту, и на данный момент Sentry может помочь нам сообщить информацию об ошибках. Sentry сообщит обо всех неперехваченных ошибках (включая исключения window.error и promises), выдаваемых страницей по умолчанию. Тем не менее, sentry также предоставляет нам некоторые более продвинутые функции. Далее, давайте посмотрим на расширенное использование sentry.

Общие функции

  1. Активно ловите и сообщайте об ошибках. Существует два способа проактивного отчета: Один из них — передавать текстовую информацию напрямую, а параметр — это строка; Другой — сообщить об объекте ошибки, а параметр — объект ошибки или объект класса.
try {
    aFunctionThatMightFail();
} catch (error) {
    // 上报error对象
    Sentry.captureException(error);
}
// 上报文本信息
Sentry.captureMessage('Something went wrong');
  1. Обогащайте данные контекста BUG.

Контекстная информация, предоставляемая Sentry, имеет 5 пользователей, теги, уровень, отпечаток пальца, дополнительные данные. Мы можем установить эту информацию, установив область выше. Есть две настройки: Обогащение данных контекста BUG на самом деле означает добавление пользовательской информации в отчеты о событиях.

Sentry предоставляет нам настраиваемую контекстную информацию: пользователь, теги, уровень, отпечаток пальца, дополнительные данные.

Мы можем определить эту информацию, установив ее в области видимости. Есть две настройки:

Одним из них является sentry.configScope, который устанавливает информацию в глобальную область sentry. Информация, установленная таким образом, будет переноситься всеми последующими отчетными событиями.

Другой вид sentry.withScope, этот метод установит временную информацию для текущего события. Его можно понимать как разовую информационную установку. Данные, установленные таким образом, вступят в силу только в текущем событии. Он используется, когда мы хотим установить информацию индивидуально для события, не затрагивая «глобальную» область.

Вот как добавить контекстную информацию:

// 设置用户信息： 
scope.setUser({ “email”: “xx@xx.cn”})
// 给事件定义标签： 
scope.setTags({ ‘api’, ‘api/ list / get’})
// 设置事件的严重性：
scope.setLevel(‘error’)
// 设置事件的分组规则： 
scope.setFingerprint(['{{ default }}', url])
// 设置附加数据： 
scope.setExtra(‘data’, { request: { a: 1, b: 2 })

Используйте scope.setUser для установки идентификатора пользователя, имени пользователя, IP-адреса, электронной почты и другой информации.

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

scope.setLevel используется для установки серьезности события. Параметры включают: фатальный, ошибка, предупреждение, информация, отладка. ( фатальный : это несчастный случай, ошибка представляет собой ошибку, и все зарегистрированные события по умолчанию являются ошибкой)

Используйте scope.setFingerprint для настройки правил группировки событий. Sentry имеет стратегию группировки по умолчанию. Но это иногда не соответствует нашим потребностям. Например, sentry сгруппирует все UnhandledRejections вместе, но на самом деле нам нужна более детальная группировка, например группировка по URL-адресу интерфейса. Здесь вы можете использовать scope.setFingerprint(['{{ default }}', url]) для установки.

Sentry.setextra может установить дополнительные данные, такие как параметры записи запросов AJAX, значения возврата, информация заголовка и т. Д.

  1. Загрузите файл SourceMap.

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

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

так,Официально рекомендуется загружать исходную карту на сервер sentry..

Есть 3 способа загрузить исходную карту на сервер sentry.

Первый — использовать плагин webpack, предоставленный sentry, для автоматической загрузки, когда проект упакован. Этот метод требует только добавления соответствующей информации о конфигурации в конфигурацию упаковки веб-пакета, что является наиболее удобным методом среди трех методов. Поэтому этот метод в основном используется в промышленности.

Во-вторых, использовать сценарий загрузки, предоставленный sentry, sentry-cli upload.

Третий — прямой вызов API-интерфейса sentry для загрузки, который имеет много параметров конфигурации и является более хлопотным.

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

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

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

разное

  1. Собирайте отзывы пользователей о сбоях.
  2. Добавляйте события фильтра и пользовательскую логику в хуки, такие как beforeSend.
  3. addBreadcrumb добавляет запись о поведении и т. д.
Sentry.init({
    dsn: 'https://e88fad1ac10a4d86ba291f17f54b653c@sentry.io/1509915',
    beforeSend(event, hint) {
        // Check if it is an exception, and if so, show the report dialog
      if (event.exception) {
        Sentry.showReportDialog({ eventId: event.event_id });
      }
      return event;
    }
  });

Чтобы получить отзывы пользователей, нужно вызвать метод showReportDialog в хуке beforeSend в sentry. Таким образом, при возникновении ошибки клиент выводит всплывающее окно, в котором пользователь может заполнить информацию об ошибке.

Кроме того, часовой также добавил концепцию хлебных крошек. Хлебные крошки в sentry на самом деле представляют собой некоторые журналы и события, автоматически записываемые sentry. Например, изменения URL-адреса браузера, запросы ajax, предыдущие события ошибок и т. д. Регистрация этой информации может предоставить контекст для текущей ошибки, воспроизвести шаги, которые привели к ошибке, и предоставить нам важную информацию для воспроизведения и отладки ошибки. Sentry также предоставляет настраиваемые API для добавления и отключения хлебных крошек. Обычно это не используется, поэтому я не буду вдаваться в подробности.

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

Категории