use react-dom createRoot; create ErrorBoundary component

README.md

@@ -10,7 +10,6 @@ The Boilerplate to start React+Redux project with TypeScript in an easier and fa
 - Webpack
 - Jest
 - Tailwind
-- styled-components
 - EsLint
 - Prettier
 
@@ -68,12 +67,29 @@ The Boilerplate to start React+Redux project with TypeScript in an easier and fa
     ├── types                   # type definitions
     ├── utils                   # utility functions
     └── index.tsx               # entry point for the app
-├── .babelrc
-├── .eslintrc.js
-├── .prettierrc.js
-├── package.json
-├── tsconfig.json
-├── webpack.config.js
-├── tailwind.config.js
-├── postcss.config.js
-```
+├── .babelrc                    # Babel configuration
+├── .eslintrc.js                # ESLint configuration
+├── .prettierrc.js              # Prettier configuration
+├── tsconfig.json               # TypeScript configuration
+├── webpack.config.js           # Webpack configurations
+├── tailwind.config.js          # Tailwind CSS configurations
+├── postcss.config.js           # PostCSS configurations
+```
+
+## Issues
+Find a bug or want to request a new feature? Please let me know by submitting an issue.
+
+## Licensing
+Copyright 2022 Jinnan Zhang
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,47 @@
+import React, { PureComponent, ReactNode } from 'react';
+
+interface Props {
+    children?: ReactNode;
+}
+
+interface State {
+    error: Error | null;
+    errorInfo: { componentStack: string } | null;
+}
+
+export default class ErrorBoundary extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            error: null,
+            errorInfo: null,
+        };
+    }
+
+    componentDidCatch(
+        error: Error,
+        errorInfo: { componentStack: string }
+    ): void {
+        // Catch errors in any components below and re-render with error message
+        this.setState({ error, errorInfo });
+
+        // You can also log error messages to an error reporting service here
+    }
+
+    render() {
+        const { children } = this.props;
+        const { error, errorInfo } = this.state;
+
+        if (!error) {
+            return children;
+        }
+
+        return (
+            <div>
+                <h1>Something went wrong</h1>
+                {error ? <p>{error.toString()}</p> : null}
+            </div>
+        );
+    }
+}

src/components/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';

src/index.tsx

@@ -1,26 +1,27 @@
 import './styles/index.css';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider as ReduxProvider } from 'react-redux';
 
 import configureAppStore, { getPreloadedState } from './store/configureStore';
 
 import AppContextProvider from './contexts/AppContextProvider';
 
-import { DemoPage, RootPage } from './pages';
+import { DemoPage, HomePage } from './pages';
 
 (async () => {
     const preloadedState = getPreloadedState();
 
-    ReactDOM.render(
+    const root = createRoot(document.getElementById('root'));
+
+    root.render(
         <React.StrictMode>
             <ReduxProvider store={configureAppStore(preloadedState)}>
                 <AppContextProvider>
                     <DemoPage />
                 </AppContextProvider>
             </ReduxProvider>
-        </React.StrictMode>,
-        document.getElementById('root')
+        </React.StrictMode>
     );
 })();

src/pages/Demo/DemoPage.tsx

@@ -10,6 +10,8 @@ import {
 import { MapView, SearchWidget } from '../../components/ArcGIS';
 import { WEB_MAP_ID } from '../../constants/map';
 
+import { ErrorBoundary } from '../../components';
+
 const ToggleBtn: React.FC = () => {
     const dispatch = useDispatch();
 
@@ -48,8 +50,10 @@ const MapContainer: React.FC = () => {
 const DemoPage = () => {
     return (
         <>
-            <MapContainer />
-            <ToggleBtn />
+            <ErrorBoundary>
+                <MapContainer />
+                <ToggleBtn />
+            </ErrorBoundary>
         </>
     );
 };

src/pages/Home/HomePage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ErrorBoundary } from '../../components';
+
+const HomePage = () => {
+    return (
+        <ErrorBoundary>
+            <h1>React Redux Boilerplate</h1>
+            <p>You can put the components of your app here</p>
+        </ErrorBoundary>
+    );
+};
+
+export default HomePage;

src/pages/index.ts

@@ -1,2 +1,2 @@
-export { default as RootPage } from './Root/RootPage';
+export { default as HomePage } from './Home/HomePage';
 export { default as DemoPage } from './Demo/DemoPage';