vue доступ к сторожевому проекту

Vue.js

Введение в Sentry.

Sentry— это инструмент отслеживания ошибок с открытым исходным кодом, который помогает разработчикам отслеживать и исправлять ошибки в системе в режиме реального времени. Ориентирован на мониторинг ошибок и извлечение всей информации, необходимой для постобработки, поддерживает практически все основные языки разработки (JS/Java/Python/php) и платформа, а также предоставляет веб-интерфейс для отображения ошибок вывода. Официальный сайт Сентри:sentry.io/

сторожевая установка

sentryЭто инструмент с открытым исходным кодом, который можно создать самостоятельно. Официально поддерживает как установку, так и работуSentryсерверный метод,Dockerа такжеPython. Рекомендуемое использованиеDocker. Конечно, для тех, кто только начинаетsentryЕсли вы студент, вы также можете напрямую воспользоваться бесплатной услугой, предоставляемой официальным лицом, но есть некоторые ограничения. Давайте сначала познакомимся с тем, как использовать официальные бесплатные сервисы во фронтенд-проектах.sentry.

Как использовать часовой в своем проекте

  1. Сначала вам нужноsentryЗарегистрируйте аккаунт на официальном сайте. После регистрации выберите создание нового проекта,sentryПоддерживает несколько фреймворков, выбирайте среди нихvueСоздайте проект. Я создал проект под названием test.

  2. Создание страницы проекта приведет к автоматическому переходу на страницу проекта How to configure vue. Далее следуйте инструкциям по внедрению в код vue.sentry. в состоянии пройтиcdnилиnpmПредставлять. Мы используемnpmПредставлять. При импорте необходимо указатьinitФункция проходит аdsnпараметр. Этот параметр является единственным элементом, который мы только что создали, и система автоматически сгенерирует его при создании проекта. Если вы не передадите этот параметр,sentryОшибки отправляться не будут.

// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生产环境中让sentry报错
process.env.NODE_ENV === "production" && Sentry.init({
  dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

Добавьте в проект и директорию файл .sentryclirc, а токен в нем можно получить из ключей апи в аватарке в левом верхнем углу.

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test

Затем мы делаем ошибку в коде, мы можем сделатьsentryзахвачен. Как имитировать онлайн-среду для локального доступа к файлам в dist? нужно установить одинhttp-server, просто запустите службу http в папке dist.

npm i http-server 
cd dist
http-server -p 8888

Уведомление:Ошибки, обнаруженные sentry, не выводятся в консоль..

Вы можете увидеть в сети,sentryБыл отправлен неверный запрос со следующими параметрами запроса:

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

Просмотр сообщений об ошибках

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

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

Загрузить исходную карту

Есть несколько способов загрузки. в состоянии пройтиsentry-cliЗагрузить через командную строкуsource-map, но его нужно загрузить вручную. также можно использоватьwebpack-pluginЭтот плагин можно найти вbuildавтоматически загружать одновременноsource-map. В этой статье используется стратегия автоматической загрузки.

Конфигурация проекта:

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
    new SentryCliPlugin({
        include: "./dist",
        release: process.env.RELEASE_VERSION,
        configFile: "sentry.properties"
    })
]

// main.js
Sentry.init({
    dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
    integrations: [
        new Integrations.Vue({
            Vue,
            attachProps: true
        }),
        new Integrations.RewriteFrames()
    ],
    release: process.env.RELEASE_VERSION
});

// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
    NODE_ENV: '"production"',
    RELEASE_VERSION: `"${release}"`
};

Гарантированоpluginsа такжеSentry.initв обеих конфигурацияхreleaseНомера версий одинаковые, поэтомуsentryбыть способнымsource-mapФайлы находятся во взаимно однозначном соответствии. После модификации пересобираем проект, процесс сборки медленный:

После того, как мы переходим на задний план, мы можем видеть, что в версии есть еще одна версияtest-1версия, которая является версией, которую мы только что загрузили.

Нажмите, чтобы увидеть, что мы только что загрузилиsource-mapдокумент.

В это время мы снова вызываем ошибку, и мы видим конкретное местоположение ошибок.

GitHub, связанный с часовым

Его можно установить в Настройки -> ИнтеграцияsentryСвяжите различные сервисы, такие какgithub、jiraЖдать. связанныйgithubПосле этого вы можете напрямую создать задачу для исключения.

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

Открытьgithub,существуетsentryПод этим репозиторием я нашел дополнительную задачу, которую мы только что создали.

в нашемgithubпредставитьcommitВ то время, если вы добавите ненормальный идентификатор, например:

git commit -m 'Fixes TEST-3'

Это будет в следующем выпускеbuildкогда,sentryавтоматически изменит статус исключения сunresolvedсталиresolved, и выдаст разностный адрес этого представления.

Построить сторожевую службу

Есть два официальных способа построить часовую самостоятельно:

Докер рекомендуется. Давайте познакомимся с тем, как собрать sentry через докер.

Сначала вам нужно скачать докер Адрес настольной версии для Mac:Хубэй.docker.com/editions/co…

Он имеет встроенную командную строку docker, docker-compose и т. д.

Затем вам нужно перейти на github, чтобы тянутьSentry On-Premise, это официальный репозиторий для установки sentry через докер, в котором пошагово описано, как собрать sentry.

Создайте этапы обслуживания:

cd onpremise
// 创建本地数据库
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 创建环境配置文件
cp -n .env.example .env 
// 构建docker服务
docker-compose build
// 产生秘钥，将其作为SENTRY_SECRET_KEY加入到.env文件中
// 创建数据库，用交互式的提示生成管理员账号
docker-compose run --rm web upgrade
// 启动所有服务
docker-compose up -d

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

Дальнейшие операции аналогичны описанным выше.

Меры предосторожности

  1. При использовании локально собранного sentry для создания проекта я обнаружил, что столбец dsn был пуст, и система не генерировала его автоматически. Вам нужно склеить этот dsn самостоятельно. Он состоит из следующих частей, а именно протокола, открытого ключа, закрытого ключа, хоста, пути (обычно пустого) и идентификатора проекта.
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
//类似这样，把它放在sentry.init中的dsn即可
http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2
Категории