Add global error boundary

bodastage · Jun 15, 2019 · 809ecb4 · 809ecb4
1 parent 3b6b542
commit 809ecb4
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>BTS-CE-Lite</title>
+    <title>Boda-Lite</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -3,18 +3,40 @@ import configureStore from './configure-store';
 import LoginForm from './modules/session/LoginForm';
 import UILayout from './modules/layout/UILayout';
 import { connect } from 'react-redux';
+import ErrorBoundary from './modules/layout/ErrorBoundary';
+
+const log = window.require('electron-log');
 
 class App extends React.Component {
   constructor(props){
-      super(props)
+      super(props);
+	  this.state = { error: null, errorInfo: null };
+  }
+
+  componentDidCatch(error, errorInfo) {
+	log.info(error.toString());
+
+	this.setState({
+	  error: error,
+	  errorInfo: errorInfo
+	});
   }
 
   render() {
+
         if (this.props.authenticated === false) {
-            return (<LoginForm/>);
+            return (
+				<ErrorBoundary>
+					<LoginForm/>
+				</ErrorBoundary>
+				);
         }
 
-        return (<UILayout/>);
+        return (
+			<ErrorBoundary>
+				<UILayout/>
+			</ErrorBoundary>
+		);
   }
 }
 

diff --git a/src/index.js b/src/index.js
@@ -28,7 +28,7 @@ import { faLock, faAt, faSpinner, faHome, faPlug, faCog, faDownload,
 	faChartArea, faBrain, faGem, faUserMd, faGlobeAfrica, faPeopleCarry,
 	faFolder, faFile, faStar, faChevronRight, faDotCircle, faFolderOpen,
 	faLink, faClock, faRss, faChartLine, faSquare, faTable, faInfoCircle
-	,faAsterisk, faFileAlt
+	,faAsterisk, faFileAlt,faFrown
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faLock, faAt, faSpinner, faHome, faPlug, faCog, faDownload,
@@ -37,7 +37,7 @@ faStopCircle, faUniversity, faCogs, faPowerOff, faArrowRight, faList,
 faChartArea, faBrain, faGem, faUserMd, faGlobeAfrica, faPeopleCarry,
 faFolder, faFile, faStar, faChevronRight, faDotCircle, faFolderOpen, 
 faLink, faClock, faRss, faChartLine, faSquare, faTable, faInfoCircle,
-faAsterisk, faFileAlt);
+faAsterisk, faFileAlt,faFrown);
 
 const store = configureStore();
 

diff --git a/src/modules/cm/ProcessCMDumps.jsx b/src/modules/cm/ProcessCMDumps.jsx
@@ -15,6 +15,8 @@ const replace = window.require('replace-in-file');
 const fs = window.require('fs');
 const log = window.require('electron-log');
 
+
+
 class ProcessCMDumps extends React.Component {
 
      static icon = "asterisk";

diff --git a/src/modules/help/Help.jsx b/src/modules/help/Help.jsx
@@ -5,7 +5,10 @@ export default class Help extends React.Component {
 
      static icon = "question-circle";
      static label = "Help"
-
+
+	componentDidMount(){
+	}
+
     render(){
         return (
             <div>
@@ -16,7 +19,7 @@ export default class Help extends React.Component {
                   <div className="card-body">
                     <h4 className="card-title">About</h4>
                     <p className="card-text"> 
-                        <b>Boda Telecom Suite - CE Lite</b> (BTS-CE-Lite) is an open source telecommunication network management desktop application.
+                        <b>Boda Lite</b> is an open source telecommunication network management desktop application.
                     </p>
 
                     <h4 className="card-title">Resources </h4>

diff --git a/src/modules/layout/ErrorBoundary.jsx b/src/modules/layout/ErrorBoundary.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { connect } from 'react-redux';
+import { Intent, Button, Classes } from "@blueprintjs/core";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const log = window.require('electron-log');
+
+export default  class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+	componentDidCatch(error, info) {
+		log.info(error.toString());
+	}
+
+	resetState = () => { 
+
+		//@TODO: Clear states via redux action
+		window.localStorage.clear();
+		window.location.reload();
+	}
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (<div>
+			    <div style={{"text-align":"center"}} className="p-2">
+					<FontAwesomeIcon icon="frown" size="6x" className={Classes.INTENT_WARNING}/>
+				</div>
+
+				<div style={{"text-align":"center"}} className="p-2">
+				This is embarrasing! We appear to have run into an error.  
+						Please share the log file and a description of what you were doing  when it occured with the boda-lite team to help.
+				</div>
+
+				<div style={{"text-align":"center"}} className="p-2">
+					<Button 
+					large={true} 
+					text="Reset App" 
+					rightIcon="refresh" intent={Intent.WARNING} 
+					onClick={this.resetState.bind(this)}>
+					</Button>
+				</div>
+			</div>);
+    }
+
+    return this.props.children; 
+  }
+}