feat: add vite-plugin sentry

.drone.yml

@@ -70,6 +70,12 @@ steps:
     pull: always
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
+      SENTRY_AUTH_TOKEN:
+        from_secret: sentry_auth_token
+      SENTRY_ORG: vikunja
+      SENTRY_PROJECT: frontend-oss
+      SENTRY_RELEASE:
+        from_secret: sentry_release
     commands:
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm run build

env.d.ts

@@ -4,19 +4,32 @@
 /// <reference types="@histoire/plugin-vue/components" />
 
 declare module 'postcss-focus-within/browser' {
-  import focusWithinInit from 'postcss-focus-within/browser'
+	import focusWithinInit from 'postcss-focus-within/browser'
-  export default focusWithinInit
+	export default focusWithinInit
 }
 
 declare module 'css-has-pseudo/browser' {
-  import cssHasPseudo from 'css-has-pseudo/browser'
+	import cssHasPseudo from 'css-has-pseudo/browser'
-  export default cssHasPseudo
+	export default cssHasPseudo
 }
 
 interface ImportMetaEnv {
-  readonly VITE_IS_ONLINE: boolean
+	readonly VIKUNJA_API_URL?: string
+	readonly VIKUNJA_HTTP_PORT?: number
+	readonly VIKUNJA_HTTPS_PORT?: number
+
+	readonly VIKUNJA_SENTRY_ENABLED?: boolean
+	readonly VIKUNJA_SENTRY_DSN?: string
+
+	readonly SENTRY_AUTH_TOKEN?: string
+	readonly SENTRY_ORG?: string
+	readonly SENTRY_PROJECT?: string
+	readonly SENTRY_RELEASE?: string
+
+	readonly VITE_WORKBOX_DEBUG?: boolean
+	readonly VITE_IS_ONLINE: boolean
 }
 
 interface ImportMeta {
-  readonly env: ImportMetaEnv
+	readonly env: ImportMetaEnv
 }

index.html

@@ -18,12 +18,12 @@
 <div id="app"></div>
 <script type="module" src="/src/main.ts"></script>
 <script>
-    //
+	//
 	// This variable points the frontend to the api.
 	// It has to be the full url, including the last /api/v1 part and port.
 	// You can change this if your api is not reachable on the same port as the frontend.
 	window.API_URL = 'http://localhost:3456/api/v1'
-    // Enable error tracking with sentry. If this is set to true, will send anonymized data to 
+	// Enable error tracking with sentry. If this is set to true, will send anonymized data to 
 	// our sentry instance to notify us of potential problems.
 	window.SENTRY_ENABLED = false
 	window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'

package.json

@@ -26,7 +26,7 @@
     "serve": "vite",
     "preview": "vite preview --port 4173",
     "preview:dev": "vite preview --outDir dist-dev --mode development --port 4173",
-    "build": "vite build && workbox copyLibraries dist/",
+    "build": "vite build && rimraf dist/**/*.js.map && workbox copyLibraries dist/",
     "build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
     "build:dev": "vite build --mode development --outDir dist-dev/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
@@ -128,6 +128,7 @@
     "postcss-easings": "3.0.1",
     "postcss-focus-within": "7.0.2",
     "postcss-preset-env": "8.5.0",
+    "rimraf": "3.0.2",
     "rollup": "3.25.1",
     "rollup-plugin-visualizer": "5.9.2",
     "sass": "1.63.4",
@@ -136,6 +137,7 @@
     "vite": "4.3.9",
     "vite-plugin-inject-preload": "1.3.1",
     "vite-plugin-pwa": "0.16.4",
+    "vite-plugin-sentry": "1.1.6",
     "vite-svg-loader": "4.0.0",
     "vitest": "0.32.2",
     "vue-tsc": "1.8.0",

src/composables/useOnline.ts

