diff --git a/js/components/errorHandling/errorBoundary.js b/js/components/errorHandling/errorBoundary.js
index 0e07697b4..b4b24a3c9 100644
--- 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
index 7fc0a3d04..1c10d59d1 100644
--- 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
index bf25ac02a..fb90a8785 100644
--- 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
index 873ad185f..4d0b415ed 100644
--- 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
index dfd608d81..6efed988b 100644
--- a/js/components/preview/hotspot/hotspotList.js
+++ b/js/components/preview/hotspot/hotspotList.js
@@ -1,7 +1,7 @@
 /**
  * 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';
@@ -9,10 +9,11 @@ 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
index 35358f855..c8f6d5a98 100644
--- 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
index 48a67f30d..13f8a8e17 100644
--- 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
index 8a6262f4e..f6ec3b740 100644
--- 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,9 +33,7 @@ export const withLoadingMolGroupList = WrappedComponent => {
             isStateLoaded
           })
         ).catch(error => {
-          setState(() => {
-            throw error;
-          });
+          setError(error);
         });
         setWasLoaded(true);
       }
@@ -42,7 +41,7 @@ export const withLoadingMolGroupList = WrappedComponent => {
       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
index 1ac143b53..6ac74e597 100644
--- 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}>
diff --git a/js/components/root.js b/js/components/root.js
index aafd84637..72a4c8597 100644
--- a/js/components/root.js
+++ b/js/components/root.js
@@ -18,19 +18,19 @@ setConfig({
 });
 
 const Root = memo(() => (
-  <ErrorBoundary>
-    <CssBaseline>
-      <ThemeProvider theme={getTheme()}>
-        <HeaderProvider>
+  <CssBaseline>
+    <ThemeProvider theme={getTheme()}>
+      <HeaderProvider>
+        <ErrorBoundary>
           <NglProvider>
             <BrowserRouter>
               <Routes />
             </BrowserRouter>
           </NglProvider>
-        </HeaderProvider>
-      </ThemeProvider>
-    </CssBaseline>
-  </ErrorBoundary>
+        </ErrorBoundary>
+      </HeaderProvider>
+    </ThemeProvider>
+  </CssBaseline>
 ));
 
 export default hot(module)(Root);
diff --git a/js/components/routes/Routes.js b/js/components/routes/Routes.js
index 26aa37c6b..e3a3a4fca 100644
--- a/js/components/routes/Routes.js
+++ b/js/components/routes/Routes.js
@@ -26,7 +26,9 @@ const useStyles = makeStyles(theme => ({
 const Routes = memo(() => {
   const classes = useStyles();
   const theme = useTheme();
-  const { headerHeight, setHeaderHeight, snackBarTitle, setSnackBarTitle, snackBarColor } = useContext(HeaderContext);
+  const { headerHeight, setHeaderHeight, snackBarTitle, setSnackBarTitle, snackBarColor, setError } = useContext(
+    HeaderContext
+  );
   const contentHeight = `calc(100vh - ${headerHeight}px - ${2 * theme.spacing(1)}px)`;
   const contentWidth = `100%`;
 
@@ -35,6 +37,7 @@ const Routes = memo(() => {
       return;
     }
     setSnackBarTitle(null);
+    setError(null);
   };
 
   return (
@@ -70,6 +73,7 @@ const Routes = memo(() => {
           horizontal: 'right'
         }}
         open={snackBarTitle !== null}
+        autoHideDuration={60000}
         onClose={handleCloseSnackbar}
         ContentProps={{
           'aria-describedby': 'message-id'
@@ -82,7 +86,7 @@ const Routes = memo(() => {
         }
       >
         {snackBarColor !== snackbarColors.default && (
-          <Alert severity={snackBarColor} onClose={handleCloseSnackbar}>
+          <Alert severity={snackBarColor} onClose={handleCloseSnackbar} elevation={6} variant={'filled'}>
             {snackBarTitle}
           </Alert>
         )}
diff --git a/js/components/target/withLoadingTargetIdList.js b/js/components/target/withLoadingTargetIdList.js
index cfc1bc88f..05fc72844 100644
--- a/js/components/target/withLoadingTargetIdList.js
+++ b/js/components/target/withLoadingTargetIdList.js
@@ -1,23 +1,22 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { loadTargetList } from './redux/dispatchActions';
+import { HeaderContext } from '../header/headerContext';
 
 export const withLoadingTargetList = WrappedComponent => {
   return memo(() => {
-    const [state, setState] = useState();
+    const { setError } = useContext(HeaderContext);
     const dispatch = useDispatch();
 
     useEffect(() => {
       let onCancel = () => {};
       dispatch(loadTargetList(onCancel)).catch(error => {
-        setState(() => {
-          throw error;
-        });
+        setError(error);
       });
       return () => {
         onCancel();
       };
-    }, [dispatch]);
+    }, [dispatch, setError]);
 
     return <WrappedComponent />;
   });
diff --git a/js/components/target/withUpdatingTarget.js b/js/components/target/withUpdatingTarget.js
index 4f59c6728..3a497b0d7 100644
--- a/js/components/target/withUpdatingTarget.js
+++ b/js/components/target/withUpdatingTarget.js
@@ -1,4 +1,4 @@
-import React, { memo, useContext, useEffect, useState } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { HeaderContext } from '../header/headerContext';
 import HandleUnrecognisedTarget from './handleUnrecognisedTarget';
@@ -22,7 +22,7 @@ export const withUpdatingTarget = WrappedContainer => {
       const snapshotUuid = match.params.snapshotUuid;
 
       const { isLoading, setIsLoading } = useContext(HeaderContext);
-      const [state, setState] = useState();
+      const { setError } = useContext(HeaderContext);
 
       useEffect(() => {
         resetTargetAndSelection(resetSelection);
@@ -34,11 +34,9 @@ export const withUpdatingTarget = WrappedContainer => {
 
       useEffect(() => {
         updateTarget(notCheckTarget, target, setIsLoading, targetIdList).catch(error => {
-          setState(() => {
-            throw error;
-          });
+          setError(error);
         });
-      }, [notCheckTarget, setIsLoading, target, updateTarget, targetIdList]);
+      }, [notCheckTarget, setIsLoading, target, updateTarget, targetIdList, setError]);
 
       if (isLoading === true) {
         return null;
diff --git a/js/components/userFeedback/reportForm.js b/js/components/userFeedback/reportForm.js
index 5463cd971..93c629483 100644
--- a/js/components/userFeedback/reportForm.js
+++ b/js/components/userFeedback/reportForm.js
@@ -68,7 +68,6 @@ export const FORM_TYPE = { ISSUE: 'ISSUE', IDEA: 'IDEA' };
 
 export const ReportForm = memo(({ formType }) => {
   const classes = useStyles();
-  const [state, setState] = useState();
 
   const dispatch = useDispatch();
   const formState = useSelector(state => state.issueReducers);
diff --git a/js/hoc/withLoadingEventList.js b/js/hoc/withLoadingEventList.js
index 31d7ad967..9030993ee 100644
--- a/js/hoc/withLoadingEventList.js
+++ b/js/hoc/withLoadingEventList.js
@@ -2,15 +2,16 @@
  * Created by abradley on 19/04/2018.
  */
 
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { memo, useContext, useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
 import * as apiActions from '../reducers/api/actions';
 import * as listType from '../constants/listTypes';
 import { getUrl, loadFromServer } from '../utils/genericList';
+import { HeaderContext } from '../components/header/headerContext';
 
 export const withLoadingEventList = WrappedComponent => {
   const EventList = memo(({ target_on, pandda_site_on, setObjectList }) => {
-    const [state, setState] = useState();
+    const { setError } = useContext(HeaderContext);
     const list_type = listType.PANDDA_EVENT;
     const oldUrl = useRef('');
     const setOldUrl = url => {
@@ -27,14 +28,12 @@ export const withLoadingEventList = WrappedComponent => {
         setObjectList,
         cancel: onCancel
       }).catch(error => {
-        setState(() => {
-          throw error;
-        });
+        setError(error);
       });
       return () => {
         onCancel();
       };
-    }, [list_type, setObjectList, target_on, pandda_site_on]);
+    }, [list_type, setObjectList, target_on, pandda_site_on, setError]);
 
     return <WrappedComponent />;
   });