feat: setup posthog

apps/edr-freight-web/backoffice/src/main.tsx

@@ -2,6 +2,8 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import { MantineProvider } from "@mantine/core";
+import posthog from "posthog-js";
+import { PostHogProvider } from "@posthog/react";
 import "@mantine/core/styles.css";
 import "@mantine/dates/styles.css";
 import "@edr/ui-common/styles.css";
@@ -19,6 +21,7 @@ import { ApiErrorModal } from "./components/errors/ApiErrorModal";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { AuthProvider } from "./auth/AuthProvider";
 import { queryClient } from "./lib/queryClient";
+import { initPostHog } from "./lib/posthog";
 import { freightMantineTheme } from "./theme/freight-brand";
 import { QueryClientProvider } from "@tanstack/react-query";
 
@@ -43,6 +46,10 @@ const applyStoredTheme = () => {
 
 applyStoredTheme();
 
+// Must run before render so replay and exception capture cover startup errors.
+// No-ops when VITE_POSTHOG_KEY is unset.
+initPostHog();
+
 const rootElement = document.getElementById("root");
 
 if (!rootElement) {
@@ -50,23 +57,25 @@ if (!rootElement) {
 }
 
 createRoot(rootElement).render(
-  <QueryClientProvider client={queryClient}>
-    <MantineProvider theme={freightMantineTheme}>
-      <StrictMode>
-        <BrowserRouter>
-          <AuthProvider>
-            <ErrorBoundary>
-              <App />
-            </ErrorBoundary>
-            {/* Global API error modal — shows the server's actual error
-                message (suppressed on warehouse / mile / onboarding pages). */}
-            <ApiErrorModal />
-            <Toaster position="top-right" />
-          </AuthProvider>
-        </BrowserRouter>
-      </StrictMode>
-    </MantineProvider>
-  </QueryClientProvider>
+  <PostHogProvider client={posthog}>
+    <QueryClientProvider client={queryClient}>
+      <MantineProvider theme={freightMantineTheme}>
+        <StrictMode>
+          <BrowserRouter>
+            <AuthProvider>
+              <ErrorBoundary>
+                <App />
+              </ErrorBoundary>
+              {/* Global API error modal — shows the server's actual error
+                  message (suppressed on warehouse / mile / onboarding pages). */}
+              <ApiErrorModal />
+              <Toaster position="top-right" />
+            </AuthProvider>
+          </BrowserRouter>
+        </StrictMode>
+      </MantineProvider>
+    </QueryClientProvider>
+  </PostHogProvider>
 );
 
 // run