[筆記] Nuxt 整合 Sentry Sass 服務導入筆記

繼先前用 Vue3 + Vite 串接 Sentry Sass 服務後,這篇筆記下 Nuxt + Vue2 + Webpack 與 Sentry 的串接流程。與 SPA 的專案相比,撰寫上會有一些不同。

sentry vue


重點摘要

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

按讚加入粉絲團

延伸閱讀