Add sentry front-end tracking

config/services.php

@@ -60,6 +60,7 @@ return [
     'google_analytics_code' => env('GOOGLE_ANALYTICS_CODE'),
     'amplitude_code' => env('AMPLITUDE_CODE'),
     'crisp_website_id' => env('CRISP_WEBSITE_ID'),
+    'sentry_vue_dsn' => env('SENTRY_VUE_DSN'),
 
     'admin_emails' => explode(",", env('ADMIN_EMAILS') ?? ''),
     'template_editor_emails' => explode(",", env('TEMPLATE_EDITOR_EMAILS') ?? '')

package.json

@@ -8,6 +8,7 @@
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
     "@sentry/tracing": "^6.11.0",
     "@sentry/vue": "^6.11.0",
+    "@sentry/integrations": "^7.53.1",
     "axios": "^0.21.1",
     "chart.js": "^3.7.1",
     "clone-deep": "^4.0.1",

resources/js/middleware/check-auth.js

@@ -1,4 +1,5 @@
 import store from '~/store'
+import * as Sentry from '@sentry/vue'
 
 export function initCrisp (user) {
   return new Promise((resolve, reject) => {
@@ -17,6 +18,19 @@ export function initCrisp (user) {
   })
 }
 
+export function initSentry (user) {
+  if (!window.config.sentry_dsn) {
+    return
+  }
+  Sentry.configureScope((scope) => {
+    scope.setUser({
+      id: user.id,
+      email: user.email,
+      subscription: user?.is_subscribed
+    })
+  })
+}
+
 export default async (to, from, next) => {
   if (!store.getters['auth/check'] &&
     store.getters['auth/token'] !== null &&
@@ -25,6 +39,7 @@ export default async (to, from, next) => {
     try {
       const user = await store.dispatch('auth/fetchUser')
       initCrisp(user)
+      initSentry(user)
     } catch (e) {
       console.log(e, 'error')
     }

resources/js/plugins/index.js

@@ -2,3 +2,4 @@ import './axios'
 import './vue-plugins'
 import './amplitude'
 import './vapor'
+import './sentry'

resources/js/plugins/sentry.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import * as Sentry from '@sentry/vue'
+
+if (window.config.sentry_dsn) {
+  Sentry.init({
+    Vue,
+    dsn: window.config.sentry_dsn,
+    integrations: [],
+    // Performance Monitoring
+    tracesSampleRate: 0.01,
+    logErrors: true,
+    debug: false
+  })
+  if (!window.config.production) {
+    console.info('== Sentry enabled ==')
+  }
+}

resources/js/router/index.js

@@ -4,6 +4,7 @@ import Meta from 'vue-meta'
 import routes from './routes'
 import Router from 'vue-router'
 import {sync} from 'vuex-router-sync'
+import * as Sentry from '@sentry/vue'
 
 Vue.use(Meta)
 Vue.use(Router)
@@ -49,6 +50,11 @@ function createRouter () {
  * @param {Function} next
  */
 async function beforeEach (to, from, next) {
+  // Sentry tracking
+  if (window.config.sentry_dsn) {
+    Sentry.configureScope((scope) => scope.setTransactionName(to?.name || 'Unknown route name'))
+  }
+
   let components = []
 
   // External redirect

resources/views/spa.blade.php

@@ -12,6 +12,7 @@
       'hCaptchaSiteKey' => config('services.h_captcha.site_key'),
       'google_analytics_code' => config('services.google_analytics_code'),
       'amplitude_code' => config('services.amplitude_code'),
+      'sentry_dsn' => config('services.sentry_vue_dsn'),
       'crisp_website_id' => config('services.crisp_website_id'),
       'ai_features_enabled' => !is_null(config('services.openai.api_key')),
       's3_enabled' => config('filesystems.default') === 's3',