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>

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;