[筆記] Vite6 Sentry Vue3 監控工具導入 2025 @地瓜大的飛翔旅程

章節連結

內容

手動送至 Sentry
telemetry
release

參考資料

在 2025 年來導入 Sentry 監控工具，又變得更為簡易一些。這邊筆記一下與 Vue3 整合的記錄，和需要注意的事項。

內容

手動送至 Sentry

1. 預設都會自行抓取，但若你有用 try-catch 的話，那在 catch 部分就不會送
2. 將 Sentry 的 Instance 綁定到 pinia 上是個不錯的作法，這樣你就無需一個個引入
3. pinia 若有自定義的 key，其 TypeScript 型別要在 env.d.ts 額外將此值加入

import 'pinia'

declare module 'pinia' {
  export interface PiniaCustomProperties {
    $sentry?: {
      instance: any
      execForErrTesting: () => void
    }
  }
}

import 'pinia'

declare module 'pinia' {

export interface PiniaCustomProperties {

$sentry?: {

instance: any

execForErrTesting: () => void

}

SourceMap

是透過 vite build 內建生成的。
1. 輸出後若要壓縮成 zip 檔，請先「將 *.map 排除」後再壓縮
2. 若你是透過 vite-plugin-zip-pack 來執行壓縮，那可以傳入 filter 函式，來將檔名結尾為 .map 的給排除
3. build 完後，可用 rm -rf {輸出路徑}/**/*.js.map 來移除