feat: add vite-plugin sentry

.drone.yml

@@ -67,6 +67,12 @@ steps:
     pull: true
     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

@@ -1,3 +1,24 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
-/// <reference types="cypress" />
+/// <reference types="cypress" />
+
+interface ImportMetaEnv {
+	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
+}

index.html

@@ -24,12 +24,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

@@ -6,7 +6,7 @@
     "serve": "vite",
     "serve:dist-dev": "node scripts/serve-dist.js",
     "serve:dist": "vite preview --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 -m development --outDir dist-dev/",
     "lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
@@ -97,12 +97,14 @@
     "netlify-cli": "12.0.11",
     "postcss": "8.4.18",
     "postcss-preset-env": "7.8.2",
+    "rimraf": "3.0.2",
     "rollup": "3.2.5",
     "rollup-plugin-visualizer": "5.8.3",
     "sass": "1.56.0",
     "typescript": "4.8.4",
     "vite": "3.2.2",
     "vite-plugin-pwa": "0.13.2",
+    "vite-plugin-sentry": "1.1.6",
     "vite-svg-loader": "3.6.0",
     "vitest": "0.24.5",
     "vue-tsc": "1.0.9",

pnpm-lock.yaml

@@ -68,6 +68,7 @@ specifiers:
   postcss: 8.4.18
   postcss-preset-env: 7.8.2
   register-service-worker: 1.7.2
+  rimraf: 3.0.2
   rollup: 3.2.5
   rollup-plugin-visualizer: 5.8.3
   sass: 1.56.0
@@ -77,6 +78,7 @@ specifiers:
   ufo: 0.8.6
   vite: 3.2.2
   vite-plugin-pwa: 0.13.2
+  vite-plugin-sentry: 1.1.6
   vite-svg-loader: 3.6.0
   vitest: 0.24.5
   vue: 3.2.41
@@ -170,12 +172,14 @@ devDependencies:
   netlify-cli: 12.0.11_@types+node@18.11.9
   postcss: 8.4.18
   postcss-preset-env: 7.8.2_postcss@8.4.18
+  rimraf: 3.0.2
   rollup: 3.2.5
   rollup-plugin-visualizer: 5.8.3_rollup@3.2.5
   sass: 1.56.0
   typescript: 4.8.4
   vite: 3.2.2_sass@1.56.0+terser@5.10.0
   vite-plugin-pwa: 0.13.2_3bowiggcnrfgb4q2iavuqqt6vu
+  vite-plugin-sentry: 1.1.6_vite@3.2.2
   vite-svg-loader: 3.6.0
   vitest: 0.24.5_55dneq6lizwzyprtj5vtp4rzay
   vue-tsc: 1.0.9_typescript@4.8.4
