add error wrapper

.env.example

@@ -8,4 +8,5 @@ REACT_APP_FOOTER=/example-goes-here
 REACT_APP_CASE_STUDIES_LANDING_PAGE=/example-goes-here
 REACT_APP_CASE_STUDIES=/example-goes-here
 REACT_APP_WHO_IS_USING_PAGE=/example-goes-here
-REACT_APP_HOW_WORKS=/example-goes-here
+REACT_APP_HOW_WORKS=/example-goes-here
+REACT_APP_BASE_URL_API=logging-api-uri

package.json

@@ -1,22 +1,28 @@
 {
   "name": "or-uk-frontend",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^12.1.10",
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
     "dompurify": "^2.2.8",
     "enzyme": "^3.11.0",
     "express": "^4.17.1",
     "inter-ui": "^3.18.0",
     "jest-enzyme": "^7.1.2",
     "jquery": "^3.6.0",
     "json-server": "^0.16.3",
+    "loglevel": "^1.7.1",
+    "loglevel-plugin-remote": "^0.6.8",
     "popper.js": "^1.16.1",
     "react": "^17.0.2",
     "react-anchor-link-smooth-scroll": "^1.0.12",
     "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.1",
     "react-markdown": "^5.0.3",
     "react-router-dom": "^5.2.0",
     "react-script-tag": "^1.1.2",

src/components/fallback/index.js

@@ -0,0 +1,28 @@
+import log from 'loglevel';
+import remote from 'loglevel-plugin-remote';
+
+function FallBackRender( {error} , resetErrorBoundary ) {
+
+    if (!process.env.REACT_APP_BASE_URL_API) return null;
+
+    const customJSON = log => ({ 
+       msg: log.message,
+        stacktrace: log.stacktrace 
+    });
+
+    remote.apply(log,  { format: customJSON, url: `${process.env.REACT_APP_BASE_URL_API}` });
+
+    log.enableAll();
+    log.getLogger('child').error(error.error);
+
+    return (
+        <main id="content" className="main-container">
+            <div class="page-container">
+                <div role="alert">
+                    <div>Unable to load the requested page click here to try again.  If problem persists please contact the site administrator at [email protected]</div>
+                </div>
+            </div>
+        </main>
+    )
+}
+export default FallBackRender;

src/index.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import ScrollToTop from './components/navigator/ScrollToTop';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { ErrorBoundary } from 'react-error-boundary';
+import FallBackRender from './components/fallback';
+import ScrollToTop from './components/navigator/ScrollToTop';
+
+
 
 ReactDOM.render(
   <React.StrictMode>
+    <ErrorBoundary fallbackRender={(error, resetErrorBoundary) => <FallBackRender error={error} resetErrorBoundary={resetErrorBoundary}/>}>
     <Router>
       <ScrollToTop/>
       <App />
     </Router>
+    </ErrorBoundary>
   </React.StrictMode>,
 
   document.getElementById('root')

src/server/app.js

@@ -0,0 +1,24 @@
+import express from 'express';
+import bodyParser from 'body-parser';
+
+
+const PORT = process.env.SERVER_PORT? process.env.SERVER_PORT: 3003;
+const app = express();
+const api = new express.Router();
+api.use(bodyParser.json());
+
+app.use('/api', api);
+api.post("/logger/", (req, res, next) => {
+
+    if (req.body) {
+        console.log(req.body); //write to server file
+        res.status(500).send('Unsuccessful attempt to load page');
+    } else {
+        next();
+    }
+} )
+
+app.listen(PORT, () => {
+    console.log(`Server is running on port ${PORT}`);
+})
+

yarn.lock

@@ -8053,7 +8053,12 @@ lodash@4, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loglevel@^1.6.8:
+loglevel-plugin-remote@^0.6.8:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/loglevel-plugin-remote/-/loglevel-plugin-remote-0.6.8.tgz#9234b75520491dc5b1a34abbbba0101f02dd2b39"
+  integrity sha512-EMhWUOAx4/Wtge1bNzYDvvXzv6PLt07emqTjA+Sc8WfViNSYXxe6kWYFyjcqGS6mqNeOqQ3+AG0xuasynHK0XA==
+
+loglevel@^1.6.8, loglevel@^1.7.1:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
@@ -10344,6 +10349,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-error-boundary@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.1.tgz#932c5ca5cbab8ec4fe37fd7b415aa5c3a47597e7"
+  integrity sha512-W3xCd9zXnanqrTUeViceufD3mIW8Ut29BUD+S2f0eO2XCOU8b6UrJfY46RDGe5lxCJzfe4j0yvIfh0RbTZhKJw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"