Add sentry front-end tracking

This commit is contained in:
Julien Nahum 2023-10-08 13:35:15 +01:00
parent 54f92f844f
commit 23e323af95
8 changed files with 229 additions and 181 deletions

368
composer.lock generated

File diff suppressed because it is too large Load Diff

View File

@ -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') ?? '')

View File

@ -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",

View File

@ -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')
}

View File

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

17
resources/js/plugins/sentry.js vendored Normal file
View File

@ -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 ==')
}
}

View File

@ -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

View File

@ -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',