feat: 🎸 1729 - error boundary wrapper (#1764)

* Add error boundaries * Fix PWA e2e. * feat: ErrorBoundaryDialog * replace component to use ErrorBoundaryDialog * add proptypes * fix context * remove ErrorBoundary from extensions Co-authored-by: igoroctaviano <igoroctaviano@gmail.com> Co-authored-by: James A. Petts <jamesapetts@gmail.com>
2020-06-04 06:52:30 -03:00 · 2020-06-04 06:52:30 -03:00 · c02b232b0c
commit c02b232b0c
parent f01640d009
22 changed files with 310 additions and 145 deletions
--- a/extensions/cornerstone/src/index.js
+++ b/extensions/cornerstone/src/index.js
@ -39,7 +39,9 @@ export default {
      const onNewImageHandler = jumpData => {
        commandsManager.runCommand('jumpToImage', jumpData);
      };
-      return <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />;
+      return (
+        <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
+      );
    };

    return ExtendedOHIFCornerstoneViewport;
--- a/extensions/dicom-microscopy/src/DicomMicroscopyViewport.js
+++ b/extensions/dicom-microscopy/src/DicomMicroscopyViewport.js
@ -92,8 +92,8 @@ class DicomMicroscopyViewport extends Component {
        {this.state.error ? (
          <h2>{JSON.stringify(this.state.error)}</h2>
        ) : (
-          <div style={style} ref={this.container} />
-        )}
+            <div style={style} ref={this.container} />
+          )}
      </div>
    );
  }
