Доступ к часовому в проекте Vue

JavaScript Vue.js

Доступ к часовому в проекте Vue

Недавно во внутренний проект компании Vue был добавлен стек технологий sentry для отслеживания ошибок во время выполнения.
Поделитесь по этому вопросу, если есть какие-либо неполные или неправильные места, добро пожаловать на обмен.github

1. Система сбора журналов ошибок Sentry

Stop hoping your users will report errors
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.

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

1. Принцип часового (личное мнение)

Журнал ошибок кадра (1) сторожевой проект представляет собой набор среды выполнения, эта структура будет разделена на сервисную платформу и клиент.

    服务平台： 可以自己自己搭建，也可以使用官网的（免费、付费）
    客户端：从他的出发点是监控项目代码来理解就知道，需要嵌入项目中。作为前端的话第一个想到的就是插件了。

(2) Разнообразие языков, разработка и использование языков разнообразны, поэтому часовой поддерживает больше языков

(3) Как собирать журналы ошибок. Как загрузить журнал ошибок, сгенерированный в коде, на платформу службы sentry.

当你完成sentry配置的时候，你会得到一个称为“DSN”的值，看起来像一个标准的URL。
Sentry 服务支持多用户、多团队、多应用管理，每个应用都对应一个 PROJECT_ID，以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。
由此组成一个这样的 DSN：
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL 通常会是 http 或者 https，HOST 为 Sentry 服务的主机名和端口，PATH 通常为空。

2. Конфигурация сервисной платформы Sentry

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

2. Получите SENTRY_DSN (также называемые ключами клиента)

To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the SENTRY_DSN value). For more information on integrating Sentry with your application take a look at our documentation.

Если вы используете бесплатную часовую
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
PROTOCOL обычно http или https, HOST — это имя хоста и порт службы Sentry, а PATH обычно пуст.
Конкретные параметры можно просмотреть в разделе «Настройка проекта» в вашем проекте.

3. Настройки клиента

Доступ в клиенте прост, нужно только настроить плагин. Но обратите внимание, что это должно быть до настройки Vue. Содержимое конфигурации каждой клиентской платформы можно найти на официальном сайте.

import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';

Raven
    .config('https://60f9e820eb7b4a8f9beb62a314b1f80d@sentry.io/242345')
    .addPlugin(RavenVue, Vue)
    .install();

В-четвертых, после сообщения об ошибке

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

Пять, загрузка релизной версии sourceMap

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


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


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

Категории