一、前言

某天突然被@了一下

小小的思考了一下前端的錯(cuò)誤捕獲機(jī)制：

1、try...catch：局部/同步錯(cuò)誤捕獲

• 捕獲同步代碼中拋出的錯(cuò)誤
• 異步情況下也可搭配await使用
• 不會(huì)觸發(fā) window.onerror

2、window.onerror：全局同步錯(cuò)誤兜底

window.onerror = function(message, source, lineno, colno, error) {
  console.log('全局捕獲到錯(cuò)誤:', error);
};

• 捕獲沒(méi)有使用try...catch 的同步 JavaScript 錯(cuò)誤
• 資源錯(cuò)誤的話(huà)不會(huì)觸發(fā)，而是該資源元素自身的error事件

3、window.onunhandledrejection：Promise 未處理拒絕的兜底

window.addEventListener('unhandledrejection', event => {
  console.log('未處理的 Promise reject:', event.reason);
  event.preventDefault(); // 阻止瀏覽器打印警告（可選）
});

• 捕捉一個(gè)Promise被reject()，且沒(méi)有通過(guò) .catch()、.then(null, ...) 或 await + try...catch 進(jìn)行處理
• unhandledrejection 處理的是異步 Promise 的未處理 reject
• 專(zhuān)為 Promise 設(shè)計(jì)

很明顯，這些異常日志全都是報(bào)瀏覽器的控制臺(tái)上的，看上去不太符合要求的樣子，所以嘗試用了市面比較流行的sentry

二、sentry基本信息

簡(jiǎn)介

• Sentry 是一個(gè) 開(kāi)源的、面向開(kāi)發(fā)者的實(shí)時(shí)錯(cuò)誤監(jiān)控與性能追蹤平臺(tái)，主要用于前端、后端、移動(dòng)端等應(yīng)用的異常捕獲、診斷和分析。它的核心目標(biāo)是：讓開(kāi)發(fā)者更快地發(fā)現(xiàn)、定位并修復(fù)線(xiàn)上問(wèn)題。
• 用戶(hù)數(shù)據(jù)是紅線(xiàn)，Sentry 會(huì)采集用戶(hù)的 IP、設(shè)備信息、甚至操作行為，而Sentry是海外的sass服務(wù)，服務(wù)器自然也是海外的，所以更多情況下考慮私有化部署（sentry的運(yùn)行配置要求挺高的）

作用和使用目的

1. 自動(dòng)捕獲未處理的異常（js、vue、promise、nodejs、python、java、ios、android）
2. 提供完整的錯(cuò)誤上下文（用戶(hù)瀏覽器/設(shè)備信息、操作系統(tǒng)、網(wǎng)絡(luò)狀態(tài)、用戶(hù)id、頁(yè)面Url和路由）
3. 聚合重復(fù)錯(cuò)誤，避免噪音（相同錯(cuò)誤（相同堆棧 + 相同環(huán)境）會(huì)被自動(dòng)歸為 一個(gè) Issue，顯示發(fā)生次數(shù)、影響用戶(hù)數(shù)、首次/最近發(fā)生時(shí)間）
4. 性能監(jiān)控（頁(yè)面加載耗時(shí)（FCP, LCP）、API 接口響應(yīng)時(shí)間、Vue/React 組件渲染性能）
5. 關(guān)聯(lián)發(fā)布版本Release（將錯(cuò)誤與具體代碼版本綁定（如 v1.2.3））
6. 告警與協(xié)作(郵件、Slack、飛書(shū)、企業(yè)微信等通知)

三、前提條件

• 一個(gè)vue項(xiàng)目，本文使用vue-cli腳手架創(chuàng)建的vue2項(xiàng)目tryAnyplugin(vue2 + webpack)
• 注冊(cè)Sentry賬號(hào)（sentry.io/），可使用谷歌賬號(hào)登錄就可以

四、安裝依賴(lài)

# 核心包
npm install @sentry/vue@6.19.7 @sentry/tracing@6.19.7
?
# 如果是 Vue 2，還需要兼容包（可選）
npm install @sentry/integrations

