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 />
-      <Component {...pageProps} />
+      <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,26 +108,30 @@ export default function VerificationPage() {
   };
 
   const verifyTwitterAccount = async () => {
-    const keplr = await getKeplrFromWindow();
+    try {
+      const keplr = await getKeplrFromWindow();
 
-    if (twitterAuthInfo && keplr) {
-      const wallet = new KeplrWallet(keplr);
-      const key = await wallet.getKey(MainChainId);
+      if (twitterAuthInfo && keplr) {
+        const wallet = new KeplrWallet(keplr);
+        const key = await wallet.getKey(MainChainId);
 
-      const icnsVerificationList = (
-        await request<IcnsVerificationResponse>("/api/icns-verification", {
-          method: "post",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            claimer: key.bech32Address,
-            authToken: twitterAuthInfo.accessToken,
-          }),
-        })
-      ).verificationList;
+        const icnsVerificationList = (
+          await request<IcnsVerificationResponse>("/api/icns-verification", {
+            method: "post",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              claimer: key.bech32Address,
+              authToken: twitterAuthInfo.accessToken,
+            }),
+          })
+        ).verificationList;
 
-      console.log(icnsVerificationList);
+        console.log(icnsVerificationList);
+      }
+    } catch (error) {
+      console.log(error);
     }
   };
 
@@ -135,39 +140,41 @@ export default function VerificationPage() {
   };
 
   return (
-    <Container>
-      <Logo />
+    <ErrorBoundary>
+      <Container>
+        <Logo />
 
-      <MainContainer>
-        {isLoading ? (
-          <SkeletonChainList />
-        ) : (
-          <ContentContainer>
-            <TwitterProfile twitterProfileInformation={twitterAuthInfo} />
+        <MainContainer>
+          {isLoading ? (
+            <SkeletonChainList />
+          ) : (
+            <ContentContainer>
+              <TwitterProfile twitterProfileInformation={twitterAuthInfo} />
 
-            <ChainListTitleContainer>
-              <ChainListTitle>Chain List</ChainListTitle>
-              <SearchContainer>Search</SearchContainer>
-            </ChainListTitleContainer>
+              <ChainListTitleContainer>
+                <ChainListTitle>Chain List</ChainListTitle>
+                <SearchContainer>Search</SearchContainer>
+              </ChainListTitleContainer>
 
-            <ChainList
-              chainList={chainList}
-              checkedItems={checkedItems}
-              setCheckedItems={setCheckedItems}
-            />
+              <ChainList
+                chainList={chainList}
+                checkedItems={checkedItems}
+                setCheckedItems={setCheckedItems}
+              />
 
-            <ButtonContainer>
-              <PrimaryButton
-                disabled={checkedItems.size < 1}
-                onClick={onClickRegistration}
-              >
-                Register
-              </PrimaryButton>
-            </ButtonContainer>
-          </ContentContainer>
-        )}
-      </MainContainer>
-    </Container>
+              <ButtonContainer>
+                <PrimaryButton
+                  disabled={checkedItems.size < 1}
+                  onClick={onClickRegistration}
+                >
+                  Register
+                </PrimaryButton>
+              </ButtonContainer>
+            </ContentContainer>
+          )}
+        </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);
 }