From a8491e28a5f77d1a2f25adaf98963b442273bae3 Mon Sep 17 00:00:00 2001 From: m5r Date: Sat, 2 Jul 2022 01:49:12 +0200 Subject: [PATCH] replace splitbee and panelbear with fathom --- app/config/config.server.ts | 11 ++++------ app/entry.client.tsx | 18 ++++++---------- app/entry.worker.ts | 4 ++-- app/features/core/hooks/use-fathom.ts | 21 ++++++++++++++++++ app/features/core/hooks/use-panelbear.ts | 21 ------------------ app/features/settings/actions/phone.ts | 3 +++ app/root.tsx | 27 ++++++++++++++++++------ app/routes/_hive.$.ts | 14 ------------ app/routes/bear[.]js.ts | 3 --- app/routes/bee[.]js.ts | 3 --- package-lock.json | 22 +++++++++---------- package.json | 2 +- server/index.ts | 14 ++++++------ 13 files changed, 76 insertions(+), 87 deletions(-) create mode 100644 app/features/core/hooks/use-fathom.ts delete mode 100644 app/features/core/hooks/use-panelbear.ts delete mode 100644 app/routes/_hive.$.ts delete mode 100644 app/routes/bear[.]js.ts delete mode 100644 app/routes/bee[.]js.ts diff --git a/app/config/config.server.ts b/app/config/config.server.ts index 53e9ddd..7dab7f4 100644 --- a/app/config/config.server.ts +++ b/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, diff --git a/app/entry.client.tsx b/app/entry.client.tsx index 4c7672c..1c3c82a 100644 --- a/app/entry.client.tsx +++ b/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(, document); if ("serviceWorker" in navigator) { diff --git a/app/entry.worker.ts b/app/entry.worker.ts index d7db2ed..a5e0a11 100644 --- a/app/entry.worker.ts +++ b/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; } diff --git a/app/features/core/hooks/use-fathom.ts b/app/features/core/hooks/use-fathom.ts new file mode 100644 index 0000000..eb1b85b --- /dev/null +++ b/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]); +} diff --git a/app/features/core/hooks/use-panelbear.ts b/app/features/core/hooks/use-panelbear.ts deleted file mode 100644 index b4d50d9..0000000 --- a/app/features/core/hooks/use-panelbear.ts +++ /dev/null @@ -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]); -} diff --git a/app/features/settings/actions/phone.ts b/app/features/settings/actions/phone.ts index 7d027c9..87e06d4 100644 --- a/app/features/settings/actions/phone.ts +++ b/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; diff --git a/app/root.tsx b/app/root.tsx index 6d55d5a..8fcdadf 100644 --- a/app/root.tsx +++ b/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(); - usePanelbear(shellphoneConfig.panelbear.siteId); + useFathom(); return ( @@ -136,7 +150,6 @@ const Document: FunctionComponent> = ({ children }) => ( {children} -