Фронтальное решение для мониторинга ошибок sentry

JavaScript

предисловие

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

исследование

Система мониторинга ошибок должна делать следующее

Более конкретноМониторинг ошибок -> Сбор ошибок -> Ошибки хранения -> Ошибки анализа -> Оповещения об ошибках -> Обнаружение ошибок -> Решение ошибок

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

Технические решения

  • Самостоятельное изучение
  • Фундебаг, часовой, летучая мышь...
  • Так как во фронтенде меньше 10 человек, у нас не так много сил заниматься самоисследованием по инфраструктуре, и тогда общие компании, которые платят, не захотят тратить деньги (как всем известно), поэтому мы выбрал более зрелое зарубежное решение.sentry[1]

sentry

  1. Есть бесплатная версия, платная версия и бесплатная версия. Платная версия на самом деле похожа на бесплатную версию.Бесплатной версии нам достаточно.Платная версия в том, что он может помочь вам во всем.Нужно только установить sdk.
  2. sentry — это платформа регистрации и агрегирования событий в режиме реального времени. Он специально разработан для отслеживания ошибок и извлечения всей информации, необходимой для выполнения соответствующих действий после вскрытия, без каких-либо хлопот, связанных с использованием стандартных циклов обратной связи с пользователем.

Sentry 是一个日志平台，分为客户端和服务端，客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间，程序出现异常就向服务端发送消息，服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry由python编写，源码开放，性能卓越，易于扩展，目前著名的用户有Disqus, Path, mozilla, Pinterest等

Какие функции

проект

Настройте несколько проектов, как показано ниже.

Сообщенные проблемы

Это все исключения в вашем приложении

  1. Общее количество вопросов относится к различным текущим вопросам, а количество повторений одного и того же вопроса будет отражено в числе в конце.
  2. Затем администратор может проверить этот вопрос и назначить его другим участникам.
  3. Некоторые проблемы можно проигнорировать или решить, и они не появятся в вашем списке позже.
  4. Существуют также настраиваемые поиски: наиболее часто встречающиеся, время последнего появления, первое появление и т. д.
  1. URL-адрес, по которому произошла текущая ошибка
  2. Название браузера, версия, у.е.
  3. Информация об устройстве пользователя, такая какXiaoMi MI MAX 3 android10.0 ipxxx
  4. Основная информация о пользователе, такая как имя, идентификатор пользователя и другая информация, связанная с бизнесом, должна быть настроена самостоятельно.
  5. Если на странице есть информация xhr, будет отображаться код состояния ответа на запрос информации.
  6. Нарисуйте ключевой момент — при обнаружении ошибки js будет распечатан стек вызовов, тип ошибки и статья о возникновении ошибки.sourcemapВы можете четко определить местонахождение кода до сжатия и обфускации до какой строки

визуализация

  1. Встроенная визуализация данных различных измерений
  2. Если вы не удовлетворены, он также предоставляет некоторые API, напримерgitlab и github предоставят один и тот же API для вторичной разработки

Вызовите полицию

Можно установить некоторые дополнительные плагины, напримерРобот DingTalk, напоминание по электронной почте

Установить и развернуть

Способ установки

  • Python
  • Docker
    используется здесьdockerУстановка проще

окружающая обстановка 

MIN_DOCKER_VERSION='1.10.0' //docker -v
MIN_COMPOSE_VERSION='1.17.0' //docker-compose -v
MIN_RAM=3072 # MB //你的内存至少3G

Обработать

Генерация в один клик

Официальный метод генерации скрипта в один клик был предоставлен в 2019 году, а склад находится здесь.onpremise[2]

git clone https://github.com/getsentry/onpremise
cd onpremise
./install.sh

Если докер не настроен с внутренним зеркалированием, предполагается, что он будет очень медленным.Давайте упомянем зеркалирование конфигурации.

## 有的话就忽略
mkdir /etc/docker 
## 没有的直接执行
vim /etc/docker/daemon.json
{
 "registry-mirrors" : [
   "https://mirror.ccs.tencentyun.com",
   "http://registry.docker-cn.com",
   "http://docker.mirrors.ustc.edu.cn",
   "http://hub-mirror.c.163.com"
 ],
 ...
}

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

