From 813f7b7608e936ebe15d81c90104a9bbd9050cee Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 22 May 2022 16:20:06 +0200
Subject: [PATCH] feat: add vite-plugin sentry

---
 .drone.yml                   |   6 ++
 env.config.d.ts              |  10 +++
 env.d.ts                     |  18 ++++-
 index.html                   |   4 +-
 package.json                 |   4 +-
 pnpm-lock.yaml               | 151 ++++++++++++++++++++++++++++-------
 src/composables/useOnline.ts |   2 +-
 src/main.ts                  |   9 ++-
 src/sentry.ts                |  14 ++--
 tsconfig.config.json         |  12 ++-
 vite.config.ts               |  54 +++++++++++--
 11 files changed, 227 insertions(+), 57 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index 63b7ea545..f493abc95 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -69,6 +69,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
diff --git a/env.config.d.ts b/env.config.d.ts
index 754c31853..b379bb7da 100644
--- a/env.config.d.ts
+++ b/env.config.d.ts
@@ -6,4 +6,14 @@ declare module 'postcss-easings' {
 declare module 'postcss-easing-gradients' {
   import postcssEasingGradients from 'postcss-easing-gradients'
   export default postcssEasingGradients
+}
+
+declare module 'postcss-focus-within/browser' {
+  import focusWithinInit from 'postcss-focus-within/browser'
+  export default focusWithinInit
+}
+
+declare module 'css-has-pseudo/browser' {
+  import cssHasPseudo from 'css-has-pseudo/browser'
+  export default cssHasPseudo
 }
\ No newline at end of file
diff --git a/env.d.ts b/env.d.ts
index 1c43ec1ed..32ff21ad4 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
+/// <reference types="vite-plugin-sentry/client" />
 /// <reference types="cypress" />
 /// <reference types="@histoire/plugin-vue/components" />
 
@@ -14,9 +15,22 @@ declare module 'css-has-pseudo/browser' {
 }
 
 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
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index a400eff88..fdde7f7e3 100644
--- a/index.html
+++ b/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'
diff --git a/package.json b/package.json
index 7ca62c6bf..5b65be434 100644
--- a/package.json
+++ b/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.3.0",
+    "rimraf": "3.0.2",
     "rollup": "3.20.2",
     "rollup-plugin-visualizer": "5.9.0",
     "sass": "1.60.0",
@@ -136,6 +137,7 @@
     "vite": "4.2.1",
     "vite-plugin-inject-preload": "1.3.1",
     "vite-plugin-pwa": "0.14.7",
+    "vite-plugin-sentry": "1.1.7",
     "vite-svg-loader": "4.0.0",
     "vitest": "0.29.8",
     "vue-tsc": "1.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd211c381..d7453de09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -251,6 +251,9 @@ devDependencies:
   postcss-preset-env:
     specifier: 8.3.0
     version: 8.3.0(postcss@8.4.21)
+  rimraf:
+    specifier: 3.0.2
+    version: 3.0.2
   rollup:
     specifier: 3.20.2
     version: 3.20.2
@@ -275,6 +278,9 @@ devDependencies:
   vite-plugin-pwa:
     specifier: 0.14.7
     version: 0.14.7(vite@4.2.1)(workbox-build@6.5.4)(workbox-window@6.5.4)
+  vite-plugin-sentry:
+    specifier: 1.1.7
+    version: 1.1.7(vite@4.2.1)
   vite-svg-loader:
     specifier: 4.0.0
     version: 4.0.0
@@ -1624,14 +1630,14 @@ packages:
       '@jridgewell/trace-mapping': 0.3.9
     dev: true
 
-  /@csstools/cascade-layer-name-parser@1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0):
+  /@csstools/cascade-layer-name-parser@1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0):
     resolution: {integrity: sha512-SAAi5DpgJJWkfTvWSaqkgyIsTawa83hMwKrktkj6ra2h+q6ZN57vOGZ6ySHq6RSo+CbP64fA3aPChPBRDDUgtw==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^2.0.0
       '@csstools/css-tokenizer': ^2.0.0
     dependencies:
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
     dev: true
 
@@ -1645,6 +1651,17 @@ packages:
     engines: {node: ^14 || ^16 || >=18}
     dev: true
 
+  /@csstools/css-calc@1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0):
+    resolution: {integrity: sha512-VBI8X0bmStfc85wWTa2bsbnlBQxgW4FmJ0Ts9ar9UqytE6kii3yg6GO+wpgzht2oK5Qlbpkm1Fy2kcqVmu6f3Q==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.0.1
+      '@csstools/css-tokenizer': ^2.0.1
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-tokenizer': 2.1.0
+    dev: true
+
   /@csstools/css-calc@1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0):
     resolution: {integrity: sha512-VBI8X0bmStfc85wWTa2bsbnlBQxgW4FmJ0Ts9ar9UqytE6kii3yg6GO+wpgzht2oK5Qlbpkm1Fy2kcqVmu6f3Q==}
     engines: {node: ^14 || ^16 || >=18}
