style: 💄 color change

.gitignore

@@ -40,3 +40,4 @@ yarn-error.log*
 # IDE's
 .vscode
 .idea
+src/components

src/components/App.js

@@ -1,4 +1,6 @@
 import React, { Suspense, lazy } from "react";
+import ErrorBoundary from "./ErrorBoundary";
+import Fallback from "./Fallback";
 const Counter = lazy(() => import("./Counter"));
 
 const App = () => {
@@ -7,14 +9,16 @@ const App = () => {
     <div>
       <header>
         {/* messing up on purpose */}
-        <h1>{testMessage}</h1>
+        <h1 className="red">{testMessage}</h1>
       </header>
-      <Suspense fallback={<div>Loading...</div>}>
-        {/* another mistake */}
-        <main id="content">
-          <Counter />
-        </main>
-      </Suspense>
+      <ErrorBoundary fallback={Fallback}>
+        <Suspense fallback={<div>Loading...</div>}>
+          {/* another mistake */}
+          <main id="content">
+            <Counter />
+          </main>
+        </Suspense>
+      </ErrorBoundary>
     </div>
   );
 };

src/components/Fallback.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Fallback = ({ message, criticalRenderPath }) => {
+  return (
+    <div data-testid="default-fallback">
+      {criticalRenderPath && (
+        <p>{message || "Something went wrong, please retry"}</p>
+      )}
+    </div>
+  );
+};
+
+Fallback.propTypes = {
+  message: PropTypes.string,
+  criticalRenderPath: PropTypes.bool,
+};
+
+export default Fallback;

src/styles/global.scss

@@ -10,3 +10,6 @@ button {
   margin-right: 16px;
 }
 
+.red {
+  color: red;
+}