#117 fix error handling

xchem · Mar 2, 2020 · 0b2f816 · 0b2f816
1 parent 1e3d34c
commit 0b2f816
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 101 deletions.
diff --git a/js/components/errorHandling/errorBoundary.js b/js/components/errorHandling/errorBoundary.js
@@ -10,43 +10,52 @@ import { snackbarColors } from '../header/constants';
 export class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { error: null, errorInfo: null };
+    this.state = { caughtError: null, errorInfo: null };
   }
 
-  componentDidCatch(error, errorInfo) {
-    // Catch errors in any components below and re-render with error message
-    this.setState({
-      error: error,
-      errorInfo: errorInfo
-    });
+  handleErrorData(error, errorInfo) {
     // You can also log error messages to an error reporting service here
     if (process.env.NODE_ENV === 'production') {
-      Sentry.configureScope(scope => {
-        Object.keys(errorInfo).forEach(key => {
-          scope.setExtra(key, errorInfo[key]);
+      if (errorInfo) {
+        Sentry.configureScope(scope => {
+          Object.keys(errorInfo).forEach(key => {
+            scope.setExtra(key, errorInfo[key]);
+          });
         });
-      });
+      }
       Sentry.captureException(error);
     }
   }
 
+  componentDidCatch(error, errorInfo) {
+    // Catch errors in any components below and re-render with error message
+    this.setState({
+      caughtError: error,
+      errorInfo: errorInfo
+    });
+    this.handleErrorData(error, errorInfo);
+  }
+
   render() {
     const { children } = this.props;
-    const { error } = this.state;
+    const { caughtError } = this.state;
 
     //render fallback UI
     return (
       <>
         {children}
-        {error !== null && (
-          <HeaderContext.Consumer>
-            {({ setSnackBarTitle, setSnackBarColor }) => {
+        <HeaderContext.Consumer>
+          {({ error, setSnackBarTitle, setSnackBarColor }) => {
+            if (error || caughtError !== null) {
+              if (error) {
+                this.handleErrorData(error);
+              }
               setSnackBarTitle('Something went wrong!');
-              setSnackBarColor(snackbarColors.default);
-              return null;
-            }}
-          </HeaderContext.Consumer>
-        )}
+              setSnackBarColor(snackbarColors.error);
+            }
+            return null;
+          }}
+        </HeaderContext.Consumer>
       </>
     );
   }

diff --git a/js/components/header/headerContext.js b/js/components/header/headerContext.js
@@ -10,6 +10,7 @@ export const HeaderProvider = memo(props => {
   const [headerButtons, setHeaderButtons] = useState(null);
   const [snackBarTitle, setSnackBarTitle] = useState(null);
   const [snackBarColor, setSnackBarColor] = useState(snackbarColors.default);
+  const [error, setError] = useState();
 
   return (
     <HeaderContext.Provider
@@ -25,7 +26,9 @@ export const HeaderProvider = memo(props => {
         snackBarTitle,
         setSnackBarTitle,
         snackBarColor,
-        setSnackBarColor
+        setSnackBarColor,
+        error,
+        setError
       }}
     >
       {props.children}

diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
@@ -2,7 +2,7 @@
  * Created by ricgillams on 21/06/2018.
  */
 import { Grid } from '@material-ui/core';
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect } from 'react';
 import TargetList from '../target/targetList';
 import SessionList from '../session/sessionList';
 import { connect } from 'react-redux';
@@ -11,7 +11,6 @@ import * as selectionActions from '../../reducers/selection/actions';
 import { DJANGO_CONTEXT } from '../../utils/djangoContext';
 
 const Landing = memo(({ resetSelectionState, resetTargetState }) => {
-  const [state, setState] = useState();
   let text_div;
 
   if (DJANGO_CONTEXT['authenticated'] === true) {
@@ -37,15 +36,7 @@ const Landing = memo(({ resetSelectionState, resetTargetState }) => {
     <Grid container spacing={2}>
       <Grid container item xs={12} sm={6} md={4} direction="column" justify="flex-start">
         <Grid item>
-          <h1
-            onClick={() => {
-              setState(() => {
-                throw Error('my custom error');
-              });
-            }}
-          >
-            Welcome to Fragalysis
-          </h1>
+          <h1>Welcome to Fragalysis</h1>
           {text_div}
         </Grid>
         <Grid item>

diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js
@@ -8,6 +8,7 @@ import { VIEWS } from '../../../constants/constants';
 import { NglContext } from '../../nglView/nglProvider';
 import { compoundsColors } from './redux/constants';
 import { handleClickOnCompound, loadCompoundImageData } from './redux/dispatchActions';
+import { HeaderContext } from '../../header/headerContext';
 
 export const loadingCompoundImage = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"><g>
   <circle cx="50" cy="50" fill="none" stroke="#3f51b5" stroke-width="4" r="26" stroke-dasharray="150.79644737231007 52.26548245743669" transform="rotate(238.988 50 50)">
@@ -23,19 +24,17 @@ export const CompoundView = memo(({ height, width, data, index }) => {
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW).stage;
   const [image, setImage] = useState(loadingCompoundImage);
 
-  const [state, setState] = useState();
+  const { setError } = useContext(HeaderContext);
 
   useEffect(() => {
     let onCancel = () => {};
     loadCompoundImageData({ width, height, data, onCancel, setImage }).catch(error => {
-      setState(() => {
-        throw error;
-      });
+      setError(error);
     });
     return () => {
       onCancel();
     };
-  }, [height, width, data]);
+  }, [height, width, data, setError]);
 
   const not_selected_style = {
     width: (width + 5).toString() + 'px',

diff --git a/js/components/preview/hotspot/hotspotList.js b/js/components/preview/hotspot/hotspotList.js
@@ -1,18 +1,19 @@
 /**
  * Created by ricgillams on 04/07/2018.
  */
-import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
+import React, { memo, useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { connect } from 'react-redux';
 import * as apiActions from '../../../reducers/api/actions';
 import * as listType from '../../../constants/listTypes';
 import HotspotView from './hotspotView';
 import { getUrl, loadFromServer } from '../../../utils/genericList';
 import { api, METHOD } from '../../../utils/api';
 import { Paper } from '../../common/Surfaces/Paper';
+import { HeaderContext } from '../../header/headerContext';
 
 const molStyle = { height: '250px', overflow: 'scroll' };
 const HotspotList = memo(({ molecule_list, setObjectList, target_on, mol_group_on }) => {
-  const [state, setState] = useState();
+  const { setError } = useContext(HeaderContext);
   const list_type = listType.MOLECULE;
   const oldUrl = useRef('');
   const setOldUrl = url => {
@@ -36,15 +37,13 @@ const HotspotList = memo(({ molecule_list, setObjectList, target_on, mol_group_o
           setHsCount(response.data);
         })
         .catch(error => {
-          setState(() => {
-            throw error;
-          });
+          setError(error);
         });
       return () => {
         onCancel();
       };
     }
-  }, [molecule_list]);
+  }, [molecule_list, setError]);
 
   useEffect(() => {
     updateCount();
@@ -60,14 +59,12 @@ const HotspotList = memo(({ molecule_list, setObjectList, target_on, mol_group_o
       setObjectList,
       cancel: onCancel
     }).catch(error => {
-      setState(() => {
-        throw error;
-      });
+      setError(error);
     });
     return () => {
       onCancel();
     };
-  }, [list_type, setObjectList, mol_group_on, target_on]);
+  }, [list_type, setObjectList, mol_group_on, target_on, setError]);
 
   if (hsCount > 0) {
     return (

diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -4,7 +4,7 @@
 
 import { Grid, Chip, Tooltip, makeStyles, CircularProgress, Divider, Typography } from '@material-ui/core';
 import { FilterList } from '@material-ui/icons';
-import React, { useState, useEffect, memo, useRef } from 'react';
+import React, { useState, useEffect, memo, useRef, useContext } from 'react';
 import { connect } from 'react-redux';
 import * as apiActions from '../../../reducers/api/actions';
 import * as listType from '../../../constants/listTypes';
@@ -19,6 +19,7 @@ import { Panel } from '../../common/Surfaces/Panel';
 import { ComputeSize } from '../../../utils/computeSize';
 import { moleculeProperty } from './helperConstants';
 import { setSortDialogOpen } from './redux/actions';
+import { HeaderContext } from '../../header/headerContext';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -110,7 +111,7 @@ const MoleculeList = memo(
     const classes = useStyles();
     const list_type = listType.MOLECULE;
     const oldUrl = useRef('');
-    const [state, setState] = useState();
+    const { setError } = useContext(HeaderContext);
     const setOldUrl = url => {
       oldUrl.current = url;
     };
@@ -154,11 +155,9 @@ const MoleculeList = memo(
         mol_group_on,
         cached_mol_lists
       }).catch(error => {
-        setState(() => {
-          throw error;
-        });
+        setError(error);
       });
-    }, [list_type, mol_group_on, setMoleculeList, target_on, setCachedMolLists, cached_mol_lists]);
+    }, [list_type, mol_group_on, setMoleculeList, target_on, setCachedMolLists, cached_mol_lists, setError]);
 
     const listItemOffset = (currentPage + 1) * moleculesPerPage;
     const currentMolecules = joinedMoleculeLists.slice(0, listItemOffset);

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -18,6 +18,7 @@ import { moleculeProperty } from './helperConstants';
 import { api } from '../../../utils/api';
 import { generateObjectList } from '../../session/helpers';
 import { getTotalCountOfCompounds } from './molecules_helpers';
+import { HeaderContext } from '../../header/headerContext';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -116,7 +117,7 @@ export const img_data_init = `<svg xmlns="http://www.w3.org/2000/svg" version="1
   </circle>  '</svg>`;
 
 const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
-  const [state, setState] = useState();
+  const { setError } = useContext(HeaderContext);
   const [countOfVectors, setCountOfVectors] = useState('-');
   const [cmpds, setCmpds] = useState('-');
   const selectedAll = useRef(false);
@@ -205,9 +206,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
           setCmpds(getTotalCountOfCompounds(response.data.graph));
         })
       ]).catch(error => {
-        setState(() => {
-          throw error;
-        });
+        setError(error);
       });
       refOnCancel.current = onCancel;
     }
@@ -216,7 +215,18 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
         refOnCancel.current();
       }
     };
