[AB-738] Implement FE/BE crash reports & metrix

pyproject.toml

@@ -54,6 +54,7 @@ websockets = ">= 12, < 16"
 writer-sdk = ">= 2.3.1, < 3"
 python-multipart = ">=0.0.7, < 1"
 orjson = "^3.11.0, <4"
+sentry-sdk = {extras = ["fastapi"], version = "^2.15.0"}
 
 [tool.poetry.group.build]
 optional = true

src/ui/.env

@@ -0,0 +1,5 @@
+VITE_SENTRY_DSN=https://6c13c3260114c5b1ceb3b6ae58d0cdb3@o1026471.ingest.us.sentry.io/4510398008393728
+VITE_SENTRY_ENABLED=true
+VITE_SENTRY_ENVIRONMENT=production
+VITE_SENTRY_TRACES_SAMPLE_RATE=1.0
+VITE_SENTRY_REPLAY_SAMPLE_RATE=0.1

src/ui/package.json

@@ -47,7 +47,8 @@
 		"vega-embed": "^6.22.1",
 		"vega-lite": "^5.7.1",
 		"vue": "^3.5.0",
-		"vue-dompurify-html": "^5.0.1"
+		"vue-dompurify-html": "^5.0.1",
+		"@sentry/vue": "^10.25.0"
 	},
 	"devDependencies": {
 		"@types/google.maps": "3.55.5",

src/ui/src/composables/useBlueprintNodeTools.ts

@@ -71,3 +71,5 @@ export function useBlueprintNodeTools(
 		hasToolsButNoFunctionTools,
 	};
 }
+
+

src/ui/src/composables/useGlobalErrorHandling.ts

@@ -0,0 +1,70 @@
+import { trackError } from "@/observability/frontendMetrics";
+
+let isInitialized = false;
+let errorHandlerRef: ((event: ErrorEvent) => void) | null = null;
+let rejectionHandlerRef: ((event: PromiseRejectionEvent) => void) | null = null;
+
+function extractError(error: unknown): Error {
+	if (error instanceof Error) {
+		return error;
+	}
+	if (typeof error === "string") {
+		return new Error(error);
+	}
+	return new Error(String(error || "Unknown error"));
+}
+
+function handleError(event: ErrorEvent): void {
+	try {
+		const error = extractError(event.error || event.message);
+		trackError(error, error.name || "window_error");
+	} catch (trackingError) {
+		console.error("Failed to track error:", trackingError);
+	}
+}
+
+function handleUnhandledRejection(event: PromiseRejectionEvent): void {
+	try {
+		const error = extractError(event.reason);
+		trackError(error, "unhandled_promise_rejection");
+	} catch (trackingError) {
+		console.error("Failed to track promise rejection:", trackingError);
+	}
+}
+
+export function setupGlobalErrorHandling(): void {
+	if (typeof window === "undefined") {
+		return;
+	}
+
+	if (isInitialized) {
+		console.warn("Global error handling already initialized");
+		return;
+	}
+
+	errorHandlerRef = handleError;
+	rejectionHandlerRef = handleUnhandledRejection;
+
+	window.addEventListener("error", errorHandlerRef);
+	window.addEventListener("unhandledrejection", rejectionHandlerRef);
+
+	isInitialized = true;
+}
+
+export function teardownGlobalErrorHandling(): void {
+	if (typeof window === "undefined" || !isInitialized) {
+		return;
+	}
+
+	if (errorHandlerRef) {
+		window.removeEventListener("error", errorHandlerRef);
+		errorHandlerRef = null;
+	}
+
+	if (rejectionHandlerRef) {
+		window.removeEventListener("unhandledrejection", rejectionHandlerRef);
+		rejectionHandlerRef = null;
+	}
+
+	isInitialized = false;
+}

src/ui/src/composables/useLogger.ts

@@ -1,15 +1,40 @@
 /* eslint-disable no-console */
 
+import { observabilityRegistry } from "@/observability";
+
 export type ILogger = Pick<typeof console, "log" | "warn" | "info" | "error">;
 
-/**
- * A simple abstraction to use logger in the application. For the moment, it's just a proxy to `console`, but it can be plugged to any library later.
- */
 export function useLogger(): ILogger {
+	const provider = observabilityRegistry.getInitializedProvider();
+
 	return {
 		log: console.log,
-		warn: console.warn,
 		info: console.info,
-		error: console.error,
+		warn: (...args: any[]) => {
+			console.warn(...args);
+			if (provider && args.length > 0) {
+				const message =
+					typeof args[0] === "string" ? args[0] : String(args[0]);
+				provider.captureMessage(message, "warning", {
+					source: "logger",
+					component: "useLogger",
+					args: args.slice(1),
+				});
+			}
+		},
+		error: (...args: any[]) => {
+			console.error(...args);
+			if (provider && args.length > 0) {
+				const error =
+					args[0] instanceof Error
+						? args[0]
+						: new Error(String(args[0]));
+				provider.captureException(error, {
+					source: "logger",
+					component: "useLogger",
+					args: args.slice(1),
+				});
+			}
+		},
 	};
 }

src/ui/src/composables/useWriterTracking.ts

@@ -2,6 +2,10 @@ import type { generateCore } from "@/core";
 import { useWriterApi } from "./useWriterApi";
 import { watch } from "vue";
 import { useLogger } from "./useLogger";
+import {
+	MetricUnit,
+	incrementMetricSafely,
+} from "@/observability/frontendMetrics";
 
 let isIdentified = false;
 
@@ -185,6 +189,16 @@ export function useWriterTracking(wf: ReturnType<typeof generateCore>) {
 			expandEventPropertiesWithResources(properties);
 		logger.log("[tracking]", eventNameFormated, propertiesExpanded);
 
+		incrementMetricSafely(
+			`user_action.${eventName}`,
+			{
+				tags: {
+					event_type: eventName,
+				},
+				unit: MetricUnit.None,
+			},
+		);
+
 		return await Promise.all([
 			trackWithApi(eventNameFormated, propertiesExpanded),
 			trackWithFullStory(eventNameFormated, propertiesExpanded),