從可觀測性開始：用 Sentry 為前端應用加上錯誤監控與效能洞察實戰指南

9 月 23, 2026

—

由

身為前端工程師，我們最怕的不是寫不出功能，而是功能上線後在真實使用者手上悄悄崩潰——而你坐在辦公室裡卻一無所知。在 CSF 這類大型威脅情報後台裡，一個未被捕捉的例外可能讓分析師錯過關鍵告警。這時候，「可觀測性（Observability）」就不是流行詞，而是保命符。今天我們就用 Sentry 這套業界標準工具，幫你的前端應用裝上「黑盒子」。

一、什麼是前端的可觀測性

可觀測性指的是：系統內部發生了什麼，你能從外部數據推斷出來嗎？對前端而言，它包含三件事：錯誤（Error）、效能（Performance）、行為（Session Replay）。Sentry 把這三塊一次打包，讓你不必自己拼裝多套工具。

二、為什麼選 Sentry

自動捕捉未處理例外與 Promise rejection，不用到處寫 try/catch。
上傳 Source Map 後，壓縮後的錯誤能還原回你寫的 Vue 原始碼行號。
內建 Web Vitals（LCP、FID、CLS）效能監控，直接看真實使用者體感。
開源、支援自架，也能用官方雲端，接入成本極低。

三、步驟 1：安裝與初始化

以 Vue 3 專案為例，先安裝 SDK：

npm install @sentry/vue

在入口檔（main.ts）初始化，重點：記得帶上 router 才能追蹤頁面切換效能：

import * as Sentry from '@sentry/vue';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

Sentry.init({
  app,
  dsn: 'https://你的專案ID@o你的組織.ingest.sentry.io/專案號',
  environment: import.meta.env.MODE,   // development / production 分流
  tracesSampleRate: 0.2,               // 效能取樣 20%，避免流量爆量
  replaysSessionSampleRate: 0.1,      // 錯誤時錄製使用者操作回放
  integrations: [
    Sentry.browserTracingIntegration({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    }),
    Sentry.replayIntegration(),
  ],
});

app.use(router).mount('#app');

四、步驟 2：還原 Source Map

生產環境的 JS 經過打包壓縮，錯誤堆疊會指向 app.4f3a.js:1:9999，完全看不懂。重點：在 CI/CD 的建置步驟裡上傳 Source Map，Sentry 才能把行號映射回你的 HelloWorld.vue：

npx sentry-cli sourcemaps inject ./dist
npx sentry-cli sourcemaps upload ./dist

五、步驟 3：主動上報業務例外

有些錯誤框架吞掉了，你可以用 captureException 手動補捉，並附帶上下文：

try {
  await fetchAlarmList();
} catch (err) {
  Sentry.captureException(err, {
    tags: { module: 'alarm', action: 'list' },
    extra: { query },
  });
  throw err;
}

六、步驟 4：在 Vben Admin 中落地

Vben Admin 已經有統一的錯誤攔截層，最乾淨的做法是在 setupErrorHandle 裡掛上 Sentry，讓全站未捕獲錯誤自動上報；同時在 vite.config.ts 的 build 階段串接 Source Map 上傳，做到「建置即上報」。

七、上線前必做的三件事

區分環境：development 關掉或調低取樣，避免開發噪音污染數據。
過濾敏感資料：用 beforeSend 過濾 token、手機號等個資，別把使用者隱私送出去。
設定告警閥值：同類錯誤每分鐘超過 N 次才通知，避免釘釘/郵件被刷爆。

可觀測性不是上線後的裝飾，而是讓你比使用者更早知道「壞了」的第一道防線。把 Sentry 接上，你的後台才真正從「能跑」走向「可靠」。

互動話題：你的專案目前有錯誤監控嗎？是自建日誌還是用了 Sentry / 類似工具？歡迎留言分享你踩過最離譜的線上 bug！