--- a/extensions/dicom-rt/src/components/RTPanel/RTPanel.js
+++ b/extensions/dicom-rt/src/components/RTPanel/RTPanel.js
@ -31,7 +31,18 @@ const refreshViewport = () => {
 * @param {number} props.isOpen - isOpen
 * @returns component
 */
-const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }) => {
+const RTPanel = ({
+  studies,
+  viewports,
+  activeIndex,
+  isOpen,
+  onContourItemClick,
+  activeContexts = [],
+  contexts = {}
+}) => {
+  const isVTK = () => activeContexts.includes(contexts.VTK);
+  const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
+
  const [selectedContour, setSelectedContour] = useState();
  const DEFAULT_SET_INDEX = 0;
  const DEFAULT_STATE = {
@ -119,33 +130,35 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
        onClick={() => {
          setSelectedContour(isSameContour ? null : ROINumber);

-          const enabledElements = cornerstone.getEnabledElements();
-          const element = enabledElements[activeIndex].element;
-          const toolState = cornerstoneTools.getToolState(element, 'stack');
+          if (isCornerstone()) {
+            const enabledElements = cornerstone.getEnabledElements();
+            const element = enabledElements[activeIndex].element;
+            const toolState = cornerstoneTools.getToolState(element, 'stack');

-          if (!toolState) {
-            return;
+            if (!toolState) {
+              return;
+            }
+
+            const imageIds = toolState.data[0].imageIds;
+
+            const module = cornerstoneTools.getModule('rtstruct');
+            const imageId = module.getters.imageIdOfCenterFrameOfROIContour(
+              state.selectedSet.SeriesInstanceUID,
+              ROINumber,
+              imageIds
+            );
+
+            const frameIndex = imageIds.indexOf(imageId);
+            const SOPInstanceUID = cornerstone.metaData.get('SOPInstanceUID', imageId);
+            const StudyInstanceUID = cornerstone.metaData.get('StudyInstanceUID', imageId);
+
+            onContourItemClick({
+              StudyInstanceUID,
+              SOPInstanceUID,
+              frameIndex,
+              activeViewportIndex: activeIndex
+            });
          }
-
-          const imageIds = toolState.data[0].imageIds;
-
-          const module = cornerstoneTools.getModule('rtstruct');
-          const imageId = module.getters.imageIdOfCenterFrameOfROIContour(
-            state.selectedSet.SeriesInstanceUID,
-            ROINumber,
-            imageIds
-          );
-
-          const frameIndex = imageIds.indexOf(imageId);
-          const SOPInstanceUID = cornerstone.metaData.get('SOPInstanceUID', imageId);
-          const StudyInstanceUID = cornerstone.metaData.get('StudyInstanceUID', imageId);
-
-          onContourItemClick({
-            StudyInstanceUID,
-            SOPInstanceUID,
-            frameIndex,
-            activeViewportIndex: activeIndex
-          });
        }}
        label={`${ROIName} ${interpretedType}`}
        index={ROINumber}
--- a/extensions/dicom-rt/src/index.js
+++ b/extensions/dicom-rt/src/index.js
@ -20,14 +20,21 @@ export default {
  preRegistration({ servicesManager, configuration = {} }) {
    init({ servicesManager, configuration });
  },
-  getPanelModule({ commandsManager }) {
+  getPanelModule({ commandsManager, api }) {
    const ExtendedRTPanel = props => {
+      const { activeContexts } = api.hooks.useAppContext();
+
      const contourItemClickHandler = contourData => {
        commandsManager.runCommand('jumpToImage', contourData);
      };

      return (
-        <RTPanel {...props} onContourItemClick={contourItemClickHandler} />
+        <RTPanel
+          {...props}
+          onContourItemClick={contourItemClickHandler}
+          activeContexts={activeContexts}
+          contexts={api.contexts}
+        />
      );
    };

--- a/extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js
+++ b/extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js
@ -49,8 +49,8 @@ const SegmentationPanel = ({
  onConfigurationChange,
  onDisplaySetLoadFailure,
  onSelectedSegmentationChange,
-  activeContexts,
-  contexts,
+  activeContexts = [],
+  contexts = {},
 }) => {
  const isVTK = () => activeContexts.includes(contexts.VTK);
  const isCornerstone = () => activeContexts.includes(contexts.CORNERSTONE);
--- a/extensions/dicom-segmentation/src/index.js
+++ b/extensions/dicom-segmentation/src/index.js
@ -46,7 +46,7 @@ export default {
      const onSegmentVisibilityChangeHandler = (segmentNumber, visible) => {
        commandsManager.runCommand('setSegmentConfiguration', {
          segmentNumber,
-          visible
+          visible,
        });
      };

@ -55,7 +55,7 @@ export default {
          globalOpacity: configuration.fillAlpha,
          outlineThickness: configuration.outlineWidth,
          renderOutline: configuration.renderOutline,
-          visible: configuration.renderFill
+          visible: configuration.renderFill,
        });
      };

--- a/extensions/vtk/src/index.js
+++ b/extensions/vtk/src/index.js
@ -1,3 +1,4 @@
+import React from 'react';
 import asyncComponent from './asyncComponent.js';
 import commandsModule from './commandsModule.js';
 import toolbarModule from './toolbarModule.js';
@ -16,7 +17,8 @@ const vtkExtension = {
  id: 'vtk',

  getViewportModule({ commandsManager }) {
-    return withCommandsManager(OHIFVTKViewport, commandsManager);
+    const ExtendedVTKViewport = props => <OHIFVTKViewport {...props} />;
+    return withCommandsManager(ExtendedVTKViewport, commandsManager);
  },
  getToolbarModule() {
    return toolbarModule;
--- a/platform/ui/package.json
+++ b/platform/ui/package.json
@ -53,6 +53,7 @@
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-touch-backend": "^9.4.0",
    "react-draggable": "^4.1.0",
+    "react-error-boundary": "^2.2.1",
    "react-i18next": "^10.11.0",
    "react-modal": "^3.11.1",
    "react-with-direction": "1.3.0"
--- a/platform/ui/src/components/errorBoundary/ErrorBoundary.js
+++ b/platform/ui/src/components/errorBoundary/ErrorBoundary.js
@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import './ErrorFallback.css';
+
+const ErrorFallback = ({ error, componentStack, resetErrorBoundary }) => {
+  return (
+    <div className="ErrorFallback" role="alert">
+      <p>Something went wrong.</p>
+      <pre>{error.message}</pre>
+      <pre>{componentStack}</pre>
+    </div>
+  );
+};
+
+const OHIFErrorBoundary = ({
+  context = 'OHIF',
+  onReset = () => {},
+  onError = () => {},
+  fallbackComponent,
+  children,
+}) => {
+  const onErrorHandler = (error, componentStack) => {
+    console.error(`${context} Error Boundary`, error, componentStack);
+    onError(error, componentStack);
+  };
+
+  const onResetHandler = () => {
+    onReset();
+  };
+
+  return (
+    <ErrorBoundary
+      FallbackComponent={fallbackComponent || ErrorFallback}
+      onReset={onResetHandler}
+      onError={onErrorHandler}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+OHIFErrorBoundary.propTypes = {
+  context: PropTypes.string,
+  onReset: PropTypes.func,
+  onError: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  fallbackComponent: PropTypes.element,
+};
+
+export default OHIFErrorBoundary;
--- a/platform/ui/src/components/errorBoundary/ErrorFallback.css
+++ b/platform/ui/src/components/errorBoundary/ErrorFallback.css
@ -0,0 +1,4 @@
+.ErrorFallback {
+  padding: 10px;
+  color: var(--active-color);
+}
--- a/platform/ui/src/components/errorBoundary/index.js
+++ b/platform/ui/src/components/errorBoundary/index.js
@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary';
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@ -7,7 +7,6 @@ import { AboutContent } from './content/aboutContent/AboutContent';
 import { TabComponents, TabFooter } from './tabComponents';
 import { HotkeyField } from './customForm';
 import { LanguageSwitcher } from './languageSwitcher';
-
 import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
 import { ViewportDownloadForm } from './content/viewportDownloadForm';
@ -25,8 +24,10 @@ import {
 } from './studyList';
 import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
+import { ErrorBoundary } from './errorBoundary';

 export {
+  ErrorBoundary,
  ContextMenu,
  Checkbox,
  CineDialog,
--- a/platform/ui/src/index.js
+++ b/platform/ui/src/index.js
@ -29,6 +29,7 @@ import {
  Tooltip,
  AboutContent,
  OHIFModal,
+  ErrorBoundary
 } from './components';
 import { useDebounce, useMedia } from './hooks';

@ -123,6 +124,7 @@ export {
  DialogProvider,
  withDialog,
  useDialog,
+  ErrorBoundary,
  // Hooks
  useDebounce,
  useMedia,
--- a/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js
+++ b/platform/viewer/cypress/integration/pwa/OHIFExtensionMicroscopy.spec.js
@ -1,7 +1,7 @@
 describe('OHIF Microscopy Extension', () => {
  before(() => {
    cy.openStudyModality('SM');
-    cy.expectMinimumThumbnails(6);
+    cy.expectMinimumThumbnails(2);
  });

  it('checks if series thumbnails are being displayed', () => {
--- a/platform/viewer/src/App.js
+++ b/platform/viewer/src/App.js
@ -13,6 +13,7 @@ import {
  ModalProvider,
  DialogProvider,
  OHIFModal,
+  ErrorBoundary
 } from '@ohif/ui';

 import {
@ -167,53 +168,57 @@ class App extends Component {

    if (this._userManager) {
      return (
-        <Provider store={store}>
-          <AppProvider config={this._appConfig}>
-            <I18nextProvider i18n={i18n}>
-              <OidcProvider store={store} userManager={this._userManager}>
-                <UserManagerContext.Provider value={this._userManager}>
-                  <Router basename={routerBasename}>
-                    <WhiteLabelingContext.Provider value={whiteLabeling}>
-                      <SnackbarProvider service={UINotificationService}>
-                        <DialogProvider service={UIDialogService}>
-                          <ModalProvider
-                            modal={OHIFModal}
-                            service={UIModalService}
-                          >
-                            <OHIFStandaloneViewer
-                              userManager={this._userManager}
-                            />
-                          </ModalProvider>
-                        </DialogProvider>
-                      </SnackbarProvider>
-                    </WhiteLabelingContext.Provider>
-                  </Router>
-                </UserManagerContext.Provider>
-              </OidcProvider>
-            </I18nextProvider>
-          </AppProvider>
-        </Provider>
+        <ErrorBoundary context='App'>
+          <Provider store={store}>
+            <AppProvider config={this._appConfig}>
+              <I18nextProvider i18n={i18n}>
+                <OidcProvider store={store} userManager={this._userManager}>
+                  <UserManagerContext.Provider value={this._userManager}>
+                    <Router basename={routerBasename}>
+                      <WhiteLabelingContext.Provider value={whiteLabeling}>
+                        <SnackbarProvider service={UINotificationService}>
+                          <DialogProvider service={UIDialogService}>
+                            <ModalProvider
+                              modal={OHIFModal}
+                              service={UIModalService}
+                            >
+                              <OHIFStandaloneViewer
+                                userManager={this._userManager}
+                              />
+                            </ModalProvider>
+                          </DialogProvider>
+                        </SnackbarProvider>
+                      </WhiteLabelingContext.Provider>
+                    </Router>
+                  </UserManagerContext.Provider>
+                </OidcProvider>
+              </I18nextProvider>
+            </AppProvider>
+          </Provider>
+        </ErrorBoundary>
      );
    }

    return (
-      <Provider store={store}>
-        <AppProvider config={this._appConfig}>
-          <I18nextProvider i18n={i18n}>
-            <Router basename={routerBasename}>
-              <WhiteLabelingContext.Provider value={whiteLabeling}>
-                <SnackbarProvider service={UINotificationService}>
-                  <DialogProvider service={UIDialogService}>
-                    <ModalProvider modal={OHIFModal} service={UIModalService}>
-                      <OHIFStandaloneViewer />
-                    </ModalProvider>
-                  </DialogProvider>
-                </SnackbarProvider>
-              </WhiteLabelingContext.Provider>
-            </Router>
-          </I18nextProvider>
-        </AppProvider>
-      </Provider>
+      <ErrorBoundary context='App'>
+        <Provider store={store}>
+          <AppProvider config={this._appConfig}>
+            <I18nextProvider i18n={i18n}>
+              <Router basename={routerBasename}>
+                <WhiteLabelingContext.Provider value={whiteLabeling}>
+                  <SnackbarProvider service={UINotificationService}>
+                    <DialogProvider service={UIDialogService}>
+                      <ModalProvider modal={OHIFModal} service={UIModalService}>
+                        <OHIFStandaloneViewer />
+                      </ModalProvider>
+                    </DialogProvider>
+                  </SnackbarProvider>
+                </WhiteLabelingContext.Provider>
+              </Router>
+            </I18nextProvider>
+          </AppProvider>
+        </Provider>
+      </ErrorBoundary>
    );
  }

--- a/platform/viewer/src/OHIFStandaloneViewer.js
+++ b/platform/viewer/src/OHIFStandaloneViewer.js
@ -5,7 +5,7 @@ import { Route, Switch } from 'react-router-dom';
 import { NProgress } from '@tanem/react-nprogress';
 import { CSSTransition } from 'react-transition-group';
 import { connect } from 'react-redux';
-import { ViewerbaseDragDropContext } from '@ohif/ui';
+import { ViewerbaseDragDropContext, ErrorBoundary } from '@ohif/ui';
 import { SignoutCallbackComponent } from 'redux-oidc';
 import asyncComponent from './components/AsyncComponent.js';
 import * as RoutesUtil from './routes/routesUtil';
@ -191,7 +191,9 @@ class OHIFStandaloneViewer extends Component {
                  {match === null ? (
                    <></>
                  ) : (
-                      <Component match={match} location={this.props.location} />
+                      <ErrorBoundary context={match.url}>
+                        <Component match={match} location={this.props.location} />
+                      </ErrorBoundary>
                    )}
                </CSSTransition>
              )}
--- a/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js
+++ b/platform/viewer/src/components/ErrorBoundaryDialog/ErrorBoundaryDialog.js
@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from '@ohif/ui';
+import { servicesManager } from './../../App';
+
+const { UIModalService } = servicesManager.services;
+
+const ErrorBoundaryDialog = ({ context, children }) => {
+  const handleOnError = (error, componentStack) => {
+    const ErrorDialog = () => (
+      <div className="ErrorFallback" role="alert">
+        <div>
+          <h3>
+            {context}: <span>{error.message}</span>
+          </h3>
+        </div>
+        <pre>{componentStack}</pre>
+      </div>
+    );
+
+    UIModalService.show({
+      content: ErrorDialog,
+      title: `${context}: ${error.message}`,
+    });
+  };
+
+  const fallbackComponent = () => (
+    <div className="ErrorFallback" role="alert">
+      <p>
+        Error rendering {context}. <br /> Check the browser console for more
+        details.
+      </p>
+    </div>
+  );
+
+  return (
+    <ErrorBoundary
+      fallbackComponent={fallbackComponent}
+      context={context}
+      onError={handleOnError}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+ErrorBoundaryDialog.propTypes = {
+  context: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default ErrorBoundaryDialog;
--- a/platform/viewer/src/components/ErrorBoundaryDialog/index.js
+++ b/platform/viewer/src/components/ErrorBoundaryDialog/index.js
@ -0,0 +1,3 @@
+import ErrorBoundaryDialog from './ErrorBoundaryDialog';
+
+export default ErrorBoundaryDialog;
--- a/platform/viewer/src/components/ViewportGrid/ViewportGrid.js
+++ b/platform/viewer/src/components/ViewportGrid/ViewportGrid.js
@ -12,7 +12,7 @@ import EmptyViewport from './EmptyViewport.js';

 const { loadAndCacheDerivedDisplaySets } = utils;

-const ViewportGrid = function (props) {
+const ViewportGrid = function(props) {
  const {
    activeViewportIndex,
    availablePlugins,
@ -24,7 +24,7 @@ const ViewportGrid = function (props) {
    studies,
    viewportData,
    children,
-    isStudyLoaded
+    isStudyLoaded,
  } = props;

  const rowSize = 100 / numRows;
@ -54,7 +54,7 @@ const ViewportGrid = function (props) {
        });
      });
    }
-  }, [studies, viewportData, isStudyLoaded]);
+  }, [studies, viewportData, isStudyLoaded, snackbar]);

  const getViewportPanes = () =>
    layout.viewports.map((layout, viewportIndex) => {
--- a/platform/viewer/src/components/ViewportGrid/ViewportPane.js
+++ b/platform/viewer/src/components/ViewportGrid/ViewportPane.js
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './ViewportPane.css';

-const ViewportPane = function(props) {
+const ViewportPane = function (props) {
  const { children, onDrop, viewportIndex, className: propClassName } = props;
  const [{ hovered, highlighted }, drop] = useDrop({
    accept: 'thumbnail',
--- a/platform/viewer/src/connectedComponents/Viewer.js
+++ b/platform/viewer/src/connectedComponents/Viewer.js
@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

-import { MODULE_TYPES } from '@ohif/core';
-import OHIF, { DICOMSR } from '@ohif/core';
+import OHIF, { MODULE_TYPES, DICOMSR } from '@ohif/core';
 import { withDialog } from '@ohif/ui';
 import moment from 'moment';
 import ConnectedHeader from './ConnectedHeader.js';
@ -11,6 +10,7 @@ import ToolbarRow from './ToolbarRow.js';
 import ConnectedStudyBrowser from './ConnectedStudyBrowser.js';
 import ConnectedViewerMain from './ConnectedViewerMain.js';
 import SidePanel from './../components/SidePanel.js';
+import ErrorBoundaryDialog from './../components/ErrorBoundaryDialog';
 import { extensionManager } from './../App.js';

 // Contexts
@ -26,6 +26,7 @@ class Viewer extends Component {
      PropTypes.shape({
        StudyInstanceUID: PropTypes.string.isRequired,
        StudyDate: PropTypes.string,
+        PatientID: PropTypes.string,
        displaySets: PropTypes.arrayOf(
          PropTypes.shape({
            displaySetInstanceUID: PropTypes.string.isRequired,
@ -256,42 +257,44 @@ class Viewer extends Component {
        </WhiteLabelingContext.Consumer>

        {/* TOOLBAR */}
-        <ToolbarRow
-          isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
-          isRightSidePanelOpen={this.state.isRightSidePanelOpen}
-          selectedLeftSidePanel={
-            this.state.isLeftSidePanelOpen
-              ? this.state.selectedLeftSidePanel
-              : ''
-          }
-          selectedRightSidePanel={
-            this.state.isRightSidePanelOpen
-              ? this.state.selectedRightSidePanel
-              : ''
-          }
-          handleSidePanelChange={(side, selectedPanel) => {
-            const sideClicked = side && side[0].toUpperCase() + side.slice(1);
-            const openKey = `is${sideClicked}SidePanelOpen`;
-            const selectedKey = `selected${sideClicked}SidePanel`;
-            const updatedState = Object.assign({}, this.state);
-
-            const isOpen = updatedState[openKey];
-            const prevSelectedPanel = updatedState[selectedKey];
-            // RoundedButtonGroup returns `null` if selected button is clicked
-            const isSameSelectedPanel =
-              prevSelectedPanel === selectedPanel || selectedPanel === null;
-
-            updatedState[selectedKey] = selectedPanel || prevSelectedPanel;
-
-            const isClosedOrShouldClose = !isOpen || isSameSelectedPanel;
-            if (isClosedOrShouldClose) {
-              updatedState[openKey] = !updatedState[openKey];
+        <ErrorBoundaryDialog context="ToolbarRow">
+          <ToolbarRow
+            isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
+            isRightSidePanelOpen={this.state.isRightSidePanelOpen}
+            selectedLeftSidePanel={
+              this.state.isLeftSidePanelOpen
+                ? this.state.selectedLeftSidePanel
+                : ''
            }
+            selectedRightSidePanel={
+              this.state.isRightSidePanelOpen
+                ? this.state.selectedRightSidePanel
+                : ''
+            }
+            handleSidePanelChange={(side, selectedPanel) => {
+              const sideClicked = side && side[0].toUpperCase() + side.slice(1);
+              const openKey = `is${sideClicked}SidePanelOpen`;
+              const selectedKey = `selected${sideClicked}SidePanel`;
+              const updatedState = Object.assign({}, this.state);

-            this.setState(updatedState);
-          }}
-          studies={this.props.studies}
-        />
+              const isOpen = updatedState[openKey];
+              const prevSelectedPanel = updatedState[selectedKey];
+              // RoundedButtonGroup returns `null` if selected button is clicked
+              const isSameSelectedPanel =
+                prevSelectedPanel === selectedPanel || selectedPanel === null;
+
+              updatedState[selectedKey] = selectedPanel || prevSelectedPanel;
+
+              const isClosedOrShouldClose = !isOpen || isSameSelectedPanel;
+              if (isClosedOrShouldClose) {
+                updatedState[openKey] = !updatedState[openKey];
+              }
+
+              this.setState(updatedState);
+            }}
+            studies={this.props.studies}
+          />
+        </ErrorBoundaryDialog>

        {/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
        {/*<StudyPrefetcher studies={this.props.studies} />*/}
@ -299,37 +302,46 @@ class Viewer extends Component {
        {/* VIEWPORTS + SIDEPANELS */}
        <div className="FlexboxLayout">
          {/* LEFT */}
-          <SidePanel from="left" isOpen={this.state.isLeftSidePanelOpen}>
-            {VisiblePanelLeft ? (
-              <VisiblePanelLeft
-                viewports={this.props.viewports}
-                studies={this.props.studies}
-                activeIndex={this.props.activeViewportIndex}
-              />
-            ) : (
+          <ErrorBoundaryDialog context="LeftSidePanel">
+            <SidePanel from="left" isOpen={this.state.isLeftSidePanelOpen}>
+              {VisiblePanelLeft ? (
+                <VisiblePanelLeft
+                  viewports={this.props.viewports}
+                  studies={this.props.studies}
+                  activeIndex={this.props.activeViewportIndex}
+                />
+              ) : (
                <ConnectedStudyBrowser
                  studies={this.state.thumbnails}
                  studyMetadata={this.props.studies}
                />
              )}
-          </SidePanel>
+            </SidePanel>
+          </ErrorBoundaryDialog>

          {/* MAIN */}
          <div className={classNames('main-content')}>
-            <ConnectedViewerMain studies={this.props.studies} isStudyLoaded={this.props.isStudyLoaded} />
+            <ErrorBoundaryDialog context="ViewerMain">
+              <ConnectedViewerMain
+                studies={this.props.studies}
+                isStudyLoaded={this.props.isStudyLoaded}
+              />
+            </ErrorBoundaryDialog>
          </div>

          {/* RIGHT */}
-          <SidePanel from="right" isOpen={this.state.isRightSidePanelOpen}>
-            {VisiblePanelRight && (
-              <VisiblePanelRight
-                isOpen={this.state.isRightSidePanelOpen}
-                viewports={this.props.viewports}
-                studies={this.props.studies}
-                activeIndex={this.props.activeViewportIndex}
-              />
-            )}
-          </SidePanel>
+          <ErrorBoundaryDialog context="RightSidePanel">
+            <SidePanel from="right" isOpen={this.state.isRightSidePanelOpen}>
+              {VisiblePanelRight && (
+                <VisiblePanelRight
+                  isOpen={this.state.isRightSidePanelOpen}
+                  viewports={this.props.viewports}
+                  studies={this.props.studies}
+                  activeIndex={this.props.activeViewportIndex}
+                />
+              )}
+            </SidePanel>
+          </ErrorBoundaryDialog>
        </div>
      </>
    );
@ -349,7 +361,7 @@ export default withDialog(Viewer);
 * @param {Study[]} studies
 * @param {DisplaySet[]} studies[].displaySets
 */
-const _mapStudiesToThumbnails = function (studies) {
+const _mapStudiesToThumbnails = function(studies) {
  return studies.map(study => {
    const { StudyInstanceUID } = study;

--- a/yarn.lock
+++ b/yarn.lock
@ -1247,7 +1247,7 @@
    pirates "^4.0.0"
    source-map-support "^0.5.9"

-"@babel/runtime@7.1.2", "@babel/runtime@7.5.5", "@babel/runtime@7.6.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@7.1.2", "@babel/runtime@7.5.5", "@babel/runtime@7.6.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@ -15796,6 +15796,13 @@ react-dropzone@^10.1.7:
    file-selector "^0.1.11"
    prop-types "^15.7.2"

+react-error-boundary@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-2.2.1.tgz#32ed74386a90482060cc2fea948bb7135465c4cb"
+  integrity sha512-8SZMkJRFUb0JuluHKwuUtkh5vvVWBg3O/bJIWgNMhMJv529aG//TmcphR3cSMhCWjz1vFZDb4taJd6pmwP5mEQ==
+  dependencies:
+    "@babel/runtime" "^7.9.6"
+
 react-error-overlay@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
				`@ -0,0 +1 @@`
				`export { default as ErrorBoundary } from './ErrorBoundary';`