feat: Added error tracking / logging (#220)

apps/web/next.config.mjs

@@ -3,6 +3,7 @@
  * for Docker builds.
  */
 await import("./env.mjs");
+import { withLogtail } from "@logtail/next";
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -35,4 +36,4 @@ const config = {
     return config;
   },
 };
-export default config;
+export default withLogtail(config);

apps/web/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.10",
+    "@hotjar/browser": "^1.0.9",
+    "@logtail/next": "^0.1.5",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",

apps/web/src/app/(routes)/root-layout-container.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Hotjar from "@hotjar/browser";
 import clsx from "clsx";
 import { cn } from "design-system/src/lib/utils";
 import { usePathname } from "next/navigation";
@@ -8,10 +9,16 @@ import React, { type PropsWithChildren } from "react";
 import { api } from "~/utils/api";
 
 import Header from "../_components/Header";
+import Logger from "../_components/Logger";
 import MobilePlaceholder from "../_components/MobilePlaceholder";
 import useCurrentChain from "../_hooks/useCurrentChain";
 import Providers from "./providers";
 
+const siteId = 5032874;
+const hotjarVersion = 6;
+
+Hotjar.init(siteId, hotjarVersion);
+
 function RootLayoutContainer({ children }: PropsWithChildren) {
   const { targetChain } = useCurrentChain();
   const pathname = usePathname();
@@ -35,6 +42,7 @@ function RootLayoutContainer({ children }: PropsWithChildren) {
           <MobilePlaceholder />
         </div>
       )}
+      <Logger />
     </body>
   );
 }

apps/web/src/app/_components/Logger.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { log } from "@logtail/next";
+import { useEffect } from "react";
+
+export default function Logger() {
+  useEffect(() => {
+    function logError(event: ErrorEvent) {
+      console.log("ERROR DETECTED");
+      log.error(event.message, {
+        column: event.colno,
+        line: event.lineno,
+        url: event.filename,
+      });
+    }
+    function logUnhandledRejection(event: PromiseRejectionEvent) {
+      console.log("ERROR DETECTED");
+      log.error("Unhandled Promise Rejection", {
+        reason: event.reason as string,
+      });
+    }
+
+    window.addEventListener("error", logError);
+    window.addEventListener("unhandledrejection", logUnhandledRejection);
+    return () => {
+      document.removeEventListener("error", logError);
+    };
+  }, []);
+
+  return null;
+}

apps/web/src/pages/api/trpc/[trpc].ts

@@ -1,19 +1,30 @@
+import { log } from "@logtail/next";
+import { withLogtail } from "@logtail/next";
 import { createNextApiHandler } from "@trpc/server/adapters/next";
 import { env } from "~/../env.mjs";
 
 import { appRouter } from "~/server/api/root";
 import { createTRPCContext } from "~/server/api/trpc";
 
 // export API handler
-export default createNextApiHandler({
-  createContext: createTRPCContext,
-  onError:
-    env.NODE_ENV === "development"
-      ? ({ error, path }) => {
-          console.error(
-            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
-          );
-        }
-      : undefined,
-  router: appRouter,
-});
+export default withLogtail(
+  createNextApiHandler({
+    createContext: createTRPCContext,
+    onError:
+      env.NODE_ENV === "development"
+        ? ({ error, path }) => {
+            console.error(
+              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+            );
+          }
+        : ({ error, path }) => {
+            log.error(
+              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
+            );
+            if (error.stack !== undefined) {
+              log.error(error.stack);
+            }
+          },
+    router: appRouter,
+  })
+);