error boundary

src/components/error-boundary.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export class ErrorBoundary extends React.Component {
+  state = {
+    error: false
+  }
+
+  static getDerivedStateFromError() {
+    return {
+      error: true
+    }
+  }
+
+  render() {
+    if (this.state.error) {
+      return <h1>Something went wrong.</h1>
+    }
+
+    return this.props.children
+  }
+}

src/pages/landing.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import data from '../__stubs__/landing-data.json'
+import data from "../__stubs__/landing-data.json";
 import { NavPanel } from "../components/nav-panel";
 import logo from "../assets/logo_1x.png";
 import cucumber from "../assets/cucumber.png";
@@ -21,10 +21,12 @@ import {
   PageFooter,
   PageHeader,
 } from "./style";
+import { ErrorBoundary } from "../components/error-boundary";
 
 export const LandingPage = () => {
   return (
     <>
+      <ErrorBoundary>
         <PageHeader>
           <Logo
             height="44px"
@@ -42,9 +44,9 @@ export const LandingPage = () => {
           (min-width: 520px) 880px
         "
           />
-        <NavPanel currentNavElement={'Home'} />
+          <NavPanel currentNavElement={"Home"} />
         </PageHeader>
-
+      </ErrorBoundary>
       <Main>
         <MainCardWrapper as="header">
           <MainCardText>
@@ -64,7 +66,16 @@ export const LandingPage = () => {
           </MainCardText>
           <MainCardImg src={cucumber} alt="" />
         </MainCardWrapper>
-        {data.map((item, index) => (
+        <ErrorBoundary><Cards /></ErrorBoundary>
+      </Main>
+
+      <PageFooter></PageFooter>
+    </>
+  );
+};
+
+const Cards = () =>
+  data.map((item, index) => (
     <Card
       directionReverse={index % 2 === 0}
       key={item.id}
@@ -75,10 +86,4 @@ export const LandingPage = () => {
     >
       {item.body}
     </Card>
-        ))}
+  ));
-      </Main>
-
-      <PageFooter></PageFooter>
-    </>
-  );
-};

src/pages/search-character.tsx

@@ -6,6 +6,9 @@ import logo from "../assets/logo_1x.png";
 import logo2x from "../assets/logo_2x.png";
 import logo4x from "../assets/logo_4x.png";
 import { NavPanel } from "../components/nav-panel";
+import { Header1 } from "../components/common";
+import { InputField } from "../components/field/field";
+import { URLs } from "../__data__/urls";
 
 import {
   BrandText,
@@ -19,9 +22,6 @@ import {
   SearchButton,
   SearchForm,
 } from "./style";
-import { Header1 } from "../components/common";
-import { InputField } from "../components/field/field";
-import { URLs } from "../__data__/urls";
 
 export const SearchCharacterPage = () => {
   return (

src/routes.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
+import React from "react";
-import { Routes, Route } from'react-router-dom';
+import { Routes, Route } from "react-router-dom";
 
-import { URLs } from './__data__/urls';
+import { URLs } from "./__data__/urls";
-import { LandingPage } from './pages/landing';
+import { LandingPage } from "./pages/landing";
-import { SearchCharacterPage } from './pages/search-character';
+import { SearchCharacterPage } from "./pages/search-character";
+import { ErrorBoundary } from "./components/error-boundary";
 
 export const PageRoutes = () => (
+  <ErrorBoundary>
     <Routes>
       <Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
       <Route path={URLs.baseUrl} element={<LandingPage />} />
-    {URLs.ui.search && <Route path={URLs.ui.search} element={<SearchCharacterPage />} />}
+      {URLs.ui.search && (
+        <Route path={URLs.ui.search} element={<SearchCharacterPage />} />
+      )}
 
       <Route path="*" element={<h1>Page not found</h1>} />
     </Routes>
-)
+  </ErrorBoundary>
+);