diff --git a/components/error-boundary/index.tsx b/components/error-boundary/index.tsx new file mode 100644 index 0000000..1ab6185 --- /dev/null +++ b/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 { + 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 ( +

+ Oops.. there is something wrong. +
Please try again. Go to home +

+ ); + } + + return this.props.children; + } +} + +export default ErrorBoundary; diff --git a/pages/_app.tsx b/pages/_app.tsx index 19b38ef..a4f779c 100644 --- a/pages/_app.tsx +++ b/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 ( - + + + ); } diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx index 431af3e..adea36a 100644 --- a/pages/verification/index.tsx +++ b/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("/api/icns-verification", { - method: "post", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - claimer: key.bech32Address, - authToken: twitterAuthInfo.accessToken, - }), - }) - ).verificationList; + const icnsVerificationList = ( + await request("/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 ( - - + + + - - {isLoading ? ( - - ) : ( - - + + {isLoading ? ( + + ) : ( + + - - Chain List - Search - + + Chain List + Search + - + - - - Register - - - - )} - - + + + Register + + + + )} + + + ); } diff --git a/utils/url.ts b/utils/url.ts index 5f5ba84..8f1b51f 100644 --- a/utils/url.ts +++ b/utils/url.ts @@ -3,7 +3,16 @@ export function request( config: RequestInit = {}, ): Promise { 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); }