📈 Added optional sentry

frontend/Dockerfile

@@ -5,6 +5,7 @@ FROM node:16 as builder
 # ENV API_URL=http://api:80
 ENV API_URL=https://mawoka.eu
 ENV REDIS_URL=$REDIS
+ENV VITE_SENTRY=https://4981de1f72f24fd7b5e21b8913b93a02@o661934.ingest.sentry.io/6254641
 # change working directory
 WORKDIR /usr/src/app
 

frontend/package.json

@@ -15,6 +15,8 @@
 	"devDependencies": {
 		"@felte/validator-yup": "^1.0.1",
 		"@fontsource/marck-script": "^4.5.2",
+		"@sentry/browser": "^6.18.2",
+		"@sentry/tracing": "^6.18.2",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/adapter-node": "^1.0.0-next.70",
 		"@sveltejs/kit": "next",

frontend/pnpm-lock.yaml

@@ -3,6 +3,8 @@ lockfileVersion: 5.3
 specifiers:
   '@felte/validator-yup': ^1.0.1
   '@fontsource/marck-script': ^4.5.2
+  '@sentry/browser': ^6.18.2
+  '@sentry/tracing': ^6.18.2
   '@sveltejs/adapter-auto': next
   '@sveltejs/adapter-node': ^1.0.0-next.70
   '@sveltejs/kit': next
@@ -39,6 +41,8 @@ specifiers:
 devDependencies:
   '@felte/validator-yup': 1.0.1_yup@0.32.11
   '@fontsource/marck-script': 4.5.2
+  '@sentry/browser': 6.18.2
+  '@sentry/tracing': 6.18.2
   '@sveltejs/adapter-auto': 1.0.0-next.31
   '@sveltejs/adapter-node': 1.0.0-next.70
   '@sveltejs/kit': 1.0.0-next.295_sass@1.49.9+svelte@3.46.4
@@ -196,6 +200,69 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /@sentry/browser/6.18.2:
+    resolution: {integrity: sha512-EsqKSNboi2gOiMuEwQranLucxrARi00y2vgUnaPXcqTKTlVlHDetoWHvq8/r29idA1JHGka5tDrwrmWccWIkrg==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/core': 6.18.2
+      '@sentry/types': 6.18.2
+      '@sentry/utils': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
+  /@sentry/core/6.18.2:
+    resolution: {integrity: sha512-r5ad/gq5S/JHc9sd5CUhZQT9ojQ+f+thk/AoGeGawX/8HURZYAgIqD565d6FK0VsZEDkdRMl58z1Qon20h3y1g==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/hub': 6.18.2
+      '@sentry/minimal': 6.18.2
+      '@sentry/types': 6.18.2
+      '@sentry/utils': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
+  /@sentry/hub/6.18.2:
+    resolution: {integrity: sha512-d0AugekMkbnN12b4EXMjseJxtLPc9S20DGobCPUb4oAQT6S2oDQEj1jwP6PQ5vtgyy+GMYWxBMgqAQ4pjVYISQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/types': 6.18.2
+      '@sentry/utils': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
+  /@sentry/minimal/6.18.2:
+    resolution: {integrity: sha512-n7KYuo34W2LxE+3dnZ47of7XHuORINCnXq66XH72eoj67tf0XeWbIhEJrYGmoLRyRfoCYYrBLWiDl/uTjLzrzQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/hub': 6.18.2
+      '@sentry/types': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
+  /@sentry/tracing/6.18.2:
+    resolution: {integrity: sha512-hg6NLqrqJ5sUPTyWEQ2RqdnhQVnyLtx8II0IyWxQLDWD8UCe3Mu6G7mroDtakPWcP+lWz6OnKfMEfuhMcxR8fw==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/hub': 6.18.2
+      '@sentry/minimal': 6.18.2
+      '@sentry/types': 6.18.2
+      '@sentry/utils': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
+  /@sentry/types/6.18.2:
+    resolution: {integrity: sha512-WzpJf/Q5aORTzrSwer/As1NlO90dBAQpaHV2ikDDKqOyMWEgjKb5/4gh59p9gH8JMMnLetP1AvQel0fOj5UnUw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /@sentry/utils/6.18.2:
+    resolution: {integrity: sha512-EC619jesknyu4xpwud5WC/5odYLz6JUy7OSFy5405PpdGeh/m8XUvuJAx4zDx0Iz/Mlk0S1Md+ZcQwqkv39dkw==}
+    engines: {node: '>=6'}
+    dependencies:
+      '@sentry/types': 6.18.2
+      tslib: 1.14.1
+    dev: true
+
   /@socket.io/base64-arraybuffer/1.0.2:
     resolution: {integrity: sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==}
     engines: {node: '>= 0.6.0'}

frontend/src/routes/__layout.svelte

@@ -2,18 +2,33 @@
 	import '../app.css';
 	import Navbar from '$lib/navbar.svelte';
 	import { navbarVisible } from '$lib/stores.ts';
+	import * as Sentry from '@sentry/browser';
+	import { BrowserTracing } from '@sentry/tracing';
+
+	if (import.meta.env.VITE_SENTRY !== null) {
+		Sentry.init({
+			dsn: import.meta.env.VITE_SENTRY,
+			integrations: [new BrowserTracing()],
+
+			// Set tracesSampleRate to 1.0 to capture 100%
+			// of transactions for performance monitoring.
+			// We recommend adjusting this value in production
+			tracesSampleRate: 0.5
+		});
+	}
+
 </script>
 
 {#if $navbarVisible}
 	<Navbar />
-	<div class="pt-16 h-screen">
+	<div class='pt-16 h-screen'>
 		<slot />
 	</div>
 {:else}
 	<slot />
 {/if}
 
-<style lang="scss">
+<style lang='scss'>
   :global(body) {
     background: linear-gradient(to right, #009444, #39b54a, #8dc63f);
     // height: 100%;