Vue.js3でもSentry使って監視がしたい

要約

まだVue.js3でSentry未対応のため、グローバルなエラーハンドラを使って、監視設定する。

設定例

Sentry公式ドキュメントを見ながら

$ yarn add @sentry/browser @sentry/tracing

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import * as Sentry from '@sentry/browser'
import { Integrations } from '@sentry/tracing'

Sentry.init({
  dsn: process.env.VUE_APP_SENTRY_URL, //ベタ書きでも好きなように
  release: 'my-project-name@' + process.env.npm_package_version,
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0
})

const app = createApp(App)
app.config.errorHandler = (err, vm, info) => {
  Sentry.captureException(err) // 手動でSentryに送信
}
app.mount('#app')

window.addEventListener('error', (event) => {
  Sentry.captureException(event) // 手動でSentryに送信
})
window.addEventListener('unhandledrejection', (event) => {
  Sentry.captureException(event) // 手動でSentryに送信
})