@@ -1656,6 +1673,19 @@ packages:
       '@csstools/css-tokenizer': 2.1.0
     dev: true
 
+  /@csstools/css-color-parser@1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0):
+    resolution: {integrity: sha512-u3JrK+pQIGGnXe+YhohWwAwOum2y25NRdEjRQFD3moMnOJgmU/nj8BPAF6DDQAooy8Ty9RNKiAh2njuqwMgUNQ==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.1.0
+      '@csstools/css-tokenizer': ^2.1.0
+    dependencies:
+      '@csstools/color-helpers': 2.0.0
+      '@csstools/css-calc': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-tokenizer': 2.1.0
+    dev: true
+
   /@csstools/css-color-parser@1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0):
     resolution: {integrity: sha512-jRpIhjThaH8jxuJ8Q1H+jai/dekP5952kzLHTuN+rPI48eF2esf/18TMb3N/HtEgmnybhfiwUO6Ph2OkHi3jpA==}
     engines: {node: ^14 || ^16 || >=18}
@@ -1669,6 +1699,15 @@ packages:
       '@csstools/css-tokenizer': 2.1.0
     dev: true
 
+  /@csstools/css-parser-algorithms@2.0.1(@csstools/css-tokenizer@2.1.0):
+    resolution: {integrity: sha512-B9/8PmOtU6nBiibJg0glnNktQDZ3rZnGn/7UmDfrm2vMtrdlXO3p7ErE95N0up80IRk9YEtB5jyj/TmQ1WH3dw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.0.0
+    dependencies:
+      '@csstools/css-tokenizer': 2.1.0
+    dev: true
+
   /@csstools/css-parser-algorithms@2.1.0(@csstools/css-tokenizer@2.1.0):
     resolution: {integrity: sha512-KP8TicdXpUyeB1NMlbHud/1l39xvLGvqNFWMpG4qC6H1zs9SadGUHe5SO92n/659sDW9aGDvm9AMru0DZkN1Bw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -1683,14 +1722,14 @@ packages:
     engines: {node: ^14 || ^16 || >=18}
     dev: true
 
-  /@csstools/media-query-list-parser@2.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0):
+  /@csstools/media-query-list-parser@2.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0):
     resolution: {integrity: sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^2.0.0
       '@csstools/css-tokenizer': ^2.0.0
     dependencies:
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
     dev: true
 
@@ -1722,8 +1761,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-color-parser': 1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-color-parser': 1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       '@csstools/postcss-progressive-custom-properties': 2.1.1(postcss@8.4.21)
       postcss: 8.4.21
@@ -1735,8 +1774,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-color-parser': 1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-color-parser': 1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       '@csstools/postcss-progressive-custom-properties': 2.1.1(postcss@8.4.21)
       postcss: 8.4.21
@@ -1771,8 +1810,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-color-parser': 1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-color-parser': 1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       postcss: 8.4.21
     dev: true
@@ -1847,9 +1886,9 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
-      '@csstools/media-query-list-parser': 2.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/media-query-list-parser': 2.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
       postcss: 8.4.21
     dev: true
 
@@ -1879,8 +1918,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-color-parser': 1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-color-parser': 1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       '@csstools/postcss-progressive-custom-properties': 2.1.1(postcss@8.4.21)
       postcss: 8.4.21
@@ -1912,8 +1951,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-calc': 1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-calc': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       postcss: 8.4.21
     dev: true
@@ -1935,8 +1974,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-calc': 1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-calc': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       postcss: 8.4.21
     dev: true
@@ -3654,6 +3693,22 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/cli@2.16.1:
+    resolution: {integrity: sha512-OrrRr4nGtivjc/ZEt/BLzJcivkBM91QQiumU5gWooMNYZJhVDpsDsxQniuJVec1zpQRcC3qpTuH5cAkMgiO2Tw==}
+    engines: {node: '>= 10'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      https-proxy-agent: 5.0.1(supports-color@9.2.1)
+      node-fetch: 2.6.7
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /@sentry/core@7.46.0:
     resolution: {integrity: sha512-BnNHGh/ZTztqQedFko7vb2u6yLs/kWesOQNivav32ZbsEpVCjcmG1gOJXh2YmGIvj3jXOC9a4xfIuh+lYFcA6A==}
     engines: {node: '>=8'}
@@ -7234,6 +7289,11 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /eslint-visitor-keys@3.3.0:
+    resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /eslint-visitor-keys@3.4.0:
     resolution: {integrity: sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -7297,6 +7357,15 @@ packages:
       eslint-visitor-keys: 1.3.0
     dev: false
 
+  /espree@9.4.0:
+    resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.8.2
+      acorn-jsx: 5.3.2(acorn@8.8.2)
+      eslint-visitor-keys: 3.4.0
+    dev: true
+
   /espree@9.5.1:
     resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -7311,6 +7380,13 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /esquery@1.4.0:
+    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
   /esquery@1.4.2:
     resolution: {integrity: sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==}
     engines: {node: '>=0.10'}
@@ -11742,10 +11818,10 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
-      '@csstools/media-query-list-parser': 2.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/media-query-list-parser': 2.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
       postcss: 8.4.21
     dev: true
 
@@ -11755,8 +11831,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       postcss: 8.4.21
       postcss-value-parser: 4.2.0
@@ -11768,8 +11844,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/cascade-layer-name-parser': 1.0.1(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       postcss: 8.4.21
       postcss-selector-parser: 6.0.10
@@ -11877,8 +11953,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
     dependencies:
-      '@csstools/css-color-parser': 1.1.0(@csstools/css-parser-algorithms@2.1.0)(@csstools/css-tokenizer@2.1.0)
-      '@csstools/css-parser-algorithms': 2.1.0(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-color-parser': 1.0.0(@csstools/css-parser-algorithms@2.0.1)(@csstools/css-tokenizer@2.1.0)
+      '@csstools/css-parser-algorithms': 2.0.1(@csstools/css-tokenizer@2.1.0)
       '@csstools/css-tokenizer': 2.1.0
       '@csstools/postcss-progressive-custom-properties': 2.1.1(postcss@8.4.21)
       postcss: 8.4.21
@@ -14384,7 +14460,7 @@ packages:
     dev: true
 
   /verror@1.10.0:
-    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
+    resolution: {integrity: sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=}
     engines: {'0': node >=0.6.0}
     dependencies:
       assert-plus: 1.0.0
@@ -14465,6 +14541,19 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-sentry@1.1.7(vite@4.2.1):
+    resolution: {integrity: sha512-V5WlWKbgul3udItDmvZHEzUw0TE2cehKLfcdR/G98PQ2LvweWDafVk4nmJpj1I7q70eeXWNoqmVq5Esde8c7XA==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0
+    dependencies:
+      '@sentry/cli': 2.16.1
+      vite: 4.2.1(@types/node@18.15.11)(sass@1.60.0)(terser@5.10.0)
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /vite-svg-loader@4.0.0:
     resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==}
     dependencies:
@@ -14609,9 +14698,9 @@ packages:
       debug: 4.3.4(supports-color@9.2.1)
       eslint: 8.37.0
       eslint-scope: 7.1.1
-      eslint-visitor-keys: 3.4.0
-      espree: 9.5.1
-      esquery: 1.4.2
+      eslint-visitor-keys: 3.3.0
+      espree: 9.4.0
+      esquery: 1.4.0
       lodash: 4.17.21
       semver: 7.3.8
     transitivePeerDependencies:
diff --git a/src/composables/useOnline.ts b/src/composables/useOnline.ts
index 148d3ae54..66d5c553d 100644
--- a/src/composables/useOnline.ts
+++ b/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)
diff --git a/src/main.ts b/src/main.ts
index d31f2f801..a6d76eb55 100644
--- a/src/main.ts
+++ b/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
@@ -103,7 +102,11 @@ setLanguage().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)
diff --git a/src/sentry.ts b/src/sentry.ts
index fad06913f..f0bac3199 100644
--- a/src/sentry.ts
+++ b/src/sentry.ts
@@ -1,17 +1,17 @@
-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({
+			new Sentry.BrowserTracing({
 				routingInstrumentation: Sentry.vueRouterInstrumentation(router),
 				tracingOrigins: ['localhost', /^\//],
 			}),
diff --git a/tsconfig.config.json b/tsconfig.config.json
index 70f4a37fa..4d3b110d8 100644
--- a/tsconfig.config.json
+++ b/tsconfig.config.json
@@ -1,8 +1,16 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "env.config.d.ts"],
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "env.d.ts",
+    "env.config.d.ts",
+    "./src/version.json"
+  ],
   "compilerOptions": {
     "composite": true,
-    "types": ["node"]
+    "types": ["node", "vitest"],
+    "ignoreDeprecations": "5.0"
   }
 }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 731fc469b..9d785145b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,4 @@
-/// <reference types="vitest" />
-import {defineConfig, type PluginOption, loadEnv} from 'vite'
+import {defineConfig, loadEnv, type PluginOption} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
 import {URL, fileURLToPath} from 'node:url'
@@ -9,14 +8,16 @@ 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'
 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,10 +25,7 @@ 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'
@@ -48,12 +46,42 @@ function createFontMatcher(fontNames: string[]) {
 	return new RegExp(`^.+\\/(${fontNames.join('|')})_wght__[a-z1-9]{8}-[a-z1-9]{8}\\.woff2$`)
 }
 
+/*
+** 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(({mode}) => {
 	// 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.
 	// https://vitejs.dev/config/#environment-variables
-	const env = loadEnv(mode, process.cwd(), '')
+	const env = loadEnv(mode, process.cwd(), '') as ImportMetaEnv
 
 	return {
 		base: env.VIKUNJA_FRONTEND_BASE,
@@ -170,6 +198,10 @@ export default defineConfig(({mode}) => {
 					],
 				},
 			}),
+			viteSentry(getSentryConfig(env)),
+			visualizer({
+				filename: 'stats.html',
+			}) as PluginOption,
 		],
 		resolve: {
 			alias: [
@@ -187,6 +219,8 @@ export default defineConfig(({mode}) => {
 		},
 		build: {
 			target: 'esnext',
+			// required for sentry debugging: tells vite to create source maps
+			sourcemap: true,
 			rollupOptions: {
 				plugins: [
 					visualizer({
@@ -196,6 +230,10 @@ export default defineConfig(({mode}) => {
 						// brotliSize: true,
 					}) as PluginOption,
 				],
+				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']
+				},
 			},
 		},
 	}