Add grafana faro configuration

apps/console/.env.example

@@ -1 +1,6 @@
-VITE_API_URL=http://localhost:8080
+VITE_API_URL=http://localhost:8080
+
+# Grafana Faro configuration (optional)
+# VITE_FARO_URL=https://your-grafana-faro-collector-url
+# VITE_FARO_APP_NAME=@probo/console
+# VITE_APP_VERSION=0.0.0

apps/console/package.json

@@ -12,6 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@grafana/faro-react": "^1.19.0",
+    "@grafana/faro-web-sdk": "^1.19.0",
     "@hookform/resolvers": "^5.0.1",
     "@probo/helpers": "1.0.0",
     "@probo/hooks": "1.0.0",

apps/console/src/faro.ts

@@ -0,0 +1,38 @@
+import {
+  initializeFaro,
+  ReactIntegration,
+  getWebInstrumentations,
+  createReactRouterV6DataOptions,
+} from "@grafana/faro-react";
+import { matchRoutes } from "react-router";
+
+export function initFaro() {
+  const url = import.meta.env.VITE_FARO_URL;
+
+  if (!url) {
+    console.warn("Faro URL not configured. Skipping Faro initialization.");
+    return;
+  }
+
+  const appName = import.meta.env.VITE_FARO_APP_NAME || "@probo/console";
+
+  initializeFaro({
+    url,
+    app: {
+      name: appName,
+      version: import.meta.env.VITE_APP_VERSION || "0.0.0",
+      environment: import.meta.env.MODE,
+    },
+    instrumentations: [
+      ...getWebInstrumentations({
+        captureConsole: true,
+        captureConsoleDisabledLevels: [],
+      }),
+      new ReactIntegration({
+        router: createReactRouterV6DataOptions({
+          matchRoutes,
+        }),
+      }),
+    ],
+  });
+}

apps/console/src/main.tsx

@@ -1,10 +1,14 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { FaroErrorBoundary } from "@grafana/faro-react";
 import "./index.css";
 import { App } from "./App";
 import { RelayProvider } from "./providers/RelayProviders";
 import { TranslatorProvider } from "./providers/TranslatorProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { initFaro } from "./faro";
+
+initFaro();
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,12 +20,14 @@ const queryClient = new QueryClient({
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RelayProvider>
-        <TranslatorProvider>
-          <App />
-        </TranslatorProvider>
-      </RelayProvider>
-    </QueryClientProvider>
+    <FaroErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <RelayProvider>
+          <TranslatorProvider>
+            <App />
+          </TranslatorProvider>
+        </RelayProvider>
+      </QueryClientProvider>
+    </FaroErrorBoundary>
   </StrictMode>
 );

apps/console/src/routes.tsx

@@ -6,6 +6,7 @@ import {
   useRouteError,
   type RouteObject,
 } from "react-router";
+import { withFaroRouterInstrumentation } from "@grafana/faro-react";
 import { MainLayout } from "./layouts/MainLayout";
 import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
 import { Fragment, Suspense } from "react";
@@ -211,4 +212,6 @@ function routeTransformer({
   } as RouteObject;
 }
 
-export const router = createBrowserRouter(routes.map(routeTransformer));
+export const router = withFaroRouterInstrumentation(
+  createBrowserRouter(routes.map(routeTransformer))
+);

apps/trust/.env.example

@@ -1 +1,6 @@
 VITE_API_URL=http://localhost:8080
+
+# Grafana Faro configuration (optional)
+# VITE_FARO_URL=https://your-grafana-faro-collector-url
+# VITE_FARO_APP_NAME=@probo/trust
+# VITE_APP_VERSION=0.0.0

apps/trust/package.json

@@ -12,6 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@grafana/faro-react": "^1.19.0",
+    "@grafana/faro-web-sdk": "^1.19.0",
     "@hookform/resolvers": "^5.0.1",
     "@probo/helpers": "1.0.0",
     "@probo/hooks": "1.0.0",

apps/trust/src/faro.ts

@@ -0,0 +1,38 @@
+import {
+  initializeFaro,
+  ReactIntegration,
+  getWebInstrumentations,
+  createReactRouterV6DataOptions,
+} from "@grafana/faro-react";
+import { matchRoutes } from "react-router";
+
+export function initFaro() {
+  const url = import.meta.env.VITE_FARO_URL;
+
+  if (!url) {
+    console.warn("Faro URL not configured. Skipping Faro initialization.");
+    return;
+  }
+
+  const appName = import.meta.env.VITE_FARO_APP_NAME || "@probo/trust";
+
+  initializeFaro({
+    url,
+    app: {
+      name: appName,
+      version: import.meta.env.VITE_APP_VERSION || "0.0.0",
+      environment: import.meta.env.MODE,
+    },
+    instrumentations: [
+      ...getWebInstrumentations({
+        captureConsole: true,
+        captureConsoleDisabledLevels: [],
+      }),
+      new ReactIntegration({
+        router: createReactRouterV6DataOptions({
+          matchRoutes,
+        }),
+      }),
+    ],
+  });
+}

apps/trust/src/main.tsx

@@ -1,10 +1,14 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { FaroErrorBoundary } from "@grafana/faro-react";
 import "./index.css";
 import { App } from "./App";
 import { RelayProvider } from "./providers/RelayProviders";
 import { TranslatorProvider } from "./providers/TranslatorProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { initFaro } from "./faro";
+
+initFaro();
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,12 +20,14 @@ const queryClient = new QueryClient({
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RelayProvider>
-        <TranslatorProvider>
-          <App />
-        </TranslatorProvider>
-      </RelayProvider>
-    </QueryClientProvider>
+    <FaroErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <RelayProvider>
+          <TranslatorProvider>
+            <App />
+          </TranslatorProvider>
+        </RelayProvider>
+      </QueryClientProvider>
+    </FaroErrorBoundary>
   </StrictMode>
 );

apps/trust/src/routes.tsx

@@ -6,6 +6,7 @@ import {
   useLoaderData,
   useRouteError,
 } from "react-router";
+import { withFaroRouterInstrumentation } from "@grafana/faro-react";
 import { type ComponentType, Fragment, Suspense } from "react";
 import {
   relayEnvironment,
@@ -174,6 +175,8 @@ function getBasename(): string {
   return trustMatch ? trustMatch[0] : "/";
 }
 
-export const router = createBrowserRouter(routes.map(routeTransformer), {
-  basename: getBasename(),
-});
+export const router = withFaroRouterInstrumentation(
+  createBrowserRouter(routes.map(routeTransformer), {
+    basename: getBasename(),
+  })
+);