chore(release): publish [skip ci]

- @ohif/extension-cornerstone@2.8.0
 - @ohif/extension-dicom-microscopy@0.51.0
 - @ohif/extension-dicom-rt@0.2.0
 - @ohif/extension-dicom-segmentation@0.3.0
 - @ohif/extension-vtk@1.6.0
 - @ohif/ui@1.5.0
 - @ohif/viewer@4.2.0

extensions/cornerstone/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.3...@ohif/extension-cornerstone@2.8.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [2.7.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-cornerstone@2.7.2...@ohif/extension-cornerstone@2.7.3) (2020-05-12)
 
 

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

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;

extensions/dicom-microscopy/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.51.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.9...@ohif/extension-dicom-microscopy@0.51.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [0.50.9](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-microscopy@0.50.8...@ohif/extension-dicom-microscopy@0.50.9) (2020-04-02)
 
 **Note:** Version bump only for package @ohif/extension-dicom-microscopy

extensions/dicom-microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.50.9",
+  "version": "0.51.0",
   "description": "OHIF extension for Dicom Microscopy",
   "author": "OHIF",
   "license": "MIT",

extensions/dicom-rt/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.4...@ohif/extension-dicom-rt@0.2.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [0.1.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-rt@0.1.3...@ohif/extension-dicom-rt@0.1.4) (2020-05-14)
 
 

extensions/dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-rt",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "OHIF extension for rendering DICOM RTSTRUCTs on top of cornerstone images.",
   "author": "OHIF",
   "license": "MIT",

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,6 +130,7 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
         onClick={() => {
           setSelectedContour(isSameContour ? null : ROINumber);
 
+          if (isCornerstone()) {
             const enabledElements = cornerstone.getEnabledElements();
             const element = enabledElements[activeIndex].element;
             const toolState = cornerstoneTools.getToolState(element, 'stack');
@@ -146,6 +158,7 @@ const RTPanel = ({ studies, viewports, activeIndex, isOpen, onContourItemClick }
               frameIndex,
               activeViewportIndex: activeIndex
             });
+          }
         }}
         label={`${ROIName} ${interpretedType}`}
         index={ROINumber}

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}
+        />
       );
     };
 

extensions/dicom-segmentation/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.6...@ohif/extension-dicom-segmentation@0.3.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [0.2.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-segmentation@0.2.5...@ohif/extension-dicom-segmentation@0.2.6) (2020-05-12)
 
 

extensions/dicom-segmentation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-segmentation",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "OHIF extension for viewing segmentations in the 2D MPR view",
   "author": "OHIF",
   "license": "MIT",

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);

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,
         });
       };
 

extensions/vtk/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.6...@ohif/extension-vtk@1.6.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [1.5.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-vtk@1.5.5...@ohif/extension-vtk@1.5.6) (2020-05-14)
 
 **Note:** Version bump only for package @ohif/extension-vtk

extensions/vtk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-vtk",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "OHIF extension for VTK.js",
   "author": "OHIF",
   "license": "MIT",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@ohif/core": "^2.9.6",
-    "@ohif/ui": "^1.4.4",
+    "@ohif/ui": "^1.5.0",
     "cornerstone-tools": "4.15.1",
     "cornerstone-wado-image-loader": "^3.1.0",
     "dicom-parser": "^1.8.3",

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;

platform/ui/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.4...@ohif/ui@1.5.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
 ## [1.4.4](https://github.com/OHIF/Viewers/compare/@ohif/ui@1.4.3...@ohif/ui@1.4.4) (2020-05-04)
 
 

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -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"

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;

platform/ui/src/components/errorBoundary/ErrorFallback.css

@@ -0,0 +1,4 @@
+.ErrorFallback {
+  padding: 10px;
+  color: var(--active-color);
+}

platform/ui/src/components/errorBoundary/index.js

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary';

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,

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,

