feat: Display deephaven.ui widget errors in a panel so user can see them

README.md

@@ -57,6 +57,7 @@ pre-commit run --all-files
 All steps should pass.
 
 To bypass the pre-commit hook, you can commit with the `--no-verify` flag, for example:
+
 ```shell
 git commit --no-verify -m "commit message"`
 ```
@@ -67,7 +68,7 @@ We use [Playwright](https://playwright.dev/) for end-to-end tests. We test again
 
 You should be able to pass arguments to these commands as if you were running Playwright via CLI directly. For example, to test only `matplotlib.spec.ts` you could run `npm run e2e:docker -- ./tests/matplotlib.spec.ts`, or to test only `matplotlib.spec.ts` in Firefox, you could run `npm run e2e:docker -- --project firefox ./tests/matplotlib.spec.ts`. See [Playwright CLI](https://playwright.dev/docs/test-cli) for more details.
 
-It is highly recommended to use `npm run e2e:docker` (instead of `npm run e2e`) as CI also uses the same environment. You can also use `npm run e2e:update-snapshots` to regenerate snapshots in said environment.
+It is highly recommended to use `npm run e2e:docker` (instead of `npm run e2e`) as CI also uses the same environment. You can also use `npm run e2e:update-snapshots` to regenerate snapshots in said environment. Run Playwright in [UI Mode](https://playwright.dev/docs/test-ui-mode) with `npm run e2e:ui` when creating new tests or debugging, as this will allow you to run each test individually, see the browser as it runs it, inspect the console, evaluate locators, etc.
 
 ### Running Python tests
 
@@ -229,6 +230,6 @@ After you have successfully run `tools/release.sh` once, you should be able to d
 
 As part of the release process, `cog` will, per our `cog.toml` configuration, invoke `tools/update_version.sh <packageName> <newVersion>`, which is a script that uses `sed` to update a plugin's version number in whatever source file we happen to use as the source of truth for version information in the given plugin.
 
-*[WARNING]* If you change where the source of truth for a plugin's version is located, you must update `tools/update_version.sh` to update the correct file with a new version number.
+_[WARNING]_ If you change where the source of truth for a plugin's version is located, you must update `tools/update_version.sh` to update the correct file with a new version number.
 
 We use `tools/update_version.sh` to remove any `.dev0` "developer version" suffix before creating a release, and to put the `.dev0` version suffix back after completing the release.

package.json

@@ -16,7 +16,9 @@
     "test:ci": "run-p test:ci:*",
     "test:ci:unit": "jest --config jest.config.unit.cjs --ci --cacheDirectory $PWD/.jest-cache",
     "test:ci:lint": "jest --config jest.config.lint.cjs --ci --cacheDirectory $PWD/.jest-cache",
-    "e2e:docker": "./tools/run_docker.sh e2e-tests",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:docker": "DEEPHAVEN_PORT=10001 ./tools/run_docker.sh e2e-tests",
     "e2e:update-snapshots": "./tools/run_docker.sh update-snapshots",
     "update-dh-packages": "lerna run --concurrency 1 update-dh-packages",
     "update-dh-packages:ui": "npm run update-dh-packages -- --scope=@deephaven/js-plugin-ui --"

plugins/ui/src/deephaven/ui/object_types/ElementMessageStream.py

@@ -5,6 +5,7 @@
 from jsonrpc import JSONRPCResponseManager, Dispatcher
 import logging
 import threading
+import traceback
 from enum import Enum
 from queue import Queue
 from typing import Any, Callable
@@ -17,6 +18,7 @@
 from ..elements import Element
 from ..renderer import NodeEncoder, Renderer, RenderedNode
 from .._internal import RenderContext, StateUpdateCallable, ExportedRenderState
+from .ErrorCode import ErrorCode
 
 logger = logging.getLogger(__name__)
 
@@ -158,8 +160,13 @@ def _render(self) -> None:
             state = self._context.export_state()
             self._send_document_update(node, state)
         except Exception as e:
-            logger.exception("Error rendering %s", self._element.name)
-            raise e
+            # Send the error to the client for displaying to the user
+            # If there's an error sending it to the client, then it will be caught by the render exception handler
+            # and logged as an error message.
+            # Just log it as debug here so we don't show it in the console and in the error panel.
+            stack_trace = traceback.format_exc()
+            logging.debug("Error rendering document: %s %s", repr(e), stack_trace)
+            self._send_document_error(e, stack_trace)
 
     def _process_callable_queue(self) -> None:
         """
@@ -191,7 +198,11 @@ def _process_callable_queue(self) -> None:
                     else:
                         self._render_state = _RenderState.IDLE
         except Exception as e:
+            # Something catastrophic happened, log it and close the connection
+            # We're just being safe to make sure there is an error logged if something unexpected does occur,
+            # as `submit_task` does not log any uncaught exceptions currently: https://github.com/deephaven/deephaven-core/issues/5192
             logger.exception(e)
+            self._connection.on_close()
 
     def _mark_dirty(self) -> None:
         """
@@ -353,3 +364,25 @@ def _send_document_update(
             dispatcher[callable_id] = wrap_callable(callable)
         self._dispatcher = dispatcher
         self._connection.on_data(payload.encode(), new_objects)
+
+    def _send_document_error(self, error: Exception, stack_trace: str) -> None:
+        """
+        Send an error to the client. This is called when an error occurs during rendering.
+
+        Args:
+            error: The error that occurred
+            stack_trace: The stack trace of the error
+        """
+        request = self._make_notification(
+            "documentError",
+            json.dumps(
+                {
+                    "message": str(error),
+                    "type": type(error).__name__,
+                    "stack": stack_trace,
+                    "code": ErrorCode.DOCUMENT_ERROR.value,
+                }
+            ),
+        )
+        payload = json.dumps(request)
+        self._connection.on_data(payload.encode(), [])

plugins/ui/src/deephaven/ui/object_types/ErrorCode.py

@@ -0,0 +1,18 @@
+from enum import Enum
+
+
+class ErrorCode(int, Enum):
+    """
+    ErrorCode is a list of error codes that can be returned by the server.
+    """
+
+    # General errors
+    UNKNOWN = 0
+    """
+    An unknown error occurred on the server.
+    """
+
+    DOCUMENT_ERROR = 1
+    """
+    There was an error when rendering the document.
+    """

plugins/ui/src/js/package.json

@@ -41,7 +41,7 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "3.33.1",
+    "@adobe/react-spectrum": "^3.34.1",
     "@deephaven/chart": "^0.76.0",
     "@deephaven/components": "^0.76.0",
     "@deephaven/dashboard": "^0.76.0",
@@ -51,14 +51,15 @@
     "@deephaven/iris-grid": "^0.76.0",
     "@deephaven/jsapi-bootstrap": "^0.76.0",
     "@deephaven/jsapi-components": "^0.76.0",
-    "@deephaven/jsapi-types": "^1.0.0-dev0.34.0",
+    "@deephaven/jsapi-types": "^1.0.0-dev0.33.3",
     "@deephaven/log": "^0.76.0",
     "@deephaven/plugin": "^0.76.0",
     "@deephaven/react-hooks": "^0.76.0",
     "@deephaven/redux": "^0.76.0",
     "@deephaven/utils": "^0.76.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-types/shared": "^3.22.0",
+    "classnames": "^2.5.1",
     "json-rpc-2.0": "^1.6.0",
     "react-redux": "^7.x",
     "shortid": "^2.2.16"

plugins/ui/src/js/src/DashboardPlugin.tsx

@@ -94,7 +94,7 @@ export function DashboardPlugin(
       widgetId: string;
       widget: WidgetDescriptor;
     }) => {
-      log.info('Opening widget with ID', widgetId, widget);
+      log.debug('Opening widget with ID', widgetId, widget);
       setWidgetMap(prevWidgetMap => {
         const newWidgetMap = new Map(prevWidgetMap);
         const oldWidget = newWidgetMap.get(widgetId);

plugins/ui/src/js/src/layout/ReactPanel.tsx

@@ -15,6 +15,7 @@ import { ReactPanelProps } from './LayoutUtils';
 import { useParentItem } from './ParentItemContext';
 import { ReactPanelContext } from './ReactPanelContext';
 import { usePortalPanelManager } from './PortalPanelManagerContext';
+import ReactPanelContentOverlay from './ReactPanelContentOverlay';
 
 const log = Log.module('@deephaven/js-plugin-ui/ReactPanel');
 
@@ -201,6 +202,7 @@ function ReactPanel({
               {children}
             </Flex>
           </View>
+          <ReactPanelContentOverlay />
         </ReactPanelContext.Provider>,
         portal,
         contentKey

plugins/ui/src/js/src/layout/ReactPanelContentOverlay.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { usePanelContentOverlay } from './usePanelContentOverlay';
+
+/** A panel that uses the ReactPanelContentOverlayContext and if that content is set, renders it in a view with a partially transparent background */
+export function ReactPanelContentOverlay(): JSX.Element | null {
+  const overlayContent = usePanelContentOverlay();
+  return overlayContent != null ? (
+    <div className="dh-react-panel-overlay">{overlayContent}</div>
+  ) : null;
+}
+
+export default ReactPanelContentOverlay;

plugins/ui/src/js/src/layout/ReactPanelContentOverlayContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+/** Context that defined a ReactNode to overlay on top of the content in a ReactPanel */
+export const ReactPanelContentOverlayContext =
+  createContext<React.ReactNode | null>(null);
+
+export default ReactPanelContentOverlayContext;

plugins/ui/src/js/src/layout/usePanelContentOverlay.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ReactPanelContentOverlayContext } from './ReactPanelContentOverlayContext';
+
+/**
+ * Gets the overlay content from the nearest panel context.
+ * @returns The overlay content or null if not in a panel
+ */
+export function usePanelContentOverlay(): React.ReactNode | null {
+  return useContext(ReactPanelContentOverlayContext);
+}
+
+export default usePanelContentOverlay;

plugins/ui/src/js/src/styles.scss

@@ -30,3 +30,53 @@
     }
   }
 }
+
+.ui-widget-error-view {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer-1;
+  flex-grow: 1;
+  max-height: 100%;
+
+  .widget-error-view-content {
+    position: relative;
+    flex-shrink: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .widget-error-view-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: $spacer-1;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+
+  .error-view {
+    flex-grow: 1;
+  }
+}
+
+.dh-react-panel-overlay {
+  background-color: bg-opacity(80);
+  backdrop-filter: blur(5px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: $spacer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+
+  .ui-widget-error-view {
+    max-width: 100%;
+  }
+}

plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx

@@ -11,7 +11,7 @@ import WidgetHandler from './WidgetHandler';
 const log = Log.module('@deephaven/js-plugin-ui/DashboardWidgetHandler');
 
 export interface DashboardWidgetHandlerProps {
-  /** ID of this widget */
+  /** ID of this widget instance */
   id: WidgetId;
 
   /** Widget for this to handle */

plugins/ui/src/js/src/widget/WidgetErrorView.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, ErrorView } from '@deephaven/components';
+import { vsRefresh } from '@deephaven/icons';
+import { WidgetError } from './WidgetTypes';
+
+/** Component that takes a WidgetError and displays the contents in an ErrorView, and has a button to reload the widget from a fresh state. */
+function WidgetErrorView({
+  error,
+  onReload: onReset,
+}: {
+  error: WidgetError;
+  onReload: () => void;
+}): JSX.Element {
+  const displayMessage = `${error.message.trim()}\n\n${
+    error.stack ?? ''
+  }`.trim();
+  return (
+    <div className="ui-widget-error-view">
+      <div className="widget-error-view-content">
+        <ErrorView message={displayMessage} type={error.type} isExpanded />
+      </div>
+      <div className="widget-error-view-footer">
+        <Button kind="tertiary" icon={vsRefresh} onClick={onReset}>
+          Reload
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default WidgetErrorView;