Внешний мониторинг ошибок — комбинация [Vue] и [Sentry]

Vue.js
Внешний мониторинг ошибок — комбинация [Vue] и [Sentry]

предисловие

В качестве фронтенда вы часто сталкиваетесь с такой ситуацией:

Клиент: Почему я не вижу данные на этой странице? ?
Я: (торопливо открываю сайт), данные на моей стороне показывают нормально!
Клиент: Нет! Я не могу видеть это здесь!
Я: (бессвязно), но я... я здесь нормальный
Клиент: БАЛАБАЛА

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

не знаюsentry? Посмотрите мою последнюю статьюПомните процесс развертывания Sentry

Первоначальная комбинация Vue и Sentry

ПостроитьSentryПосле этого нажмите «Создать проект», выберитеBrowser -> Vue, после завершения создания вы можете следовать подсказкам внутри илиОфициальный сайтучебник для работы, шаги следующие:

// 安装官方提供的库
yarn add @sentry/browser
yarn add @sentry/integrations

существуетmain.jsДобавьте следующий код в файл

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

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
    integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true
    })
    ]
})
// 关于 DSN 我在上一篇有介绍到

После добавления мыnpm run devДавайте посмотрим, просто сделайте ошибку где-нибудь в компоненте

Image.png

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

Image1.png

Указывает, что ошибка, которую мы только что вызвали, былаsentryСнято успешно. Нажмите, чтобы просмотреть подробности.

2019-04-26_113459.png

можно увидеть ошибкуthis.aa is not a function, так что мы изначально успешноvueа такжеsentryкомбинированный

Комбинация исходной карты

Выше мы успешноvueинтегрирован вsentryИ поймал ошибку, но не нашел проблему, хотя мы и знаем содержание ошибки, но не знаем, в какой строке какого компонента она находится. Это потому, что использованиеwebpackФайл js будет сжат и перепутан в процессе упаковки, поэтому, чтобы точно определить ошибку, нам нужноsourcemapтакже загрузитьsentryРазбор, вот два способа, можноОфициальный сайтПосмотреть информацию в

sentry-cli
@sentry/webpack-plugin

Здесь я выбираюsentry-cliЧтобы сделать,@sentry/webpack-pluginОн в основном используется для загрузки копии одновременно с пакетом webpack.sourcemapприбытьsentry

Установить глобально@sentry/cli

npm i -g @sentry/cli

После завершения установки войдите на веб-сайт для созданияauth token, Конкретные шаги заключаются в следующем:

нажмите账号->API keys, нажмитеCreate New Token

Image2.png

Следуйте схеме ниже, помнитеproject:releasesа такжеproject:writeтикать

Image3.png

сборка завершенаtokenПосле этого можно перейти к следующему шагу, войти в корневую директорию проекта и выполнить

sentry-cli --url http://xxx.xxx.xxx.xxx:9000 login

Image4.png

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

Далее мыsentryСначала установите номер версии для вашего проекта, чтобы он знал, где его искать.sourcemapразбирать

# sentry-cli releases -o 组织名 -p 项目名 new 版本号
sentry-cli releases -o sentry -p vue new pro@1.0.1
# Created release pro@1.0.1.

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

2019-04-26_141307.png

Тогда нам нужноmain.jsМодифицируем нашу конфигурацию в файле

Sentry.init({
    dsn: 'http://<publickey>:<secretkey>@xxx.xxx.xxx.xxx:9000/<project id>',
    release: 'pro@1.0.1', // 新增加的+
    integrations: [
    new Integrations.Vue({
        Vue,
        attachProps: true
    })
    ]
})

После завершения настройки выполнитеnpm run buildупаковать, а затемsourcemapзагрузить наsentry

sentry-cli releases -o 组织名 -p 项目名 files 版本号 upload-sourcemaps 打包后js的目录 --url-prefix 线上js访问地址

sentry-cli releases -o sentry -p vue files dev@1.0.1 upload-sourcemaps dist\static\js --url-prefix ~/static/js

обращать внимание! !,это--url-prefixэто путь, по которому вы получаете доступ к файлу js в Интернете,~Это корневой каталог вашего сайта, например, статические файлы моего сайта выглядят такhttp://192.168.144.163:8080/static/js/xxxx.js, то правильно заполнить приведенный выше пример, потому что корневая директория моего сайтаhttp://192.168.144.163:8080, после успешной загрузки вы можетеReleases -> Artifactsувидеть файл, который вы только что загрузили

Просто запустите один локальноnginxконфигурации, потому что вdevсреда недоступнаsourcemap, так и должно бытьprodЕго можно протестировать только в среде, продолжайте просто вызывать ошибку, проверьте на веб-сайте, вы найдете больше возможностей для просмотра исходного кода.

2019-04-26_143126.png

Чтобы мы могли успешно перейти к конкретным проблемам, которые возникают, какую строку в файле, файл карты вы хотите удалить, вы можете выполнить

sentry-cli releases -o 组织名 -p 项目名 files 版本号 delete --all

sentry-cli releases -o sentry -p vue files dev@1.0.1 delete --all

В общем, сделаноvueа такжеsentryКомбинация дегтя в бочке меда может заключаться в том, что каждый раз, когда вы выпускаете версию, вам может потребоваться один раз вручную загрузить файл исходной карты.Если вам интересно, вы можете изучить плагин веб-пакета.@sentry/webpack-plugin, и загрузите его вsentryидти.

возможные проблемы

Одной из проблем, которая занимает много времени, является загрузкаsourcemapВо время файловых операций это--url-prefixЗначение файла должно быть точным, и его не нужно заключать в кавычки.Следует отметить, что если файл загружается успешно, но конкретная строка все еще не отображается, большинство причин все же возможны.sourcemapАдрес файла неверен, в результате чего он недоступен, поэтому его нельзя разобрать, обратите на это внимание!

резюме

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

Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение ниже и постарайтесь ответить. На ошибки в тексте просьба указывать!

Категории