1. 程式人生 > >Sentry項目監控工具結合vue的安裝與使用(前端)

Sentry項目監控工具結合vue的安裝與使用(前端)

ins 簡體中文 ack 說明 開發 安裝 出現 瀏覽器 他會

一、官網:https://sentry.io/welcome/

二、介紹

  Sentry 是一個開源的實時錯誤報告工具,支持 web 前後端、移動應用以及遊戲,支持 Python、OC、Java、Go、Node、Django、RoR 等主流編程語言和框架 ,還提供了 GitHub、Slack、Trello 等常見開發工具的集成。可以多團隊、多開發一起管理。

三、安裝

1、首先你得有個Sentry的賬號,這個就不多說了,自己去註冊一個

2、註冊成功後進入系統首先修改下語言和時區

  a、語言全是英文,如果你是英文大神可不修改;(修改後部分會變成中文,但還是會有英文)

  b、時區:要修改成你現在工作國家時區,不然報錯時間和現在國家的時間對應不上

技術分享圖片 技術分享圖片

第一步 第二步

因為我已經配置好了,語言選簡體中文,時區選上海(我沒找到北京)

3、配置項目

a、進入系統 會讓你自動選語言和框架

技術分享圖片

b、選擇後會出現一段配置代碼,復制粘貼到vue項目中main.js

技術分享圖片

c、安裝Sentry工具

npm install @sentry/browser

d、好了完成,他會監控到頁面的事件、功能的報錯和接口請求問題,看下報錯列表

技術分享圖片

e、點進去一個

技術分享圖片

會定位到對應的電腦型號、瀏覽器、和ip,下面還有很多監控到的信息,我就不一一截圖了;

如果你想對應到那個用戶,可以到說明文檔找對應的方法來配置

Sentry項目監控工具結合vue的安裝與使用(前端)