feat: add sentry (#879)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/879
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

index.html

@@ -30,7 +30,10 @@
 	// 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 
+	// our sentry instance to notify us of potential problems.
+	window.SENTRY_ENABLED = false
+	window.SENTRY_DSN = 'https://85694a2d757547cbbc90cd4b55c5a18d@o1047380.ingest.sentry.io/6024480'
 </script>
 </body>
 </html>

package.json

@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@kyvg/vue3-notification": "2.3.4",
+    "@sentry/tracing": "^6.13.3",
+    "@sentry/vue": "^6.13.3",
     "@vue/compat": "3.2.20",
     "bulma": "0.9.3",
     "camel-case": "4.1.2",

run.sh

@@ -3,7 +3,8 @@
 # This shell script sets the api url based on an environment variable and starts nginx in foreground.
 
 VIKUNJA_API_URL="${VIKUNJA_API_URL:-"/api/v1"}"
-
+VIKUNJA_SENTRY_ENABLED="${VIKUNJA_SENTRY_ENABLED:-"false"}"
+VIKUNJA_SENTRY_DSN="${VIKUNJA_SENTRY_DSN:-"https://7e684483a06a4225b3e05cc47cae7a11@sentry.kolaente.de/2"}"
 VIKUNJA_HTTP_PORT="${VIKUNJA_HTTP_PORT:-80}"
 VIKUNJA_HTTPS_PORT="${VIKUNJA_HTTPS_PORT:-443}"
 
@@ -14,6 +15,8 @@ VIKUNJA_API_URL=$(echo $VIKUNJA_API_URL |sed 's/\//\\\//g')
 
 sed -i "s/http\:\/\/localhost\:3456//g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
 sed -i "s/'\/api\/v1/'$VIKUNJA_API_URL/g" /usr/share/nginx/html/index.html
+sed -i "s/\.SENTRY_ENABLED = false/\.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED/g" /usr/share/nginx/html/index.html
+sed -i "s/\.SENTRY_DSN = '.*'/\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'/g" /usr/share/nginx/html/index.html
 
 sed -i "s/listen 80/listen $VIKUNJA_HTTP_PORT/g" /etc/nginx/nginx.conf
 sed -i "s/listen 443/listen $VIKUNJA_HTTPS_PORT/g" /etc/nginx/nginx.conf

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp, configureCompat } from 'vue'
+import {createApp, configureCompat} from 'vue'
 
 configureCompat({
 	COMPONENT_V_MODEL: false,
@@ -16,6 +16,8 @@ import {error, success} from './message'
 declare global {
 	interface Window {
 		API_URL: string;
+		SENTRY_ENABLED: boolean;
+		SENTRY_DSN: string,
 	}
 }
 
@@ -53,13 +55,12 @@ const app = createApp(App)
 
 app.use(Notifications)
 
-
-
 app.use(shortkey, {prevent: ['input', 'textarea', '.input', '[contenteditable]']})
 
 // directives
 import focus from './directives/focus'
 import tooltip from './directives/tooltip'
+
 app.directive('focus', focus)
 app.directive('tooltip', tooltip)
 
@@ -68,6 +69,7 @@ import FontAwesomeIcon from './icons'
 import Button from './components/input/button.vue'
 import Modal from './components/modal/modal.vue'
 import Card from './components/misc/card.vue'
+
 app.component('icon', FontAwesomeIcon)
 app.component('x-button', Button)
 app.component('modal', Modal)
@@ -78,6 +80,7 @@ import {getNamespaceTitle} from './helpers/getNamespaceTitle'
 import {getListTitle} from './helpers/getListTitle'
 import {colorIsDark} from './helpers/color/colorIsDark'
 import {setTitle} from './helpers/setTitle'
+
 app.mixin({
 	methods: {
 		formatDateSince,
@@ -125,6 +128,10 @@ app.config.globalProperties.$message = {
 	success,
 }
 
+if (window.SENTRY_ENABLED) {
+	import('./sentry').then(sentry => sentry.default(app, router))
+}
+
 app.use(router)
 app.use(store)
 app.use(i18n)

src/sentry.js

@@ -0,0 +1,16 @@
+export default async function setupSentry(app, router) {
+	const Sentry = await import('@sentry/vue')
+	const {Integrations} = await import('@sentry/tracing')
+
+	Sentry.init({
+		app,
+		dsn: window.SENTRY_DSN,
+		integrations: [
+			new Integrations.BrowserTracing({
+				routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+				tracingOrigins: ['localhost', /^\//],
+			}),
+		],
+		tracesSampleRate: 1.0,
+	})
+}

yarn.lock

@@ -1320,6 +1320,81 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@sentry/browser@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.13.3.tgz#d4511791b1e484ad48785eba3bce291fdf115c1e"
+  integrity sha512-jwlpsk2/u1cofvfYsjmqcnx50JJtf/T6HTgdW+ih8+rqWC5ABEZf4IiB/H+KAyjJ3wVzCOugMq5irL83XDCfqQ==
+  dependencies:
+    "@sentry/core" "6.13.3"
+    "@sentry/types" "6.13.3"
+    "@sentry/utils" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/core@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.13.3.tgz#5cbbb995128e793ebebcbf1d3b7514e0e5e8b221"
+  integrity sha512-obm3SjgCk8A7nB37b2AU1eq1q7gMoJRrGMv9VRIyfcG0Wlz/5lJ9O3ohUk+YZaaVfZMxXn6hFtsBiOWmlv7IIA==
+  dependencies:
+    "@sentry/hub" "6.13.3"
+    "@sentry/minimal" "6.13.3"
+    "@sentry/types" "6.13.3"
+    "@sentry/utils" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/hub@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.13.3.tgz#cc09623a69b5343315fdb61c7fdd0be74b72299f"
+  integrity sha512-eYppBVqvhs5cvm33snW2sxfcw6G20/74RbBn+E4WDo15hozis89kU7ZCJDOPkXuag3v1h9igns/kM6PNBb41dw==
+  dependencies:
+    "@sentry/types" "6.13.3"
+    "@sentry/utils" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/minimal@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.13.3.tgz#a675a79bcc830142e4f95e6198a2efde2cd3901e"
+  integrity sha512-63MlYYRni3fs5Bh8XBAfVZ+ctDdWg0fapSTP1ydIC37fKvbE+5zhyUqwrEKBIiclEApg1VKX7bkKxVdu/vsFdw==
+  dependencies:
+    "@sentry/hub" "6.13.3"
+    "@sentry/types" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/tracing@^6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.13.3.tgz#ca657d4afa99c50f15e638fe38405bac33e780ee"
+  integrity sha512-yyOFIhqlprPM0g4f35Icear3eZk2mwyYcGEzljJfY2iU6pJwj1lzia5PfSwiCW7jFGMmlBJNhOAIpfhlliZi8Q==
+  dependencies:
+    "@sentry/hub" "6.13.3"
+    "@sentry/minimal" "6.13.3"
+    "@sentry/types" "6.13.3"
+    "@sentry/utils" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/types@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.13.3.tgz#63ad5b6735b0dfd90b3a256a9f8e77b93f0f66b2"
+  integrity sha512-Vrz5CdhaTRSvCQjSyIFIaV9PodjAVFkzJkTRxyY7P77RcegMsRSsG1yzlvCtA99zG9+e6MfoJOgbOCwuZids5A==
+
+"@sentry/utils@6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.13.3.tgz#188754d40afe693c3fcae410f9322531588a9926"
+  integrity sha512-zYFuFH3MaYtBZTeJ4Yajg7pDf0pM3MWs3+9k5my9Fd+eqNcl7dYQYJbT9gyC0HXK1QI4CAMNNlHNl4YXhF91ag==
+  dependencies:
+    "@sentry/types" "6.13.3"
+    tslib "^1.9.3"
+
+"@sentry/vue@^6.13.3":
+  version "6.13.3"
+  resolved "https://registry.yarnpkg.com/@sentry/vue/-/vue-6.13.3.tgz#04e24cf493df253e6eaebc215bbc710fac73b7ff"
+  integrity sha512-FqqQzAaSA4UWJWwH72Ucs3Tp40VuNSabkc58I4t7vCWFFJgjomGT0Jc0d22TVzD2fABztA+U37cUZXh16TNMUA==
+  dependencies:
+    "@sentry/browser" "6.13.3"
+    "@sentry/core" "6.13.3"
+    "@sentry/minimal" "6.13.3"
+    "@sentry/types" "6.13.3"
+    "@sentry/utils" "6.13.3"
+    tslib "^1.9.3"
+
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -6637,7 +6712,7 @@ ts-jest@27.0.7:
     semver "7.x"
     yargs-parser "20.x"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==