藉由 Sentry 讓錯誤無所遁形吧！

系統上線後常常遇到前端錯誤不好追蹤、難以重現。

使用者也很難說得清楚花黑噴。( ´•̥̥̥ ω •̥̥̥` )

鱈魚：「只好默默地忽略。ԅ( ˘ω˘ԅ)」

路人：「不要亂教啊！Σ(ˊДˋ;)」

這個時候 Sentry 就可以登場了！

Sentry 是什麼？

Sentry 是一個開源的錯誤追蹤工具，可以幫助開發者追蹤錯誤，並且提供更多資訊，讓開發者更容易追蹤問題。

不只有 JavaScript，還支援 Python、Java、PHP、Ruby 等等多個語言，甚至支援 Unity、Unreal Engine 等等。

由於目前看來 Sentry 市占率最高還可以自託管，所以優先來試試 Sentry。

設定 Sentry

以下我們以 Vue 為例，依照文件指示安裝、設定。

主要修改 main.js，加入 Sentry 初始化設定。

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";

const app = createApp({ ... });
const router = createRouter({ ... });

Sentry.init({
  app,
  dsn: "https://xxxxxxxxxxxx@o4507587449978880.ingest.us.sentry.io/4507824142942208",
  integrations: [
    Sentry.browserTracingIntegration({ router }),
    Sentry.replayIntegration(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for tracing.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

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

接著設定自動上傳 sourcemaps，就可以在每次執行 npm run build，都會自動上傳 sourcemaps。

執行設定引導精靈：

npx @sentry/wizard@latest -i sourcemaps

並根據提示設定，就大功告成了！

紀錄、查看錯誤

讓我們實際觸發錯誤，建立一個會 throw error 的按鈕。

<template>
  <div class="flex flex-col items-start gap-4 p-4">
    <q-btn
      icon="home"
      class="w-40"
      no-caps
      @click="throwError"
    >
      產生意外錯誤
    </q-btn>
  </div>
</template>

<script setup lang="ts">
function throwError() {
  throw new Error('錯誤測試');
}
</script>