Log exceptions on ErrorPage (#1173)

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"

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}`),
+          );
         }
       };