?? @sentry/tracing 用于性能監(jiān)控（如頁(yè)面加載、組件渲染耗時(shí)）

五、初始化 Sentry（在 main.js / main.ts 中）

import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing'
?
?
Sentry.init({
  Vue,
  dsn: 參數(shù)1（詳情請(qǐng)查看下文，以下參數(shù)規(guī)則都是如此）,
  integrations: [
    new Integrations.BrowserTracing(),
  ],
  tracesSampleRate: 1.0, // 建議配置0.2，開(kāi)啟性能監(jiān)控，避免全量上報(bào)
  environment: process.env.NODE_ENV, // 環(huán)境標(biāo)識(shí)
  release: '1.0.0',
  beforeSend(event, hint) { // 可配置一些已知錯(cuò)誤（也可不配置）
    const error = hint.originalException
    if (error && error.message.includes('ResizeObserver')) {
      return null // 忽略 ResizeObserver 錯(cuò)誤
    }
    return event
  }
})

六、配置 Webpack 插件（自動(dòng)上傳 Source Map）

現(xiàn)在的 Web 項(xiàng)目都是打包壓縮過(guò)的，JS 代碼混淆可能全是 a, b, c, d。為了在 Sentry 中看到 原始代碼的錯(cuò)誤位置（而非壓縮后的 bundle.js），需要上傳 Source Map。

步驟1：安裝插件

npm install --save-dev @sentry/webpack-plugin@1.20.0

步驟2：在 vue.config.js 中配置（Vue CLI 項(xiàng)目）

const SentryWebpackPlugin = require('@sentry/webpack-plugin')
?
const isProd = process.env.NODE_ENV === 'production'
?
module.exports = {
  configureWebpack: config => {
    if (isProd) {
      config.devtool = 'source-map' // 必須生成 source map，可以生成上傳后刪除map文件，避免上傳到生產(chǎn)環(huán)境公網(wǎng)的服務(wù)器上
    }
  },
  chainWebpack: config => {
    console.log(isProd, 'isProd');
    if (isProd) {
      config.plugin('sentry').use(SentryWebpackPlugin, [{
        org: '參數(shù)2 Sentry 組織名',
        project: '參數(shù)3 項(xiàng)目名',
        authToken: '參數(shù)4 authToken',
        urlPrefix: '參數(shù)5 urlPrefix （~/dist） ', 
        include: './dist',  // 前端打包出來(lái)的相對(duì)目錄地址
        ignore: ['node_modules', 'vue.config.js'], // 忽略
        release: '1.0.0', // 版本號(hào)，與main.js的配置的release應(yīng)該保持一致，建議從package.json 讀版本號(hào)
      }])
    }     
  }  
}
?

七、驗(yàn)證是否正確上傳了Source Map

• Settings → Projects → 選擇對(duì)應(yīng)的項(xiàng)目 → 在重新點(diǎn)擊一下Settings → Processing下的Soure Maps
• 查驗(yàn)是否上傳.map格式的文件，有就是代表已成功上傳了

八、驗(yàn)證是否能上報(bào)錯(cuò)誤

步驟1：打包完成后，使用本地服務(wù)器訪問(wèn)（注意訪問(wèn)資源路徑，看問(wèn)題總結(jié)5），并手動(dòng)觸發(fā)錯(cuò)誤

 <template>
  <div>
    <button @click="noRegisterByClicking">點(diǎn)擊事件</button>
  </div>

</template>
<script>
export default {
  //  mounted() {
  //   setTimeout(() => {
  //     throw new Error('Test Source Map in Sentry, Vue2 Webpack I am a test error');
  //   }, 2000);
  // },
  methods: {
    noRegisterByClicking() {
      // 這里故意拋出一個(gè)錯(cuò)誤以測(cè)試 Sentry 的錯(cuò)誤捕獲功能
      console.log('noRegisterByClicking');
      throw new Error('Test Source Map in Sentry, Vue2 Webpack I am a test error');
    }
  }
}
</script>

步驟2：登錄 Sentry 后臺(tái)，查看 Issues 是否出現(xiàn)新錯(cuò)誤

九、參數(shù)配置以及查詢(xún)

