feat: sentryを導入(Vue)

`yarn add @sentry/vue @sentry/tracing dotenv`

## 申し送り事項

- 環境変数SENTRY_DSNを設定してください
（開発環境用にdotenvを導入したので、開発環境では`.env`に指定してください）

app/javascript/src/main.js

@@ -3,12 +3,28 @@ import App from './App.vue'
 import Maska from 'maska'
 import router from './router/router'
 import globalStore, { GlobalStoreKey } from './store/global'
+import * as Sentry from '@sentry/vue'
+import { BrowserTracing } from '@sentry/tracing'
 
 document.addEventListener('DOMContentLoaded', () => {
   const selector = '#app'
   const app = document.querySelector(selector)
   if (app) {
     const app = createApp(App)
+    Sentry.init({
+      app,
+      dsn: process.env.SENTRY_DSN,
+      integrations: [
+        new BrowserTracing({
+          routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+          tracingOrigins: ["localhost", "my-site-url.com", /^\//],
+        }),
+      ],
+      // Set tracesSampleRate to 1.0 to capture 100%
+      // of transactions for performance monitoring.
+      // We recommend adjusting this value in production
+      tracesSampleRate: 1.0,
+    })
     app.use(Maska)
     app.use(router)
     app.provide(GlobalStoreKey, globalStore())

config/webpack/environment.js

@@ -2,6 +2,8 @@ const { environment } = require('@rails/webpacker')
 const { VueLoaderPlugin } = require('vue-loader')
 const vue = require('./loaders/vue')
 const { DefinePlugin } = require('webpack')
+const webpack = require('webpack')
+const dotenv = require('dotenv')
 
 function hotfixPostcssLoaderConfig(subloader) {
   const subloaderName = subloader.loader
@@ -35,6 +37,17 @@ environment.config.merge({
   }
 })
 
+const dotenvFiles = ['.env']
+dotenvFiles.forEach((dotenvFile) => {
+  dotenv.config({ path: dotenvFile, silent: true})
+})
+
+environment.plugins.prepend('Environment',
+  new webpack.EnvironmentPlugin(
+    JSON.parse(JSON.stringify(process.env))
+  )
+)
+
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
 environment.plugins.prepend(
   'Define',

package.json

@@ -16,6 +16,8 @@
     "@hennge/vue3-pagination": "^1.0.17",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.4.3",
+    "@sentry/tracing": "^6.19.7",
+    "@sentry/vue": "^6.19.7",
     "@vue/compiler-sfc": "^3.2.26",
     "@vueuse/core": "^7.6.2",
     "autoprefixer": "^10.4.0",
@@ -44,6 +46,7 @@
     "@vue/test-utils": "^2.0.0-rc.17",
     "@vue/vue3-jest": "27.0.0-alpha.4",
     "babel-jest": "^27.5.1",
+    "dotenv": "^16.0.0",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",