繼先前用 Vue3 + Vite 串接 Sentry Sass 服務後,這篇筆記下 Nuxt + Vue2 + Webpack 與 Sentry 的串接流程。與 SPA 的專案相比,撰寫上會有一些不同。
重點摘要
1. 用 process.env.NODE_ENV 來判斷當前環境
2. 全部設定撰寫在 nuxt.config.js
3. @nuxtjs/sentry, @sentry/vue, @sentry/tracing 這三個套件必須安裝
4. dev 環境若要排除送到 sentry,可以直接設定 disabled: true
5. 由於 @nuxt/sentry 有運用到 publicRuntimeConfig 這個 key,所以你縱使沒有用到,也要在 nuxt.config.js 有這個 key。value 為空物件即可,否則會報 fatal error。
6. config.devtool 在 Prod 環境,要訂為 source-map
7. 產生 source-map 後,可以下指令 rimraf .nuxt/dist/**/*.js.map 來清除
Demo
參考資料
1. nuxt sentry source-map
2. nuxt 项目使用sentry
3. Nuxt.js接入Sentry
4. Nuxt项目接入Sentry监控
5. Runtime config properties
6. Sentry Nuxt – Runtime config