起因

項目采用vue全家桶開發，現在擬嵌入sentry，實現對于線上網站進行錯誤日志記錄。其實上傳日志很簡單，基本配置就可以了，但是上傳配套的sourcemap則頗為費勁。這里記錄一下使用心得。

---

實施步驟

上傳日志

sentry使用文檔，官方介紹很簡單
在 main.js 中引入如下代碼：

npm install @sentry/integrations # or yarn add @sentry/integrations import Vue from 'vue' import * as Sentry from '@sentry/browser'; import * as Integrations from '@sentry/integrations';Sentry.init({dsn: 'your dsn',integrations: [new Integrations.Vue({Vue,attachProps: true,}),], });

其中 DSN 在項目的下圖位置找到

這樣之后我們重新打包項目，錯誤就可以自動上傳到sentry的項目下issues里面了。

通常我們還會做一步，設置release的版本，很簡單，只需要在sentry初始化的時候配置一下release就可以了。后續所有的sourcemap文件上傳也需要配置相同的release版本號。

Sentry.init({dsn: 'your dsn',release: 'release version',integrations: [new Integrations.Vue({Vue,attachProps: true,}),], });

但是因為我們的代碼是webpack打包后的，所以你看到的錯誤日志是這樣的，根本無法定位具體出錯代碼的位置。

如果我們要想看到具體的報錯信息，那我們就需要上傳sourcemap文件了。

上傳sourcemap文件

sourcemap文件的上傳方式有兩種

sentry-cli 手動上傳

第三方包自動上傳，這里采用官方推薦的 @sentry/webpack-plugin

采用sentry-cli的方式上傳步驟如下：

全局安裝 @sentry/cli

npm i -g @sentry/cli

登錄

sentry-cli --url 域名地址 login

這里的域名地址，是你的host地址，包括域名[+端口]。因為這一步采用網頁形式登錄，所以需要你提前申請auto Token，申請方式如下:
點擊 賬號 -> API keys， 點擊 Create New Token
記得 project:releases 和 project:write 要勾選上

設置版本號

sentry-cli releases -o 組織名 -p 項目名 new 版本號

其中，進入你的項目下，查看瀏覽器地址，組織名【sentry】和項目名【your-project-name】。

打包你的項目，生成sourcemap

上傳sourcemap文件到sentry

sentry-cli releases -o 組織名 -p 項目名 files 版本號 upload-sourcemaps 打包后的js目錄 --url-prefix 線上js訪問地址

其中最需要注意的是線上js訪問地址，多半上傳sourcemap成功，但是不能解析的都源于此。成功后的sourcemap文件可以在你的項目下的releases下對應版本查看，正確的應該如下圖：

正常解析后的結果是可以定位到代碼行的錯誤提示，如下：

其他：
刪除sourcemap指令

sentry-cli releases files 發布版本號 delete --all

利用@sentry/webpack-plugin自動上傳sourcemap

慣例，還是先介紹官網資料

const SentryCliPlugin = require('@sentry/webpack-plugin');const config = {plugins: [new SentryCliPlugin({include: '.',ignoreFile: '.sentrycliignore',ignore: ['node_modules', 'webpack.config.js'],configFile: 'sentry.properties',}),], };

這里我們還依賴一個配置文件，根目錄下的sentry 配置文件 .sentryclirc，文件內容如下：

[defaults] url=your url org=your organization project=your project[auth] token=your auth

通常情況下，我們在plugun的配置中，還需要額外配置兩個參數： release 和 urlPrefix, release同前面一樣，urlPrefix也一樣（很重要）。

其實兩種方式都掌握最好，因為我們通常會趨向于利用第三方工具自動上傳，但是遇到問題的時候，我們可以選擇手動上傳的方式進行調試。

結果

完成上述步驟，我們就可以對于線上遇到的問題進行監控了。 由于我們的項目需要同時監控**線上版**和**預發布**版本，所以，project name 和 release， 以及 dsn都需要根據環境變量做適配。

參考

• 前端錯誤監控 -【Vue】與【Sentry】的結合

總結

以上是生活随笔為你收集整理的sentry + vue实现错误日志监控的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。