-  }, [complexList, data.id, data.smiles, fragmentDisplayList, imageHeight, to_query, url, vectorOnList, imageWidth]);
+  }, [
+    complexList,
+    data.id,
+    data.smiles,
+    fragmentDisplayList,
+    imageHeight,
+    to_query,
+    url,
+    vectorOnList,
+    imageWidth,
+    setError
+  ]);
 
   const svg_image = (
     <SVGInline
@@ -294,9 +304,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
 
   const addNewVector = () => {
     dispatch(addVector(stage, data)).catch(error => {
-      setState(() => {
-        throw error;
-      });
+      setError(error);
     });
   };
 

diff --git a/js/components/preview/moleculeGroups/withLoadingMolGroupList.js b/js/components/preview/moleculeGroups/withLoadingMolGroupList.js
@@ -6,11 +6,12 @@ import { useDispatch } from 'react-redux';
 import { VIEWS } from '../../../constants/constants';
 import { NglContext } from '../../nglView/nglProvider';
 import { loadMoleculeGroups } from './redux/dispatchActions';
+import { HeaderContext } from '../../header/headerContext';
 
 // is responsible for loading molecules list
 export const withLoadingMolGroupList = WrappedComponent => {
   return memo(({ isStateLoaded, ...rest }) => {
-    const [state, setState] = useState();
+    const { setError } = useContext(HeaderContext);
     const [wasLoaded, setWasLoaded] = useState(false);
     const { getNglView } = useContext(NglContext);
 
@@ -32,17 +33,15 @@ export const withLoadingMolGroupList = WrappedComponent => {
             isStateLoaded
           })
         ).catch(error => {
-          setState(() => {
-            throw error;
-          });
+          setError(error);
         });
         setWasLoaded(true);
       }
 
       return () => {
         onCancel();
       };
-    }, [isStateLoaded, onCancel, dispatch, oldUrl, getNglView, wasLoaded]);
+    }, [isStateLoaded, onCancel, dispatch, oldUrl, getNglView, wasLoaded, setError]);
 
     return <WrappedComponent {...rest} />;
   });

