Начать работу с часовым

монитор

Знакомство с часовым

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

Установка Sentry

  • Официальная рекомендация:Docker& Python
  • Официальная платформа:sentry.io/

Использование часового в проекте Vue

  • Создайте новый vue-проект

$ npm install @sentry/browser
$ npm install @sentry/integrations

// main.js
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

process.env.NODE_ENV === "production" &&  Sentry.init({
  dsn: 'https://e028cb7b8dd645978cf5d84a@sentry.io/18726',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

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

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

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

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

  • Создайте в проекте новый файл .sentryclirc.

    [defaults]
url = 'https://sentry.io/'
org = 'bignox'
project = 'test'
[auth]
token = cvbfdhb343h54h54546b5hn76

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

  • использовать в проекте@sentry/webpack-pluginПлагин, официально предоставленное компанией sentry автоматизированное решение, которое может автоматически загружать файлы исходной карты во время сборки.

    const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
	...
  configureWebpack: config => {
    //生产and测试环境
		let pluginsPro = [
      new SentryWebpackPlugin({
        include: './dist',
        ignoreFile: '.sentrycliignore',
        ignore: ['node_modules', 'webpack.config.js'],
        configFile: 'sentry.properties',
        release: 'ssp' + process.env.VERSION //仅仅是sourcemap的名字
      })
		];
		//开发环境
		let pluginsDev = [];
		if(process.env.ENV === 'production') {
			config.plugins = [...config.plugins, ...pluginsPro];
		} else {
			// 为开发环境修改配置...
			config.plugins = [...config.plugins, ...pluginsDev];
    }
  }
};

    Обратите внимание, что поле релиза должно совпадать с полем релиза в main.js, чтобы оно могло соответствовать.

    // main.js
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

process.env.NODE_ENV === "production" &&  Sentry.init({
  dsn: 'https://e02b7b8d45978c8f5d84a@sentry.io/1806',
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
  release: 'ssp' + process.env.VERSION
});

  • После завершения настройки начните сборку и попробуйте.

После завершения сборки вы можете увидеть запись релизов в фоновом режиме.

Нажмите, чтобы увидеть загруженную файл карты

Перехват ошибок

  • Поймать ошибки или исключения

    В JS вы можете зафиксировать ошибку как объект события, передав его в _captureException()_.

    try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

  • автоматический захват

Категории