platform/viewer/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.2.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.1.0...@ohif/viewer@4.2.0) (2020-06-04)
+
+
+### Features
+
+* 🎸 1729 - error boundary wrapper ([#1764](https://github.com/OHIF/Viewers/issues/1764)) ([c02b232](https://github.com/OHIF/Viewers/commit/c02b232b0cc24f38af5d5e3831d987d048e60ada))
+
+
+
+
+
+# [4.1.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@4.0.0...@ohif/viewer@4.1.0) (2020-05-15)
+
+
+### Features
+
+* expose some app internals as window.app ([#1735](https://github.com/OHIF/Viewers/issues/1735)) ([63fd656](https://github.com/OHIF/Viewers/commit/63fd65690cba450721870a6222e0fb3ad71bb291))
+
+
+
+
+
 # [4.0.0](https://github.com/OHIF/Viewers/compare/@ohif/viewer@3.11.11...@ohif/viewer@4.0.0) (2020-05-14)
 
 

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', () => {

platform/viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/viewer",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
   "license": "MIT",
@@ -49,17 +49,17 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@ohif/core": "^2.9.6",
-    "@ohif/extension-cornerstone": "^2.7.3",
+    "@ohif/extension-cornerstone": "^2.8.0",
     "@ohif/extension-dicom-html": "^1.2.2",
-    "@ohif/extension-dicom-microscopy": "^0.50.9",
+    "@ohif/extension-dicom-microscopy": "^0.51.0",
     "@ohif/extension-dicom-p10-downloader": "^0.1.0",
     "@ohif/extension-dicom-pdf": "^1.0.3",
-    "@ohif/extension-dicom-rt": "^0.1.4",
-    "@ohif/extension-dicom-segmentation": "^0.2.6",
+    "@ohif/extension-dicom-rt": "^0.2.0",
+    "@ohif/extension-dicom-segmentation": "^0.3.0",
     "@ohif/extension-lesion-tracker": "^0.2.0",
-    "@ohif/extension-vtk": "^1.5.6",
+    "@ohif/extension-vtk": "^1.6.0",
     "@ohif/i18n": "^0.52.8",
-    "@ohif/ui": "^1.4.4",
+    "@ohif/ui": "^1.5.0",
     "@tanem/react-nprogress": "^1.1.25",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",

platform/viewer/src/App.js

@@ -13,6 +13,7 @@ import {
   ModalProvider,
   DialogProvider,
   OHIFModal,
+  ErrorBoundary
 } from '@ohif/ui';
 
 import {
@@ -71,6 +72,14 @@ let extensionManager;
 // TODO[react] Use a provider when the whole tree is React
 window.store = store;
 
+window.ohif = window.ohif || {};
+window.ohif.app = {
+  commandsManager,
+  hotkeysManager,
+  servicesManager,
+  extensionManager,
+};
+
 class App extends Component {
   static propTypes = {
     config: PropTypes.oneOfType([
@@ -159,6 +168,7 @@ class App extends Component {
 
     if (this._userManager) {
       return (
+        <ErrorBoundary context='App'>
           <Provider store={store}>
             <AppProvider config={this._appConfig}>
               <I18nextProvider i18n={i18n}>
@@ -185,10 +195,12 @@ class App extends Component {
               </I18nextProvider>
             </AppProvider>
           </Provider>
+        </ErrorBoundary>
       );
     }
 
     return (
+      <ErrorBoundary context='App'>
         <Provider store={store}>
           <AppProvider config={this._appConfig}>
             <I18nextProvider i18n={i18n}>
@@ -206,6 +218,7 @@ class App extends Component {
             </I18nextProvider>
           </AppProvider>
         </Provider>
+      </ErrorBoundary>
     );
   }
 

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 ? (
                     <></>
                   ) : (
+                      <ErrorBoundary context={match.url}>
                         <Component match={match} location={this.props.location} />
+                      </ErrorBoundary>
                     )}
                 </CSSTransition>
               )}

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;

platform/viewer/src/components/ErrorBoundaryDialog/index.js

@@ -0,0 +1,3 @@
+import ErrorBoundaryDialog from './ErrorBoundaryDialog';
+
+export default ErrorBoundaryDialog;

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) => {

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',

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,6 +257,7 @@ class Viewer extends Component {
         </WhiteLabelingContext.Consumer>
 
         {/* TOOLBAR */}
+        <ErrorBoundaryDialog context="ToolbarRow">
           <ToolbarRow
             isLeftSidePanelOpen={this.state.isLeftSidePanelOpen}
             isRightSidePanelOpen={this.state.isRightSidePanelOpen}
@@ -292,6 +294,7 @@ class Viewer extends Component {
             }}
             studies={this.props.studies}
           />
+        </ErrorBoundaryDialog>
 
         {/*<ConnectedStudyLoadingMonitor studies={this.props.studies} />*/}
         {/*<StudyPrefetcher studies={this.props.studies} />*/}
@@ -299,6 +302,7 @@ class Viewer extends Component {
         {/* VIEWPORTS + SIDEPANELS */}
         <div className="FlexboxLayout">
           {/* LEFT */}
+          <ErrorBoundaryDialog context="LeftSidePanel">
             <SidePanel from="left" isOpen={this.state.isLeftSidePanelOpen}>
               {VisiblePanelLeft ? (
                 <VisiblePanelLeft
@@ -313,13 +317,20 @@ class Viewer extends Component {
                 />
               )}
             </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 */}
+          <ErrorBoundaryDialog context="RightSidePanel">
             <SidePanel from="right" isOpen={this.state.isRightSidePanelOpen}>
               {VisiblePanelRight && (
                 <VisiblePanelRight
@@ -330,6 +341,7 @@ class Viewer extends Component {
                 />
               )}
             </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;
 

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"