Get working sentry for the UI

Previously it almost, but didn't quite work. Now it actually works, but
the stack traces are minified.

ts/AppSync.vue

@@ -3,24 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import * as Sentry from "@sentry/vue";
 import { onMounted } from "vue";
 import { apiClient } from "@/client";
 import router from "@/route/config";
 
 import { SSEManager, type SSEMessageResource } from "@/SSEManager";
 
-async function sentryInit() {
-	const config = await apiClient.JSONGet("/api");
-	Sentry.init({
-		dsn: config.DSN,
-		integrations: [Sentry.browserTracingIntegration({ router })],
-		environment: config.ENVIRONMENT,
-		release: config.RELEASE,
-		tracesSampleRate: 0.01,
-	});
-	console.log("sentry initialized");
-}
 onMounted(() => {
 	SSEManager.connect("/api/events");
 	SSEManager.subscribe((msg: SSEMessageResource) => {
@@ -28,6 +16,5 @@ onMounted(() => {
 			console.log("SSE", msg);
 		}
 	});
-	sentryInit();
 });
 </script>

ts/sentry.ts

@@ -0,0 +1,22 @@
+import { type App } from "vue";
+import { type Pinia } from "pinia";
+import { type Router } from "vue-router";
+import * as Sentry from "@sentry/vue";
+import { apiClient } from "@/client";
+import { APIProperties } from "@/type/api";
+
+export async function Init(app: App, pinia: Pinia) {
+	const api_info: APIProperties = await apiClient.JSONGet("/api");
+	Sentry.init({
+		app,
+		dsn: api_info.sentry_dsn,
+		//integrations: [Sentry.browserTracingIntegration({ router })],
+		environment: api_info.environment,
+		release:
+			api_info.version.revision +
+			(api_info.version.is_modified ? "-dirty" : ""),
+		tracesSampleRate: 0.01,
+	});
+	pinia.use(Sentry.createSentryPiniaPlugin());
+	console.log("sentry initialized", api_info.sentry_dsn, api_info.environment);
+}

ts/type/api.ts

@@ -35,11 +35,16 @@ export interface TegolaURLs {
 	nidus: string;
 	rmo: string;
 }
+export interface Version {
+	build_time: string;
+	is_modified: boolean;
+	revision: string;
+}
 export interface APIProperties {
 	environment: string;
 	sentry_dsn: string;
 	tegola: TegolaURLs;
-	version: string;
+	version: Version;
 }
 export interface BoundsDTO {
 	min: Location;

version/version.go

@@ -6,9 +6,9 @@ import (
 )
 
 type VersionInfo struct {
-	BuildTime  time.Time
-	IsModified bool
-	Revision   string
+	BuildTime  time.Time `json:"build_time"`
+	IsModified bool      `json:"is_modified"`
+	Revision   string    `json:"revision"`
 }
 
 func Get() VersionInfo {

vite/rmo/main.ts

@@ -6,6 +6,7 @@ import "@/gen/custom-icons.scss";
 import "@/style/rmo.scss";
 import router from "@/rmo/route/config";
 import App from "@/rmo/App.vue";
+import * as sentry from "@/sentry";
 
 const app = createApp(App);
 const head = createHead();
@@ -15,3 +16,5 @@ app.use(head);
 app.use(pinia);
 app.use(router);
 app.mount("#app");
+
+sentry.Init(app, pinia);

vite/sync/main.ts

@@ -1,8 +1,9 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "@/AppSync.vue";
-import router from "@/route/config";
 import * as config from "@/config";
+import router from "@/route/config";
+import * as sentry from "@/sentry";
 
 import "maplibre-gl/dist/maplibre-gl.css";
 
@@ -22,3 +23,4 @@ const app = createApp(App);
 app.use(pinia);
 app.use(router);
 app.mount("#app");
+sentry.Init(app, pinia);