production analytics with panel bear

app/core/hooks/use-panelbear.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import * as Panelbear from "@panelbear/panelbear-js";
+import type { PanelbearConfig } from "@panelbear/panelbear-js";
+
+export const usePanelbear = (siteId?: string, config: PanelbearConfig = {}) => {
+	const router = useRouter();
+
+	useEffect(() => {
+		if (!siteId) {
+			return;
+		}
+
+		Panelbear.load(siteId, { scriptSrc: "/bear.js", ...config });
+		Panelbear.trackPageview();
+		const handleRouteChange = () => Panelbear.trackPageview();
+		router.events.on("routeChangeComplete", handleRouteChange);
+
+		return () => router.events.off("routeChangeComplete", handleRouteChange);
+	}, [siteId]);
+};

app/pages/_app.tsx

@@ -7,13 +7,19 @@ import {
 	AuthorizationError,
 	ErrorFallbackProps,
 	useQueryErrorResetBoundary,
+	getConfig,
 } from "blitz";
 
 import LoginForm from "../auth/components/login-form";
+import { usePanelbear } from "../core/hooks/use-panelbear";
 
 import "app/core/styles/index.css";
 
+const { publicRuntimeConfig } = getConfig();
+
 export default function App({ Component, pageProps }: AppProps) {
+	usePanelbear(publicRuntimeConfig.panelBear.siteId);
+
 	const getLayout = Component.getLayout || ((page) => page);
 
 	return (

blitz.config.ts

@@ -19,6 +19,14 @@ type Module = Omit<NodeModule, "exports"> & { exports: BlitzConfig };
 			},
 		];
 	},
+	async rewrites() {
+		return [
+			{
+				source: "/bear.js",
+				destination: "https://cdn.panelbear.com/analytics.js",
+			},
+		];
+	},
 	middleware: [
 		sessionMiddleware({
 			cookiePrefix: "shellphone",
@@ -59,6 +67,9 @@ type Module = Omit<NodeModule, "exports"> & { exports: BlitzConfig };
 		webPush: {
 			publicKey: process.env.WEB_PUSH_VAPID_PUBLIC_KEY,
 		},
+		panelBear: {
+			siteId: process.env.PANELBEAR_SITE_ID,
+		},
 	},
 	/* Uncomment this to customize the webpack config
 	webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

package.json

@@ -46,6 +46,7 @@
 		"@headlessui/react": "1.4.0",
 		"@heroicons/react": "1.0.4",
 		"@hookform/resolvers": "2.8.0",
+		"@panelbear/panelbear-js": "1.2.0",
 		"@prisma/client": "2.30.0",
 		"@react-aria/interactions": "3.5.1",
 		"@tailwindcss/forms": "0.3.3",