Nuxt + TypescriptプロジェクトにSentryを導入する
Sentryの導入自体はnuxt-community/sentry-moduleを使うと手軽に導入できる。
yarn add @nuxtjs/sentryただ、sourcemapを利用するためにはAPI Tokenの設定が必要だったので対応方法を残しておく。
nuxt.config.tsに以下を設定。
Sentry側でどのリリースか区別できるようにコミットハッシュ（GIT_SHA）を設定しておく。
// nuxt.config.ts
modules: [
'@nuxtjs/sentry'
],
sentry: {
dsn: process.env.SENTRY_DSN || '',
disabled: process.env.NODE_ENV !== 'production',
publishRelease: true,
sourceMapStyle: 'hidden-source-map',
config: {
release: process.env.GIT_SHA,
environment: process.env.SENTRY_ENV || 'production',
}
},
// ...あとはGithub Actionでデプロイする際に環境変数として以下を設定すればSentry側でsourcemapの表示とリリース管理ができるようになる。
SENTRY_AUTH_TOKENについてはSentryの管理画面でトークンを発行して設定する。
# .github/workflows/deploy.yml
- name: Build
env:
NODE_ENV: production
SENTRY_ENV: production
SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_ORG: your_sentry_org
SENTRY_PROJECT: your_sentry_project
GIT_SHA: ${{ github.sha }}
run: yarn run build