feat(frontend): add sentry frontend logging

* chore: update dependencies

* build: upload sentry sourcemaps

* build: add sentry build options

* build: add sentry config

* fix(frontend): improve sidebar navigation

* build(frontend): add svelte version

* feat(frontend): configure sentry logging

* fix(frontend): remove integration for server

* build(frontend): update orval version

* fix(backend): only allow GET

This is supposed to block more malicious requests

* chore(backend): default value for traces

* build(frontend): add variable sentry sampling rate

* refactor(frontend): improve sentry initialization

* fix(frontend): adjust hight which now works again

* fix(frontend): remove sentry sveltekit due to bug

getsentry/sentry-javascript#8291

* refactor(frontend): add expected handle error method

* feat(frontend): add breadcrumbs to sentry

Merges: #11

.env.example

@@ -5,6 +5,7 @@ PUBLIC_API_URL=http://localhost
 
 # Environment: development, staging, production
 NODE_ENV=development
+PUBLIC_VERSION='dev'
 
 PUBLIC_PROJECT_NAME="TMVisDB"
 STACK_NAME="tmvisdb"
@@ -16,7 +17,9 @@ BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,h
 # Postgres
 SQLITE_DATABASE_PATH="data/tmvis.db"
 
-SENTRY_DSN=
+SENTRY_DSN_BACKEND=
+PUBLIC_SENTRY_DSN_FRONTEND=
+PUBLIC_SENTRY_TRACES_SAMPLE_RATE=0.1
 
 # Configure these with your own Docker registry images
 DOCKER_IMAGE_BACKEND=tmvisdb-backend

.github/workflows/frontend.yml

@@ -40,6 +40,7 @@ jobs:
                       -e PUBLIC_MAX_PROTEIN_LENGTH=${{ vars.PUBLIC_MAX_PROTEIN_LENGTH }}
                       -e PUBLIC_MAINTENANCE_MODE=${{ vars.PUBLIC_MAINTENANCE_MODE }}
                       -e PUBLIC_PROJECT_NAME=${{ vars.PUBLIC_PROJECT_NAME }}
+                      -e PUBLIC_SENTRY_DSN_FRONTEND=${{ secrets.PUBLIC_SENTRY_DSN_FRONTEND }}
                   run: pnpm exec svelte-kit sync  && pnpm run build
 
             - name: Upload build artifact

.github/workflows/release.yml

@@ -110,6 +110,12 @@ jobs:
                   fetch-depth: 0
                   ref: ${{ github.ref_name }}
 
+            - name: Download Build Artifacts
+              uses: actions/download-artifact@v4
+              with:
+                  name: frontend-build
+                  path: dist/frontend/
+
             - name: Create Sentry release
               uses: getsentry/action-release@v1
               env:
@@ -119,3 +125,5 @@ jobs:
               with:
                   environment: production
                   version: ${{ github.ref_name }}
+                  sourcemaps: ./dist/frontend/
+                  url_prefix: "~"

backend/app/core/config.py

@@ -55,7 +55,7 @@ def server_host(self) -> str:
 
     PROJECT_NAME: str = "TMVis"
     SENTRY_DSN: HttpUrl | None = None
-    SENTRY_TRACES_SAMPLE_RATE: float = 1.0
+    SENTRY_TRACES_SAMPLE_RATE: float = 0.2
 
     SQLITE_DATABASE_PATH: FilePath = Path("data/tmvis.db")
     SHARED_DIR_PATH: DirectoryPath = Path("shared/")

backend/app/main.py

@@ -39,7 +39,7 @@ def custom_generate_unique_id(route: APIRoute):
             str(origin).strip("/") for origin in settings.BACKEND_CORS_ORIGINS
         ],
         allow_credentials=True,
-        allow_methods=["*"],
+        allow_methods=["GET"],
         allow_headers=["*"],
     )
 

frontend/.gitignore

@@ -20,3 +20,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Sentry Config File
+.env.sentry-build-plugin

frontend/package.json

@@ -12,27 +12,28 @@
 		"postinstall": "svelte-kit sync"
 	},
 	"devDependencies": {
+		"@sentry/vite-plugin": "^2.22.6",
 		"@skeletonlabs/skeleton": "^2.10.3",
 		"@skeletonlabs/tw-plugin": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-cloudflare": "^4.7.4",
-		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/kit": "^2.8.1",
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
-		"@tanstack/svelte-query-devtools": "^5.59.20",
-		"@types/node": "^22.9.0",
+		"@tanstack/svelte-query-devtools": "^5.60.6",
+		"@types/node": "^22.9.1",
 		"@vincjo/datatables": "^1.14.10",
 		"autoprefixer": "^10.4.20",
 		"prettier": "^3.3.3",
 		"prettier-plugin-organize-imports": "^4.1.0",
-		"prettier-plugin-svelte": "^3.2.7",
-		"prettier-plugin-tailwindcss": "^0.6.8",
+		"prettier-plugin-svelte": "^3.2.8",
+		"prettier-plugin-tailwindcss": "^0.6.9",
 		"svelte": "^4.2.19",
-		"svelte-check": "^4.0.5",
-		"tailwindcss": "^3.4.14",
+		"svelte-check": "^4.0.9",
+		"tailwindcss": "^3.4.15",
 		"typescript": "^5.6.3",
-		"vite": "^5.4.10",
+		"vite": "^5.4.11",
 		"vite-plugin-tailwind-purgecss": "^0.3.3"
 	},
 	"type": "module",
@@ -43,15 +44,16 @@
 		"@citation-js/plugin-doi": "^0.7.16",
 		"@citation-js/plugin-ris": "^0.7.16",
 		"@floating-ui/dom": "^1.6.12",
-		"@nightingale-elements/nightingale-interpro-track": "^5.2.0",
-		"@nightingale-elements/nightingale-manager": "^5.2.0",
-		"@nightingale-elements/nightingale-navigation": "^5.2.0",
-		"@nightingale-elements/nightingale-saver": "^5.2.0",
-		"@nightingale-elements/nightingale-sequence": "^5.2.0",
-		"@nightingale-elements/nightingale-track": "^5.2.0",
-		"@tanstack/svelte-query": "^5.59.20",
+		"@nightingale-elements/nightingale-interpro-track": "^5.3.2",
+		"@nightingale-elements/nightingale-manager": "^5.3.2",
+		"@nightingale-elements/nightingale-navigation": "^5.3.2",
+		"@nightingale-elements/nightingale-saver": "^5.3.2",
+		"@nightingale-elements/nightingale-sequence": "^5.3.2",
+		"@nightingale-elements/nightingale-track": "^5.3.2",
+		"@sentry/svelte": "^8.39.0",
+		"@tanstack/svelte-query": "^5.60.6",
 		"axios": "^1.7.7",
 		"iconify-icon": "^2.1.0",
-		"pdbe-molstar": "^3.3.0"
+		"pdbe-molstar": "^3.3.1"
 	}
 }