參數(shù)1：dsn

• Settings → Projects → 選擇對(duì)應(yīng)的項(xiàng)目 → 在重新點(diǎn)擊一下Settings → SDK Setup下的Client Keys(DSN)
• 復(fù)制DSN（格式如：https://xxxxxx@o123456.ingest.de.sentry.io/789012）

• 不要用 Secret DSN！前端只能用 Public DSN

?? 安全提示：DSN 是公開(kāi)的，不會(huì)泄露敏感信息，可明文放在main.js

參數(shù)2：Sentry 組織名

• Settings → General Settings → Organization Slug

參數(shù)3：項(xiàng)目名

• Settings → Projects → 復(fù)制對(duì)應(yīng)的項(xiàng)目名稱(chēng)

參數(shù)4：authToken

• Settings → Developer Settings → Personal Token → Create New Token

• 需要勾選必要權(quán)限：

  • project:releases：必須，允許創(chuàng)建 release 和上傳文件
  • project:write：必須，允許寫(xiě)入項(xiàng)目數(shù)據(jù)（包括 source maps）
  • org:read：推薦：讀取組織信息
  • 不需要 admin 或 member:admin 等高危權(quán)限！

• 創(chuàng)建后應(yīng)立馬復(fù)制，不可重新復(fù)制

?? 安全提示：敏感信息，需要放在環(huán)境變量里（.env.test）

參數(shù)5：urlPrefix

• Settings → projects → 對(duì)應(yīng)的項(xiàng)目 → 在重新點(diǎn)擊一下Settings → Processing下的Source maps

?? 這里要對(duì)應(yīng)靜態(tài)資源路徑進(jìn)行配置~/js/chunk-2d0e9b20.827fe60a.js.map

十、問(wèn)題總結(jié)

1、開(kāi)發(fā)環(huán)境下 能使用sentry嗎

Sentry 本身不限制環(huán)境，只要：

• 正確初始化
• 提供有效的 DSN
• 網(wǎng)絡(luò)可訪問(wèn) sentry.io

它就能上報(bào)錯(cuò)誤，無(wú)論是在 localhost、測(cè)試服務(wù)器還是生產(chǎn)環(huán)境。

但是不建議開(kāi)啟，因?yàn)椋?/p>

• 開(kāi)發(fā)時(shí)頻繁報(bào)錯(cuò)，會(huì)污染Issues列表
• 浪費(fèi)配額，Sentry 免費(fèi)版有事件數(shù)量限制（每月 5000 個(gè)事件）
• 無(wú)實(shí)用價(jià)值，客戶(hù)端的控制臺(tái)就能查看

2、403 Forbidden

authToken 權(quán)限不足，檢查創(chuàng)建一個(gè)token的時(shí)候有沒(méi)有勾上對(duì)應(yīng)的權(quán)限

3、Project not found

project 名稱(chēng)錯(cuò)誤，檢查 URL 中的項(xiàng)目 slug，vue.config.js里面的project

4、Organization not found

org 名稱(chēng)錯(cuò)誤，檢查 URL 中的組織 slug，vue.config.js里面的org

5、上傳成功但 Sentry 看不到 source map

urlPrefix 不匹配，確保 urlPrefix 與線(xiàn)上 JS 路徑一致（如 ~/static/js/）。(ps：使用時(shí)花在這里的時(shí)間最多）

例如：src="/static/js/chunk-vendors.abc123.js， 那么 urlPrefix 就是：~/static/js/

例如： 本地開(kāi)發(fā)服務(wù)資源地址： http://127.0.0.1:5501/dist/js/chunk-11526b2f.de96035d.js， 打包出來(lái)index.html文件：href="js/chunk-2d0cfa3a.dce2e7f0.js"，那么 urlPrefix 就是：~/dist/js/，與Sentry平臺(tái)中對(duì)應(yīng)，如下：

十一、后話(huà)

1. 如果后續(xù)采用 Sentry，還得是私有化部署

到此這篇關(guān)于前端Sentry的使用方法示例詳解的文章就介紹到這了,更多相關(guān)前端Sentry使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論