@@ -4,7 +4,7 @@ import type {ConfigurableWindow} from '@vueuse/core'
 
 export function useOnline(options?: ConfigurableWindow) {
 	const isOnline = useNetworkOnline(options)
-	const fakeOnlineState = !!import.meta.env.VITE_IS_ONLINE
+	const fakeOnlineState = Boolean(import.meta.env.VITE_IS_ONLINE)
 	if (isOnline.value === false && fakeOnlineState) {
 		console.log('Setting fake online state', fakeOnlineState)
 		return ref(true)

src/main.ts

@@ -4,9 +4,8 @@ import {createApp} from 'vue'
 import pinia from './pinia'
 import router from './router'
 import App from './App.vue'
-
+import {setupSentry} from './sentry'
 import {error, success} from './message'
-
 import {VERSION} from './version.json'
 
 // Notifications
@@ -106,8 +105,12 @@ setLanguage(browserLanguage).then(() => {
 	}
 
 	if (window.SENTRY_ENABLED) {
-		import('./sentry').then(sentry => sentry.default(app, router))
+		try{
+		setupSentry(app, router)
+	} catch(e) {
+		console.error('Could not enable Sentry tracking', e)
 	}
+}
 
 	app.use(pinia)
 	app.use(router)

src/sentry.ts

@@ -1,15 +1,16 @@
-import type { App } from 'vue'
+import 'virtual:vite-plugin-sentry/sentry-config'
-import type { Router } from 'vue-router'
+import type {App} from 'vue'
-import {VERSION} from './version.json'
+import type {Router} from 'vue-router'
 
-export default async function setupSentry(app: App, router: Router) {
+export async function setupSentry(app: App, router: Router) {
 	const Sentry = await import('@sentry/vue')
 	const {Integrations} = await import('@sentry/tracing')
 
 	Sentry.init({
-		release: VERSION,
 		app,
 		dsn: window.SENTRY_DSN,
+		release: import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.release,
+		dist: import.meta.env.VITE_PLUGIN_SENTRY_CONFIG.dist,
 		integrations: [
 			new Integrations.BrowserTracing({
 				routingInstrumentation: Sentry.vueRouterInstrumentation(router),

tsconfig.app.json

@@ -14,6 +14,10 @@
     "paths": {
       "@/*": ["./src/*"]
     },
+    "types": [
+      // https://github.com/ikenfin/vite-plugin-sentry#typescript
+      "vite-plugin-sentry/client"
+    ],
     "ignoreDeprecations": "5.0"
   },
   "vueCompilerOptions": {

vite.config.ts

@@ -9,6 +9,8 @@ import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import {VitePWA} from 'vite-plugin-pwa'
 import VitePluginInjectPreload from 'vite-plugin-inject-preload'
 import {visualizer} from 'rollup-plugin-visualizer'
+
+import viteSentry, {type ViteSentryPluginOptions} from 'vite-plugin-sentry'
 import svgLoader from 'vite-svg-loader'
 import postcssPresetEnv from 'postcss-preset-env'
 import postcssEasings from 'postcss-easings'
@@ -17,6 +19,8 @@ import postcssEasingGradients from 'postcss-easing-gradients'
 
 const pathSrc = fileURLToPath(new URL('./src', import.meta.url))
 
+import {VERSION} from './src/version.json'
+
 // the @use rules have to be the first in the compiled stylesheets
 const PREFIXED_SCSS_STYLES = `@use "sass:math";
 @import "${pathSrc}/styles/common-imports";`
@@ -24,16 +28,43 @@ const PREFIXED_SCSS_STYLES = `@use "sass:math";
 const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
 const legacy = isModernBuild
 	? undefined
-	: legacyFn({
+	: legacyFn()
-		// recommended by browserslist => https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#targets
-		targets: ['defaults', 'not IE 11'],
-	})
 
 console.log(isModernBuild
 	? 'Building "modern-only" build'
 	: 'Building "legacy" build with "@vitejs/plugin-legacy"',
 )
 
+/*
+** Configure sentry plugin
+*/
+function getSentryConfig(env: ImportMetaEnv): ViteSentryPluginOptions {
+	return {
+		// dryRun: true, // FIXME: remove when ready with configuring
+		debug: true, // FIXME: remove when ready with configuring
+		skipEnvironmentCheck: true,
+
+		url: 'https://sentry.io',
+		authToken: env.SENTRY_AUTH_TOKEN,
+		org: env.SENTRY_ORG,
+		project: env.SENTRY_PROJECT,
+		release: env.SENTRY_VERSION || VERSION,
+		deploy: {
+			env: env.mode === 'production'
+				? 'production'
+				: 'development',
+		},
+		setCommits: {
+			auto: true,
+		},
+		sourceMaps: {
+			include: ['./dist/assets'],
+			ignore: ['node_modules'],
+			urlPrefix: '~/assets',
+		},
+	}
+}
+
 /**
  * @param fontNames Array of the file names of the fonts without axis and hash suffixes
  */
@@ -171,6 +202,7 @@ export default defineConfig(({mode}) => {
 					],
 				},
 			}),
+			viteSentry(getSentryConfig(env)),
 		],
 		resolve: {
 			alias: [
@@ -188,7 +220,13 @@ export default defineConfig(({mode}) => {
 		},
 		build: {
 			target: 'esnext',
+			// required for sentry debugging: tells vite to create source maps
+			sourcemap: true,
 			rollupOptions: {
+				manualChunks: {
+					// by putting tracking related stuff in a separated file we try to prevent unwanted blocking from ad-blockers
+					sentry: ['./src/sentry.ts', '@sentry/vue', '@sentry/tracing']
+				},
 				plugins: [
 					visualizer({
 						filename: 'stats.html',