Highlight identifies users

apps/webapp/app/hooks/useHighlight.ts

@@ -0,0 +1,14 @@
+import { H } from "highlight.run";
+import { useUserChanged } from "./useUser";
+
+export function useHighlight() {
+  useUserChanged((user) => {
+    if (!user) {
+      return;
+    }
+
+    H.identify(user.id, {
+      email: user.email,
+    });
+  });
+}

apps/webapp/app/root.tsx

@@ -29,6 +29,7 @@ import { usePostHog } from "./hooks/usePostHog";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
 import { ErrorBoundary as HighlightErrorBoundary } from "@highlight-run/react";
+import { useHighlight } from "./hooks/useHighlight";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
@@ -96,6 +97,7 @@ function App() {
   const { posthogProjectKey, highlightProjectId } =
     useTypedLoaderData<typeof loader>();
   usePostHog(posthogProjectKey);
+  useHighlight();
 
   return (
     <>