@@ -2743,6 +2747,23 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/cli/2.8.1:
+    resolution: {integrity: sha512-V/Mzy/ooZaICBFC8OvSrhUg3Anw1vlEzQQKwUtXEH0EQmcKDJMGkgfo2hXlpoR6lybODjkXDlMkajKcspdF4RA==}
+    engines: {node: '>= 12'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      https-proxy-agent: 5.0.0
+      node-fetch: 2.6.7
+      npmlog: 6.0.2
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /@sentry/core/7.17.4:
     resolution: {integrity: sha512-U3ABSJBKGK8dJ01nEG2+qNOb6Wv7U3VqoajiZxfV4lpPWNFGCoEhiTytxBlFTOCmdUH8209zSZiWJZaDLy+TSA==}
     engines: {node: '>=8'}
@@ -3904,6 +3925,14 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /are-we-there-yet/3.0.1:
+    resolution: {integrity: sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.0
+    dev: true
+
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
     dev: true
@@ -7094,6 +7123,20 @@ packages:
       wide-align: 1.1.5
     dev: true
 
+  /gauge/4.0.4:
+    resolution: {integrity: sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      aproba: 2.0.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    dev: true
+
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -9809,6 +9852,16 @@ packages:
       set-blocking: 2.0.0
     dev: true
 
+  /npmlog/6.0.2:
+    resolution: {integrity: sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==}
+    engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
+    dependencies:
+      are-we-there-yet: 3.0.1
+      console-control-strings: 1.1.0
+      gauge: 4.0.4
+      set-blocking: 2.0.0
+    dev: true
+
   /nth-check/2.0.1:
     resolution: {integrity: sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==}
     dependencies:
@@ -10876,6 +10929,11 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
+  /progress/2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
   /promise/8.1.0:
     resolution: {integrity: sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==}
     dependencies:
@@ -10898,6 +10956,10 @@ packages:
     resolution: {integrity: sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==}
     dev: true
 
+  /proxy-from-env/1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+    dev: true
+
   /ps-list/8.1.0:
     resolution: {integrity: sha512-NoGBqJe7Ou3kfQxEvDzDyKGAyEgwIuD3YrfXinjcCmBRv0hTld0Xb71hrXvtsNPj7HSFATfemvzB8PPJtq6Yag==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -12905,6 +12967,19 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-sentry/1.1.6_vite@3.2.2:
+    resolution: {integrity: sha512-IgrIIl+VKwfLEoJ5O/8rplWmnkjdzqlBwmncWJH19mitr/v7SP7YnXlzv+vdAvxBo5eA8QPYx0J2i58NnaQ3fg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0
+    dependencies:
+      '@sentry/cli': 2.8.1
+      vite: 3.2.2_sass@1.56.0+terser@5.10.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /vite-svg-loader/3.6.0:
     resolution: {integrity: sha512-bZJffcgCREW57kNkgMhuNqeDznWXyQwJ3wKrRhHLMMzwDnP5jr3vXW3cqsmquRR7VTP5mLdKj1/zzPPooGUuPw==}
     dependencies:

src/composables/useOnline.ts

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

src/main.ts

@@ -3,9 +3,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
@@ -99,7 +98,11 @@ app.config.globalProperties.$message = {
 }
 
 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)

src/sentry.ts

@@ -1,15 +1,16 @@
-import type { App } from 'vue'
-import type { Router } from 'vue-router'
-import {VERSION} from './version.json'
+import 'virtual:vite-plugin-sentry/sentry-config'
+import type {App} from 'vue'
+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

@@ -15,7 +15,11 @@
     
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": [
+      // https://github.com/ikenfin/vite-plugin-sentry#typescript
+      "vite-plugin-sentry/client"
+    ]
   },
   "vueCompilerOptions": {
     // "strictTemplates": true

tsconfig.vite-config.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
+  "include": ["vite.config.*", "env.d.ts", "./src/version.json"],
   "compilerOptions": {
     "composite": true,
     "types": ["node", "vitest"]

vite.config.ts

@@ -1,17 +1,21 @@
 /// <reference types="vitest" />
-import {defineConfig} from 'vite'
+import {defineConfig, loadEnv, type PluginOption} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
 
 import {VitePWA}  from 'vite-plugin-pwa'
 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 { fileURLToPath, URL } from 'url'
+import {fileURLToPath, URL} from 'url'
 
 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";`
@@ -19,125 +23,164 @@ const PREFIXED_SCSS_STYLES = `@use "sass:math";
 const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
 const legacy = isModernBuild
 	? undefined
-	: legacyFn({
-		// recommended by browserslist => https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#targets
-		targets: ['defaults', 'not IE 11'],
-	})
+	: legacyFn()
 
 console.log(isModernBuild
 	? 'Building "modern-only" build'
-	: 'Building "legacy" build with "@vitejs/plugin-legacy"'
+	: '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',
+		},
+	}
+}
+
 // https://vitejs.dev/config/
-export default defineConfig({
-	// https://vitest.dev/config/
-	test: {
-		environment: 'happy-dom',
-	},
-	css: {
-		preprocessorOptions: {
-			scss: {
-				additionalData: PREFIXED_SCSS_STYLES,
-				charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+export default defineConfig(({ command, mode }) => {
+	// https://vitejs.dev/config/#environment-variables
+	// Load env file based on `mode` in the current working directory.
+	// Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
+	const env: ImportMetaEnv = loadEnv(mode, process.cwd(), '') as ImportMetaEnv
+
+	return {
+		// https://vitest.dev/config/
+		test: {
+			environment: 'happy-dom',
+		},
+		css: {
+			preprocessorOptions: {
+				scss: {
+					additionalData: PREFIXED_SCSS_STYLES,
+					charset: false, // fixes  "@charset" must be the first rule in the file" warnings
+				},
 			},
-		},
-		postcss: {
-			plugins: [
-				postcssPresetEnv(),
-			],
-		},
-	},
-	plugins: [
-		vue({
-			reactivityTransform: true,
-		}),
-		legacy,
-		svgLoader({
-			// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
-			// we don't need to optimize them again.
-			svgo: false,
-		}),
-		VitePWA({
-			srcDir: 'src',
-			filename: 'sw.ts',
-			base: '/',
-			strategies: 'injectManifest',
-			injectRegister: false,
-			manifest: {
-				name: 'Vikunja',
-				short_name: 'Vikunja',
-				theme_color: '#1973ff',
-				icons: [
-					{
-						src: './images/icons/android-chrome-192x192.png',
-						sizes: '192x192',
-						type: 'image/png',
-					},
-					{
-						src: './images/icons/android-chrome-512x512.png',
-						sizes: '512x512',
-						type: 'image/png',
-					},
-					{
-						src: './images/icons/icon-maskable.png',
-						sizes: '1024x1024',
-						type: 'image/png',
-						purpose: 'maskable',
-					},
-				],
-				start_url: '.',
-				display: 'standalone',
-				background_color: '#000000',
-				shortcuts: [
-					{
-						name: 'Overview',
-						url: '/',
-					},
-					{
-						name: 'Namespaces And Lists Overview',
-						short_name: 'Namespaces & Lists',
-						url: '/namespaces',
-					},
-					{
-						name: 'Tasks Next Week',
-						short_name: 'Next Week',
-						url: '/tasks/by/week',
-					},
-					{
-						name: 'Tasks Next Month',
-						short_name: 'Next Month',
-						url: '/tasks/by/month',
-					},
-					{
-						name: 'Teams Overview',
-						short_name: 'Teams',
-						url: '/teams',
-					},
+			postcss: {
+				plugins: [
+					postcssPresetEnv(),
 				],
 			},
-		}),
-	],
-	resolve: {
-		alias: [
-			{
-				find: '@',
-				replacement: pathSrc,
-			},
+		},
+		plugins: [
+			vue({
+				reactivityTransform: true,
+			}),
+			legacy,
+			svgLoader({
+				// Since the svgs are already manually optimized via https://jakearchibald.github.io/svgomg/
+				// we don't need to optimize them again.
+				svgo: false,
+			}),
+			VitePWA({
+				srcDir: 'src',
+				filename: 'sw.ts',
+				base: '/',
+				strategies: 'injectManifest',
+				injectRegister: false,
+				manifest: {
+					name: 'Vikunja',
+					short_name: 'Vikunja',
+					theme_color: '#1973ff',
+					icons: [
+						{
+							src: './images/icons/android-chrome-192x192.png',
+							sizes: '192x192',
+							type: 'image/png',
+						},
+						{
+							src: './images/icons/android-chrome-512x512.png',
+							sizes: '512x512',
+							type: 'image/png',
+						},
+						{
+							src: './images/icons/icon-maskable.png',
+							sizes: '1024x1024',
+							type: 'image/png',
+							purpose: 'maskable',
+						},
+					],
+					start_url: '.',
+					display: 'standalone',
+					background_color: '#000000',
+					shortcuts: [
+						{
+							name: 'Overview',
+							url: '/',
+						},
+						{
+							name: 'Namespaces And Lists Overview',
+							short_name: 'Namespaces & Lists',
+							url: '/namespaces',
+						},
+						{
+							name: 'Tasks Next Week',
+							short_name: 'Next Week',
+							url: '/tasks/by/week',
+						},
+						{
+							name: 'Tasks Next Month',
+							short_name: 'Next Month',
+							url: '/tasks/by/month',
+						},
+						{
+							name: 'Teams Overview',
+							short_name: 'Teams',
+							url: '/teams',
+						},
+					],
+				},
+			}),
+			viteSentry(getSentryConfig(env)),
+			visualizer({
+				filename: 'stats.html',
+			}) as PluginOption,
 		],
-		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
-	},
-	server: {
-		port: 4173,
-		strictPort: true,
-	},
-	build: {
-		rollupOptions: {
-			plugins: [
-				visualizer({
-					filename: 'stats.html',
-				}),
+		resolve: {
+			alias: [
+				{
+					find: '@',
+					replacement: pathSrc,
+				},
 			],
+			extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
 		},
-	},
+		server: {
+			port: 4173,
+			strictPort: true,
+		},
+		build: {
+			// 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']
+				}
+			},
+		},
+	}
 })