report errors to sentry

app/config/config.server.ts

@@ -36,6 +36,7 @@ invariant(
 	typeof process.env.WEB_PUSH_VAPID_PUBLIC_KEY === "string",
 	`Please define the "WEB_PUSH_VAPID_PUBLIC_KEY" environment variable`,
 );
+invariant(typeof process.env.SENTRY_DSN === "string", `Please define the "SENTRY_DSN" environment variable`);
 
 export default {
 	app: {
@@ -54,6 +55,9 @@ export default {
 		url: process.env.REDIS_URL,
 		password: process.env.REDIS_PASSWORD,
 	},
+	sentry: {
+		dsn: process.env.SENTRY_DSN,
+	},
 	twilio: {
 		authToken: process.env.TWILIO_AUTH_TOKEN,
 	},

app/entry.client.tsx

@@ -1,5 +1,21 @@
 import { hydrate } from "react-dom";
 import { RemixBrowser } from "@remix-run/react";
+import * as Sentry from "@sentry/browser";
+import { Integrations } from "@sentry/tracing";
+
+declare global {
+	interface Window {
+		shellphoneConfig: {
+			sentry: { dsn: string };
+		};
+	}
+}
+
+Sentry.init({
+	dsn: window.shellphoneConfig.sentry.dsn,
+	tracesSampleRate: 1.0,
+	integrations: [new Integrations.BrowserTracing()],
+});
 
 hydrate(<RemixBrowser />, document);
 

app/root.tsx

@@ -1,17 +1,48 @@
 import type { FunctionComponent, PropsWithChildren } from "react";
-import type { LinksFunction } from "@remix-run/node";
-import { Link, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch } from "@remix-run/react";
+import { type LinksFunction, type LoaderFunction, json } from "@remix-run/node";
+import {
+	Link,
+	Links,
+	LiveReload,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useCatch,
+	useLoaderData,
+} from "@remix-run/react";
 
+import config from "~/config/config.server";
 import Logo from "~/features/core/components/logo";
 
 import styles from "./styles/tailwind.css";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
+type LoaderData = {
+	shellphoneConfig: string;
+};
+export const loader: LoaderFunction = () => {
+	return json<LoaderData>({
+		shellphoneConfig: JSON.stringify({
+			sentry: {
+				dsn: config.sentry.dsn,
+			},
+		}),
+	});
+};
+
 export default function App() {
+	const { shellphoneConfig } = useLoaderData<LoaderData>();
 	return (
 		<Document>
 			<Outlet />
+			<script
+				suppressHydrationWarning
+				dangerouslySetInnerHTML={{
+					__html: `window.shellphoneConfig=${shellphoneConfig};`,
+				}}
+			/>
 		</Document>
 	);
 }

app/routes/__app.tsx

@@ -1,5 +1,6 @@
 import { type LinksFunction, type LoaderFunction, json } from "@remix-run/node";
-import { Outlet, useCatch, useMatches } from "@remix-run/react";
+import { Outlet, useCatch, useLoaderData, useMatches } from "@remix-run/react";
+import * as Sentry from "@sentry/browser";
 
 import serverConfig from "~/config/config.server";
 import { type SessionData, requireLoggedIn } from "~/utils/auth.server";
@@ -10,6 +11,7 @@ import useServiceWorkerRevalidate from "~/features/core/hooks/use-service-worker
 import useDevice from "~/features/phone-calls/hooks/use-device";
 import footerStyles from "~/features/core/components/footer.css";
 import appStyles from "~/styles/app.css";
+import { useEffect } from "react";
 
 export const links: LinksFunction = () => [
 	{ rel: "stylesheet", href: appStyles },
@@ -35,9 +37,14 @@ export const loader: LoaderFunction = async ({ request }) => {
 export default function __App() {
 	useDevice();
 	useServiceWorkerRevalidate();
+	const { sessionData } = useLoaderData<AppLoaderData>();
 	const matches = useMatches();
 	const hideFooter = matches.some((match) => match.handle?.hideFooter === true);
 
+	useEffect(() => {
+		Sentry.setUser(sessionData.user);
+	}, []);
+
 	return (
 		<>
 			<div className="h-full w-full overflow-hidden fixed bg-gray-100">