diff --git a/js/components/preview/summary/CmpdSummaryImage.js b/js/components/preview/summary/CmpdSummaryImage.js
@@ -2,15 +2,16 @@
  * Created by abradley on 28/03/2018.
  */
 
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import SVGInline from 'react-svg-inline';
 import { Box } from '@material-ui/core';
 import { reloadSummaryCompoundImage } from './redux/dispatchAction';
+import { HeaderContext } from '../../header/headerContext';
 
 export const CmpdSummaryImage = memo(() => {
   const dispatch = useDispatch();
-  const [state, setState] = useState();
+  const { setError } = useContext(HeaderContext);
   const compoundImage = useSelector(state => state.previewReducers.summary.compoundImage);
   const width = useSelector(state => state.previewReducers.summary.width);
   const height = useSelector(state => state.previewReducers.summary.height);
@@ -19,11 +20,9 @@ export const CmpdSummaryImage = memo(() => {
 
   useEffect(() => {
     dispatch(reloadSummaryCompoundImage({ currentVector, bondColorMap })).catch(error => {
-      setState(() => {
-        throw error;
-      });
+      setError(error);
     });
-  }, [bondColorMap, currentVector, dispatch]);
+  }, [bondColorMap, currentVector, dispatch, setError]);
 
   return (
     <Box height={height} width={width}>