feat(app): add highlight.run functionality

apps/app/package.json

@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.0",
     "@fontsource/atkinson-hyperlegible": "^4.5.11",
     "@fontsource/racing-sans-one": "^4.5.10",
+    "@highlight-run/react": "^3.2.2",
     "@iconify/icons-game-icons": "^1.2.1",
     "@iconify/icons-octicon": "^1.2.42",
     "@iconify/icons-solar": "^1.2.0",
@@ -31,6 +32,7 @@
     "case": "^1.6.3",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.7",
+    "highlight.run": "^8.12.2",
     "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "microdiff": "^1.3.2",

apps/app/src/main.tsx

@@ -1,10 +1,11 @@
 import _React from "react";
 import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import "@mantine/core/styles.css";
 
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { H } from "highlight.run";
+import { ErrorBoundary } from "@highlight-run/react";
 
 import App from "./App.tsx";
 
@@ -16,10 +17,21 @@ import { EditEnvironment } from "./routes/environments/EditEnvironment.tsx";
 import { EditFeature } from "./routes/features/EditFeature.tsx";
 import { EditGroup } from "./routes/groups/EditGroup.tsx";
 
+import "@mantine/core/styles.css";
 import "./index.css";
 
 import "@fontsource/atkinson-hyperlegible";
 
+H.init("kgryv6nd", {
+  serviceName: "vexilla-app",
+  tracingOrigins: true,
+  networkRecording: {
+    enabled: true,
+    recordHeadersAndBody: true,
+    urlBlocklist: [],
+  },
+});
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -58,8 +70,10 @@ const router = createBrowserRouter([
 ]);
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <MantineProvider>
-    <Notifications />
-    <RouterProvider router={router} />
-  </MantineProvider>
+  <ErrorBoundary>
+    <MantineProvider>
+      <Notifications />
+      <RouterProvider router={router} />
+    </MantineProvider>
+  </ErrorBoundary>
 );