vue項目接入sentry錯誤日志采集

sentry官網注冊一個賬號：https://sentry.io/organizations/northfed/projects/new/

 

先安裝依賴（以下步驟在sentry里都有提示步驟的）：

cnpm install @sentry/browser  
cnpm install @sentry/integrations

vue中main.js引入：

import Vue from 'vue';
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  dsn: 'https://[e-mail]/5244239',
  integrations: [new VueIntegration({Vue, attachProps: true})],

    environment:baseUrl.env

});

 備注：dsn是創建sentry項目后動態生成的，類似百度的ak密鑰標識當前項目。

 

 

下面截圖sentry是創建一個項目和team：

 

 

 

---

 

效果：

控制台報錯：

 

 

 sentry后台捕獲報錯：

 

 

就這么簡單~！！

sentry的特性

• 支持多種語言和框架

• 相同錯誤合並

• 定制規則進行郵件通知

• 支持導入sourcemap自動解析和還原代碼

• 友好的可視化Web界面

 

Sentry免費版可以：

• 每月5k 錯誤日志上限
• 支持所有平台和語言，功能無縮水
• 無限項目數量，僅單用戶訪問，不提供團隊功能

 

 具體的價格表可以看這里：

• https://sentry.io/pricing/