From 8fba709549013cf8d3513f94a3922684c4892c86 Mon Sep 17 00:00:00 2001
From: Tarrence van As <tarrencev@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:58:00 -0500
Subject: [PATCH] Log exceptions on ErrorPage (#1173)

---
 .../keychain/src/components/ErrorBoundary.tsx | 20 +++++++++----------
 packages/keychain/src/hooks/connection.ts     |  4 +++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/keychain/src/components/ErrorBoundary.tsx b/packages/keychain/src/components/ErrorBoundary.tsx
index 342041525..ff814ca04 100644
--- a/packages/keychain/src/components/ErrorBoundary.tsx
+++ b/packages/keychain/src/components/ErrorBoundary.tsx
@@ -1,11 +1,11 @@
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren, useEffect } from "react";
 import { Container, Content, Footer } from "./layout";
 import { AlertIcon, ExternalIcon } from "@cartridge/ui";
 import { Button, HStack, Link, Text } from "@chakra-ui/react";
 import { useConnection } from "hooks/connection";
 import NextLink from "next/link";
 import { CARTRIDGE_DISCORD_LINK } from "const";
-import posthog from "posthog-js";
+import { usePostHog } from "posthog-js/react";
 
 export class ErrorBoundary extends React.Component<
   PropsWithChildren,
@@ -20,14 +20,6 @@ export class ErrorBoundary extends React.Component<
     return { error };
   }
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.log({ error, errorInfo });
-    posthog?.captureException(error, {
-      info: errorInfo,
-      source: "ErrorBoundary",
-    });
-  }
-
   render() {
     if (this.state.error) {
       return <ErrorPage error={this.state.error} />;
@@ -40,6 +32,14 @@ export class ErrorBoundary extends React.Component<
 export function ErrorPage({ error }: { error: Error }) {
   const { closeModal } = useConnection();
 
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    posthog?.captureException(error, {
+      source: "ErrorPage",
+    });
+  }, [error, posthog]);
+
   return (
     <Container
       variant="expanded"
diff --git a/packages/keychain/src/hooks/connection.ts b/packages/keychain/src/hooks/connection.ts
index e9e043cf7..4840d6d33 100644
--- a/packages/keychain/src/hooks/connection.ts
+++ b/packages/keychain/src/hooks/connection.ts
@@ -215,7 +215,9 @@ export function useConnectionValue() {
           setChainId(chainId);
         } catch (e) {
           console.error(e);
-          setError(new Error("Unable to fetch Chain ID from provided RPC URL"));
+          setError(
+            new Error(`Unable to fetch Chain ID from provided RPC URL: ${e}`),
+          );
         }
       };