Add user tagging for logged-in staff users

app/entry.client.tsx

@@ -22,6 +22,7 @@ Sentry.init({
   replaysSessionSampleRate: 0.02,
   sendDefaultPii: true,
   tracesSampleRate: 0.1,
+  tunnel: "/api/st",
 });
 
 function ClientCacheProvider({ children }: { children: ReactNode }) {

app/root.tsx

@@ -27,7 +27,11 @@ import Navigation from "../components/Navigation.js";
 import { type ReactNode, StrictMode, useContext, useEffect } from "react";
 import theme from "../theme.js";
 import { withEmotionCache } from "@emotion/react";
-import { captureRemixErrorBoundaryError, withSentry } from "@sentry/remix";
+import {
+  captureRemixErrorBoundaryError,
+  setUser,
+  withSentry,
+} from "@sentry/remix";
 
 export function ErrorBoundary() {
   const error = useRouteError() as ErrorResponse;
@@ -226,6 +230,18 @@ function DocumentWrapper(props: {
 function App() {
   const loaderData = useLoaderData<typeof loader>();
 
+  if (
+    loaderData.id &&
+    [0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].find(
+      (p) => loaderData.permissions & (1 << p),
+    )
+  )
+    setUser({
+      email: loaderData.email,
+      id: loaderData.id,
+      username: loaderData.username,
+    });
+
   return (
     <DocumentWrapper loaderData={loaderData}>
       <Outlet />