error boundary

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,30 +21,32 @@ import {
   PageFooter,
   PageHeader,
 } from "./style";
+import { ErrorBoundary } from "../components/error-boundary";
 
 export const LandingPage = () => {
   return (
     <>
-      <PageHeader>
-        <Logo
-          height="44px"
-          width="227"
-          src={logo4x}
-          alt="Логотип. Надпись Рик и Морти"
-          srcSet={`
+      <ErrorBoundary>
+        <PageHeader>
+          <Logo
+            height="44px"
+            width="227"
+            src={logo4x}
+            alt="Логотип. Надпись Рик и Морти"
+            srcSet={`
             ${logo} 220w,
             ${logo2x} 445w,
             ${logo4x} 880w,
           `}
-          sizes="
+            sizes="
           (max-width: 240px) 100px,
           (min-width: 320px) 440px,
           (min-width: 520px) 880px
         "
-        />
-        <NavPanel currentNavElement={'Home'} />
-      </PageHeader>
-
+          />
+          <NavPanel currentNavElement={"Home"} />
+        </PageHeader>
+      </ErrorBoundary>
       <Main>
         <MainCardWrapper as="header">
           <MainCardText>
@@ -64,21 +66,24 @@ export const LandingPage = () => {
           </MainCardText>
           <MainCardImg src={cucumber} alt="" />
         </MainCardWrapper>
-        {data.map((item, index) => (
-          <Card
-            directionReverse={index % 2 === 0}
-            key={item.id}
-            title={item.title}
-            image={item.image}
-            link={item.link}
-            subTitle={item.subTitle}
-          >
-            {item.body}
-          </Card>
-        ))}
+        <ErrorBoundary><Cards /></ErrorBoundary>
       </Main>
 
       <PageFooter></PageFooter>
     </>
   );
 };
+
+const Cards = () =>
+  data.map((item, index) => (
+    <Card
+      directionReverse={index % 2 === 0}
+      key={item.id}
+      title={item.title}
+      image={item.image}
+      link={item.link}
+      subTitle={item.subTitle}
+    >
+      {item.body}
+    </Card>
+  ));