replace splitbee and panelbear with fathom

app/config/config.server.ts

@@ -32,11 +32,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`);
-invariant(
-	typeof process.env.PANELBEAR_SITE_ID === "string",
-	`Please define the "PANELBEAR_SITE_ID" environment variable`,
-);
+invariant(typeof process.env.FATHOM_SITE_ID === "string", `Please define the "FATHOM_SITE_ID" environment variable`);
 
 export default {
 	app: {
@@ -51,8 +47,9 @@ export default {
 		secretAccessKey: process.env.AWS_SES_ACCESS_KEY_SECRET,
 		fromEmail: process.env.AWS_SES_FROM_EMAIL,
 	},
-	panelBear: {
-		siteId: process.env.PANELBEAR_SITE_ID,
+	fathom: {
+		siteId: process.env.FATHOM_SITE_ID,
+		domain: process.env.FATHOM_CUSTOM_DOMAIN,
 	},
 	redis: {
 		url: process.env.REDIS_URL,

app/entry.client.tsx

@@ -3,20 +3,14 @@ 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 };
-		};
-	}
+if (window.shellphoneConfig.sentry.dsn) {
+	Sentry.init({
+		dsn: window.shellphoneConfig.sentry.dsn,
+		tracesSampleRate: 1.0,
+		integrations: [new Integrations.BrowserTracing()],
+	});
 }
 
-Sentry.init({
-	dsn: window.shellphoneConfig.sentry.dsn,
-	tracesSampleRate: 1.0,
-	integrations: [new Integrations.BrowserTracing()],
-});
-
 hydrate(<RemixBrowser />, document);
 
 if ("serviceWorker" in navigator) {

app/entry.worker.ts

@@ -33,8 +33,8 @@ self.addEventListener("fetch", (event) => {
 	const url = new URL(event.request.url);
 	const isSSERequest = event.request.headers.get("Accept") === "text/event-stream";
 	const isOutsideRequest = !["localhost", "dev.shellphone.app", "www.shellphone.app"].includes(url.hostname);
-	const isSplitbeeProxiedRequest = url.pathname.startsWith("/_hive") || url.pathname === "/bee.js";
-	if (isSSERequest || isOutsideRequest || isSplitbeeProxiedRequest) {
+
+	if (isSSERequest || isOutsideRequest) {
 		return;
 	}
 

app/features/core/hooks/use-fathom.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useLocation } from "@remix-run/react";
+import * as Fathom from "fathom-client";
+
+export default function useFathom() {
+	const location = useLocation();
+
+	useEffect(() => {
+		const { fathom, app } = window.shellphoneConfig;
+		Fathom.load(fathom.siteId, {
+			spa: "history",
+			url: fathom.domain ? `https://${fathom.domain}/script.js` : undefined,
+			includedDomains: [app.baseUrl.replace("https://", "")],
+		});
+	}, []);
+
+	useEffect(() => {
+		console.log(`tracking ${location.pathname}`);
+		Fathom.trackPageview();
+	}, [location]);
+}

app/features/core/hooks/use-panelbear.ts

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "@remix-run/react";
-import * as Panelbear from "@panelbear/panelbear-js";
-import type { PanelbearConfig } from "@panelbear/panelbear-js";
-
-export default function usePanelbear(siteId: string, config: PanelbearConfig = {}) {
-	const location = useLocation();
-
-	useEffect(() => {
-		Panelbear.load(siteId, {
-			scriptSrc: "/bear.js",
-			spaMode: "off",
-			autoTrack: false,
-			...config,
-		});
-	}, []);
-
-	useEffect(() => {
-		Panelbear.trackPageview();
-	}, [location]);
-}

app/features/settings/actions/phone.ts

@@ -145,6 +145,7 @@ async function setTwilioCredentials(request: Request, formData: unknown) {
 	await Promise.all(
 		phoneNumbers.map(async (phoneNumber) => {
 			const phoneNumberId = phoneNumber.sid;
+			logger.info(`Importing phone number with id=${phoneNumberId}`);
 			try {
 				await db.phoneNumber.create({
 					data: {
@@ -166,6 +167,8 @@ async function setTwilioCredentials(request: Request, formData: unknown) {
 					}),
 				]);
 			} catch (error: any) {
+				logger.error(error);
+
 				if (error.code !== "P2002") {
 					// if it's not a duplicate, it's a real error we need to handle
 					throw error;

app/root.tsx

@@ -13,20 +13,30 @@ import {
 } from "@remix-run/react";
 
 import config from "~/config/config.server";
-import usePanelbear from "~/features/core/hooks/use-panelbear";
+import useFathom from "~/features/core/hooks/use-fathom";
 import Logo from "~/features/core/components/logo";
 
 import styles from "./styles/tailwind.css";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
+declare global {
+	interface Window {
+		shellphoneConfig: LoaderData["shellphoneConfig"];
+	}
+}
+
 type LoaderData = {
 	shellphoneConfig: {
 		sentry: {
-			dsn: string;
+			dsn?: string;
 		};
-		panelbear: {
+		fathom: {
 			siteId: string;
+			domain?: string;
+		};
+		app: {
+			baseUrl: string;
 		};
 	};
 };
@@ -36,8 +46,12 @@ export const loader: LoaderFunction = () => {
 			sentry: {
 				dsn: config.sentry.dsn,
 			},
-			panelbear: {
-				siteId: config.panelBear.siteId,
+			fathom: {
+				siteId: config.fathom.siteId,
+				domain: config.fathom.domain,
+			},
+			app: {
+				baseUrl: config.app.baseUrl,
 			},
 		},
 	});
@@ -45,7 +59,7 @@ export const loader: LoaderFunction = () => {
 
 export default function App() {
 	const { shellphoneConfig } = useLoaderData<LoaderData>();
-	usePanelbear(shellphoneConfig.panelbear.siteId);
+	useFathom();
 	return (
 		<Document>
 			<Outlet />
@@ -136,7 +150,6 @@ const Document: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => (
 		<body className="h-full">
 			{children}
 			<ScrollRestoration />
-			<script async data-api="/_hive" src="/bee.js" />
 			<Scripts />
 			<LiveReload />
 		</body>

app/routes/_hive.$.ts

@@ -1,14 +0,0 @@
-import type { ActionFunction } from "remix";
-
-async function proxyHive(request: Request) {
-	const url = new URL(request.url);
-	const req = new Request("https://hive.splitbee.io" + url.pathname.replace("/_hive", ""), {
-		...request,
-		signal: null,
-	});
-	req.headers.set("x-country", request.headers.get("cf-ipcountry")!);
-	req.headers.set("x-real-ip", request.headers.get("x-real-ip")!);
-	return fetch(req);
-}
-
-export const action: ActionFunction = ({ request }) => proxyHive(request);

app/routes/bear[.]js.ts

@@ -1,3 +0,0 @@
-import type { LoaderFunction } from "remix";
-
-export const loader: LoaderFunction = () => fetch("https://cdn.panelbear.com/analytics.js");

app/routes/bee[.]js.ts

@@ -1,3 +0,0 @@
-import type { LoaderFunction } from "remix";
-
-export const loader: LoaderFunction = () => fetch("https://cdn.splitbee.io/sb.js");