feat: error boundary

lidofinance · Jun 27, 2024 · b92b167 · b92b167
1 parent eddf917
commit b92b167
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 2 deletions.
diff --git a/features/stake/stake.tsx b/features/stake/stake.tsx
@@ -1,3 +1,5 @@
+import { useErrorBoundary } from 'react-error-boundary';
+
 import { FaqPlaceholder } from 'features/ipfs';
 import { useWeb3Key } from 'shared/hooks/useWeb3Key';
 import NoSSRWrapper from 'shared/components/no-ssr-wrapper';
@@ -10,8 +12,18 @@ import { StakeForm } from './stake-form';
 
 export const Stake = () => {
   const key = useWeb3Key();
+  const { showBoundary } = useErrorBoundary();
+
   return (
     <>
+      {/* TODO: DEMO, delete later */}
+      <button
+        onClick={() => {
+          showBoundary('Stake -> <> -> button');
+        }}
+      >
+        Throw new Error (1)
+      </button>
       <GoerliSunsetBanner />
       <NoSSRWrapper>
         <StakeForm key={key} />

diff --git a/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx b/features/wsteth/unwrap/unwrap-form/unwrap-form.tsx
@@ -1,4 +1,4 @@
-import { memo, FC } from 'react';
+import { FC, memo, useEffect } from 'react';
 import { useFeatureFlag, VAULTS_BANNER_IS_ENABLED } from 'config/feature-flags';
 
 import { MATOMO_CLICK_EVENTS } from 'consts/matomo-click-events';
@@ -14,6 +14,11 @@ import { SubmitButtonUnwrap } from '../unwrap-form-controls/submit-button-unwrap
 
 export const UnwrapForm: FC = memo(() => {
   const { vaultsBannerIsEnabled } = useFeatureFlag(VAULTS_BANNER_IS_ENABLED);
+  // TODO: DEMO, delete later
+  useEffect(() => {
+    throw new Error('UnwrapForm -> useEffect');
+  }, []);
+
   return (
     <UnwrapFormProvider>
       <WrapBlock data-testid="unwrapForm">

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react": "^18.2.0",
     "react-device-detect": "^1.17.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.45.2",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { AppProps } from 'next/app';
 import 'nprogress/nprogress.css';
 import Head from 'next/head';
@@ -15,6 +16,7 @@ import { withCsp } from 'config/csp';
 import { SecurityStatusBanner } from 'features/ipfs';
 import { Providers } from 'providers';
 import { BackgroundGradient } from 'shared/components/background-gradient/background-gradient';
+import { ErrorBoundaryFallback } from 'shared/components/error-boundary';
 import NoSsrWrapper from 'shared/components/no-ssr-wrapper';
 import { nprogress, COOKIES_ALLOWED_FULL_KEY } from 'utils';
 
@@ -30,7 +32,11 @@ nprogress();
 const App = (props: AppProps) => {
   const { Component, pageProps } = props;
 
-  return <Component {...pageProps} />;
+  return (
+    <ErrorBoundary fallbackRender={ErrorBoundaryFallback}>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  );
 };
 
 const MemoApp = memo(App);

diff --git a/shared/components/error-boundary/error-boundary.tsx b/shared/components/error-boundary/error-boundary.tsx
@@ -0,0 +1,22 @@
+import Head from 'next/head';
+import { ServicePage, Button } from '@lidofinance/lido-ui';
+
+export const ErrorBoundaryFallback = () => {
+  return (
+    <ServicePage title="Client Side Error">
+      <Head>
+        <title>Lido | Client Side Error</title>
+      </Head>
+      <p style={{ marginBottom: '15px' }}>Something went wrong</p>
+      <Button
+        onClick={() => {
+          window.location.reload();
+        }}
+        size={'xxs'}
+        color={'secondary'}
+      >
+        Restart the page
+      </Button>
+    </ServicePage>
+  );
+};
diff --git a/shared/components/error-boundary/index.ts b/shared/components/error-boundary/index.ts
@@ -0,0 +1 @@
+export * from './error-boundary';
diff --git a/yarn.lock b/yarn.lock
@@ -1000,6 +1000,13 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@^7.12.5":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.17.2", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
@@ -9093,6 +9100,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-error-boundary@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
+  integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-hook-form@^7.45.2:
   version "7.49.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.3.tgz#576a4567f8a774830812f4855e89f5da5830435c"