Add error handling

components/error-boundary/index.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <h1>
+          Oops.. there is something wrong.
+          <br /> Please try again. <Link href="/">Go to home</Link>
+        </h1>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

pages/_app.tsx

@@ -1,5 +1,6 @@
 import type { AppProps } from "next/app";
 import React from "react";
+import ErrorBoundary from "../components/error-boundary";
 
 import { GlobalStyle } from "../styles/global";
 
@@ -7,7 +8,9 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <React.Fragment>
       <GlobalStyle />
+      <ErrorBoundary>
         <Component {...pageProps} />
+      </ErrorBoundary>
     </React.Fragment>
   );
 }

pages/verification/index.tsx

@@ -24,6 +24,7 @@ import { useRouter } from "next/router";
 import { MainChainId } from "../../constants/wallet";
 import { getKeplrFromWindow, KeplrWallet } from "../../wallets";
 import { ChainIdHelper } from "@keplr-wallet/cosmos";
+import ErrorBoundary from "../../components/error-boundary";
 
 export default function VerificationPage() {
   const router = useRouter();
@@ -107,6 +108,7 @@ export default function VerificationPage() {
   };
 
   const verifyTwitterAccount = async () => {
+    try {
       const keplr = await getKeplrFromWindow();
 
       if (twitterAuthInfo && keplr) {
@@ -128,6 +130,9 @@ export default function VerificationPage() {
 
         console.log(icnsVerificationList);
       }
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   const onClickRegistration = async () => {
@@ -135,6 +140,7 @@ export default function VerificationPage() {
   };
 
   return (
+    <ErrorBoundary>
       <Container>
         <Logo />
 
@@ -168,6 +174,7 @@ export default function VerificationPage() {
           )}
         </MainContainer>
       </Container>
+    </ErrorBoundary>
   );
 }
 

utils/url.ts

@@ -3,7 +3,16 @@ export function request<TResponse>(
   config: RequestInit = {},
 ): Promise<TResponse> {
   return fetch(url, config)
-    .then((response) => response.json())
+    .then((response) => {
+      if (!response.ok) {
+        console.error(
+          new Error(
+            `This is an HTTP error: The status is ${response.status} ${response.statusText}`,
+          ),
+        );
+      }
+      return response.json();
+    })
     .then((data) => data as TResponse);
 }