Vue3 搭配 Vite 開發工具並整合 Sentry 監測過程中，把一些設定和調教的點點滴滴給記錄下來。
Sentry Sass 服務
建立專案
1. 點選 Project，並建立一個專案。輸入專案的名字和 Platform。
2. 接著在專案的設定(右上角的齒輪按鈕)，找到 SDK Setup -> Instrumentation 後，你可以在範例的程式碼中找到專案的 dsn。
自身的專案程式碼
1. 安裝 @sentry/tracing @sentry/vue 兩個套件 (dependencies)
2. tracingOrigins 可以設定 domain 位置，這個可以用變數指定
3. 若你要捕捉 *.vue 裡面 try…catch 內的 catch error，會需要每個區塊獨立下 Sentry.captureException() 方法
重點摘要
1. tracingOrigins 的設定僅需要域名即可。這個值可以設成一個環境變數，方便日後替換
2. logErrors 要記得將值設為 true，這樣一來你在開發環境下才能如同過往一樣印出 Vue 裡頭發生的錯誤
3. API 的錯誤可以透過設置攔截器 ( 如 Axios 的 interceptor ) 來傳遞
4. 當你使用 Composition API，你在 try catch 中的 catch error 會需要額外呼叫 sentry 的 log 方法，否則不會傳送到 Sentry 的 Server
5. 使用 Sass 服務的話，那麼 server url 就是：https://sentry.io
6. 若要上傳 sourceMap，release 這個參數會是必要的。你可以使用版本號、時間戳記…等字串來讓你方便區分即可
7. vite.config 中載入 .env 變數的方法，可以用 loadEnv
8. vite.config 中存取執行環境，可在環境變數下 NODE_ENV=<環境變數>。這樣一來可以用 VITE_USER_NODE_ENV 獲得
9. vite 所製作的 sourceMap，能對應的 JS 原始碼功能有限，無法像 webpack 一樣能準確的存取到如同開發環境時那樣。
Demo
參考資料
1. vite 如何区分开发环境与打包后的环境？
2. Sentry For Vue 完整接入详解(2021 Sentry v21.8.x)前方高能预警！
3. vite vue3 sentry使用
4. vite-plugin-sentry
5. Sentry （vue3 vite）前端监控搭建进阶指南（纯干货）
