From 2b30411c1bbd5a0044e1d8669b972ce78b2ec0f6 Mon Sep 17 00:00:00 2001 From: Eli Ribble Date: Tue, 21 Apr 2026 23:35:59 +0000 Subject: [PATCH] Add sentry integration with Vue frontend --- package.json | 1 + pnpm-lock.yaml | 76 +++++++++++++++++++++++++++++++++++++++++++++++ ts/AppSync.vue | 14 ++++++++- ts/config.ts | 3 ++ vite/sync/main.ts | 21 ++++++------- 5 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 ts/config.ts diff --git a/package.json b/package.json index fd8262b6..dc858302 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "type": "module", "dependencies": { "@popperjs/core": "^2.11.8", + "@sentry/vue": "^10.49.0", "@vueuse/core": "^14.2.1", "@vueuse/head": "^2.0.0", "axios": "^1.13.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf8e720f..108b9636 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 + '@sentry/vue': + specifier: ^10.49.0 + version: 10.49.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3)) '@vueuse/core': specifier: ^14.2.1 version: 14.2.1(vue@3.5.30(typescript@5.9.3)) @@ -335,6 +338,43 @@ packages: '@rolldown/pluginutils@1.0.0-rc.2': resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==} + '@sentry-internal/browser-utils@10.49.0': + resolution: {integrity: sha512-n0QRx0Ysx6mPfIydTkz7VP0FmwM+/EqMZiRqdsU3aTYsngE9GmEDV0OL1bAy6a8N/C1xf9vntkuAtj6N/8Z51w==} + engines: {node: '>=18'} + + '@sentry-internal/feedback@10.49.0': + resolution: {integrity: sha512-JNsUBGv0faCFE7MeZUH99Y9lU9qq3LBALbLxpE1x7ngNrQnVYRlcFgdqaD/btNBKr8awjYL8gmcSkHBWskGqLQ==} + engines: {node: '>=18'} + + '@sentry-internal/replay-canvas@10.49.0': + resolution: {integrity: sha512-7D/NrgH1Qwx5trDYaaTSSJmCb1yVQQLqFG4G/S9x2ltzl9876lSGJL8UeW8ReNQgF3CDAcwbmm/9aXaVSBUNZA==} + engines: {node: '>=18'} + + '@sentry-internal/replay@10.49.0': + resolution: {integrity: sha512-IEy4lwHVMiRE3JAcn+kFKjsTgalDOCSTf20SoFd+nkt6rN/k1RDyr4xpdfF//Kj3UdeTmbuibYjK5H/FLhhnGg==} + engines: {node: '>=18'} + + '@sentry/browser@10.49.0': + resolution: {integrity: sha512-bGCHc+wK2Dx67YoSbmtlt04alqWfQ+dasD/GVipVOq50gvw/BBIDHTEWRJEjACl+LrvszeY54V+24p8z4IgysA==} + engines: {node: '>=18'} + + '@sentry/core@10.49.0': + resolution: {integrity: sha512-UaFeum3LUM1mB0d67jvKnqId1yWQjyqmaDV6kWngG03x+jqXb08tJdGpSoxjXZe13jFBbiBL/wKDDYIK7rCK4g==} + engines: {node: '>=18'} + + '@sentry/vue@10.49.0': + resolution: {integrity: sha512-xxJ3Phh1Rgb3iIrWBJC4qepUVZL2XH+2eCpXWBAd8tvGSIWGSdP8RpwIj22pKsgDO/m8e1eoD43KwVWUX3AH5g==} + engines: {node: '>=18'} + peerDependencies: + '@tanstack/vue-router': ^1.64.0 + pinia: 2.x || 3.x + vue: 2.x || 3.x + peerDependenciesMeta: + '@tanstack/vue-router': + optional: true + pinia: + optional: true + '@tybys/wasm-util@0.10.1': resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==} @@ -1282,6 +1322,42 @@ snapshots: '@rolldown/pluginutils@1.0.0-rc.2': {} + '@sentry-internal/browser-utils@10.49.0': + dependencies: + '@sentry/core': 10.49.0 + + '@sentry-internal/feedback@10.49.0': + dependencies: + '@sentry/core': 10.49.0 + + '@sentry-internal/replay-canvas@10.49.0': + dependencies: + '@sentry-internal/replay': 10.49.0 + '@sentry/core': 10.49.0 + + '@sentry-internal/replay@10.49.0': + dependencies: + '@sentry-internal/browser-utils': 10.49.0 + '@sentry/core': 10.49.0 + + '@sentry/browser@10.49.0': + dependencies: + '@sentry-internal/browser-utils': 10.49.0 + '@sentry-internal/feedback': 10.49.0 + '@sentry-internal/replay': 10.49.0 + '@sentry-internal/replay-canvas': 10.49.0 + '@sentry/core': 10.49.0 + + '@sentry/core@10.49.0': {} + + '@sentry/vue@10.49.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)))(vue@3.5.30(typescript@5.9.3))': + dependencies: + '@sentry/browser': 10.49.0 + '@sentry/core': 10.49.0 + vue: 3.5.30(typescript@5.9.3) + optionalDependencies: + pinia: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)) + '@tybys/wasm-util@0.10.1': dependencies: tslib: 2.8.1 diff --git a/ts/AppSync.vue b/ts/AppSync.vue index a8579379..b9a8e61f 100644 --- a/ts/AppSync.vue +++ b/ts/AppSync.vue @@ -2,4 +2,16 @@ - + diff --git a/ts/config.ts b/ts/config.ts new file mode 100644 index 00000000..06f1d6a3 --- /dev/null +++ b/ts/config.ts @@ -0,0 +1,3 @@ +export const DSN = "https://abc123@glitchtip.gleipnir.technology"; +export const ENVIRONMNT = "prod"; +export const RELEASE = "dev"; diff --git a/vite/sync/main.ts b/vite/sync/main.ts index 4ef1f9a9..8aa9984b 100644 --- a/vite/sync/main.ts +++ b/vite/sync/main.ts @@ -2,7 +2,9 @@ import { createApp } from "vue"; import { createPinia } from "pinia"; import App from "@/AppSync.vue"; import router from "@/router"; -import { SSEManager, type SSEMessage } from "@/SSEManager"; +import * as Sentry from "@sentry/vue"; +import * as config from "@/config"; + import "maplibre-gl/dist/maplibre-gl.css"; // Import Bootstrap Icons CSS @@ -16,17 +18,16 @@ import "@/gen/custom-icons.scss"; import * as bootstrap from "bootstrap"; window.bootstrap = bootstrap; -document.addEventListener("DOMContentLoaded", () => { - SSEManager.connect("/api/events"); - SSEManager.subscribe((msg: SSEMessage) => { - if (msg.type != "heartbeat") { - console.log("SSE", msg); - } - }); -}); - const pinia = createPinia(); const app = createApp(App); app.use(pinia); app.use(router); app.mount("#app"); + +Sentry.init({ + dsn: config.DSN, + integrations: [Sentry.browserTracingIntegration({ router })], + environment: config.ENVIRONMENT, + release: config.RELEASE, + tracesSampleRate: 0.01, +});