docker-comose up -d

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

Ручная установка

Подготовить

  • Docker-ce
  • Docker-compose

Зеркальная тяга

docker pull sentry
docker pull redis
docker pull postgres

запускать

docker run -d --name sentry-redis --restart=always redis   ###保证了，异常自动拉起
docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry --restart=always postgres

Сгенерировать уникальный ключ

docker run --rm sentry config generate-secret-key
12345  ###打印出secret-keys,这里最好复制一下，接下来会用到

Инициализировать и создать администратора

docker run -it --rm -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade

Запустить три службы

### web服务
docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY='12345' --link sentry-redis:redis --link sentry-postgres:postgres --restart=always sentry
### cropn 服务
docker run -d --name sentry-cron -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron
### work 服务
docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY='12345' --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker

Открыть
Пароль учетной записи — это пароль администратора, которого вы только что создали.

Настройте фоновые адреса, адреса электронной почты для предупреждений и другие функции.

Интерфейсный доступ

Создать проект

Здесь мы выбираемjavascriptназвание проектаmyapp

Затем есть еще один проект в фоновом режиме часового, а затем он представлен в нашем внешнем проекте, как показано ниже.

// 脚本引入
<script
  src="https://browser.sentry-cdn.com/5.22.3/bundle.tracing.min.js"
  integrity="sha384-HfEJlGrJtFM0B01Wt4sGzTbxWqLMcMeGAXCbyQyB+iK9BhnDmNAtIGovhekIQOa2"
  crossorigin="anonymous"
></script>
// npm 
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: 'xxxx',
  integrations: [
    new Integrations.BrowserTracing(),
  ],
  tracesSampleRate: 1.0,
});

Таким образом, весь процесс пройден, и его можно использовать.

Загрузка исходной карты

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

Подготовить

  1. Для загрузки исходной карты используется фоновая конфигурация часового authToken, проверьте его, как показано ниже.
  1. Загрузите плагин веб-пакета
npm i @sentry/webpack-plugin -D

Затем создайте новый в корневом каталоге.sentryclirc

[defaults]
### 你的域名
defaults.url='http://localhost:9000'
### 组织团队名默认是 sentry
org=sentry
### 项目名称
project=myapp
### 步骤1创建的
[auth]
token=1234

Настроить плагин

const SentryWebpackPlugin = require('@sentry/webpack-plugin');
if (process.env.NODE_ENV !== 'development') { // 注意只在生成环境开启，不然npm run dev也会上传
    new SentryWebpackPlugin({
      release: Date.now(), // 唯一标识，可以用其他的比如 hash
      include: './build', // 要上传的文件夹 有的叫 dist
      ignoreFile: '.sentrycliignore', // 可不要
      ignore: ['node_modules', 'config-overrides.js'], 
      configFile: '.sentryclirc' // 默认同级，如果不一样需要用node path模块处理一下
    });
  }

затем запустите npm run build

Creating an optimized production build...
> Found 10 release files
> Analyzing 10 sources
> Rewriting sources
> Adding source map references
> Bundled 10 files for upload
> Uploaded release files to Sentry
> File upload complete

Поздравляем, вы успешно настроили

Другие распространенные API

Возьмите на себя инициативу сообщить

Sentry.captureMessage('Hello, world!'); // 上报信息
Sentry.captureException(new Error('Good bye')); // 上报异常
Sentry.captureEvent({ // 上报事件
  message: 'Manual',
  stacktrace: [
    // ...
  ],
});

Настроить информацию о пользователе

Sentry.configureScope((scope) => {
        scope.setUser({
          ...data.userInfo,
          time: new Date().toLocaleString()
        });
      });

разное

  • Почта
  • машина для ногтей Вы можете скачать некоторые конфигурации плагина самостоятельно

наконец

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

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

[1]

sentry: https://sentry.io/welcome/

 [2]

onpremise: https://github.com/getsentry/onpremise

В этой статье используетсяmdniceнабор текста

Категории