Feat: ErrorWidget as fallback when widgets models or views fail.

packages/base-manager/src/manager-base.ts

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import * as services from '@jupyterlab/services';
+import * as widgets from '@jupyter-widgets/base';
 
 import { JSONObject, PartialJSONObject } from '@lumino/coreutils';
 
@@ -90,7 +91,7 @@ export abstract class ManagerBase implements IWidgetManager {
     const viewPromise = (model.state_change = model.state_change.then(
       async () => {
         try {
-          const ViewType = (await this.loadClass(
+          const ViewType = (await this.loadViewClass(
             model.get('_view_name'),
             model.get('_view_module'),
             model.get('_view_module_version')
@@ -295,11 +296,11 @@ export abstract class ManagerBase implements IWidgetManager {
     serialized_state: any = {}
   ): Promise<WidgetModel> {
     const model_id = options.model_id;
-    const model_promise = this.loadClass(
+    const model_promise = this.loadModelClass(
       options.model_name,
       options.model_module,
       options.model_module_version
-    ) as Promise<typeof WidgetModel>;
+    );
     let ModelType: typeof WidgetModel;
     try {
       ModelType = await model_promise;
@@ -476,6 +477,42 @@ export abstract class ManagerBase implements IWidgetManager {
     moduleVersion: string
   ): Promise<typeof WidgetModel | typeof WidgetView>;
 
+  protected async loadModelClass(
+    className: string,
+    moduleName: string,
+    moduleVersion: string
+  ): Promise<typeof WidgetModel> {
+    try {
+      const promise: Promise<typeof WidgetModel> = this.loadClass(
+        className,
+        moduleName,
+        moduleVersion
+      ) as Promise<typeof WidgetModel>;
+      await promise;
+      return promise;
+    } catch (error) {
+      return widgets.createErrorWidget(error);
+    }
+  }
+
+  protected async loadViewClass(
+    className: string,
+    moduleName: string,
+    moduleVersion: string
+  ): Promise<typeof WidgetView> {
+    try {
+      const promise: Promise<typeof WidgetView> = this.loadClass(
+        className,
+        moduleName,
+        moduleVersion
+      ) as Promise<typeof WidgetView>;
+      await promise;
+      return promise;
+    } catch (error) {
+      return widgets.createErrorWidgetView(error);
+    }
+  }
+
   /**
    * Create a comm which can be used for communication for a widget.
    *

packages/base/src/errorwidget.ts

@@ -0,0 +1,50 @@
+import {
+  WidgetModel,
+  DOMWidgetModel,
+  DOMWidgetView,
+  WidgetView
+} from './widget';
+import { JUPYTER_WIDGETS_VERSION } from './version';
+
+// create a Widget Model that captures an error object
+export function createErrorWidget(error: Error): typeof WidgetModel {
+  class ErrorWidget extends DOMWidgetModel {
+    constructor(attributes: any, options: any) {
+      attributes = {
+        ...attributes,
+        _view_name: 'ErrorWidgetView',
+        _view_module: '@jupyter-widgets/base',
+        _model_module_version: JUPYTER_WIDGETS_VERSION,
+        _view_module_version: JUPYTER_WIDGETS_VERSION,
+        failed_module: attributes._model_module,
+        failed_model_name: attributes._model_name,
+        error: error
+      };
+      super(attributes, options);
+    }
+  }
+  return ErrorWidget;
+}
+
+export function createErrorWidgetView(error?: Error): typeof WidgetView {
+  return class ErrorWidgetView extends DOMWidgetView {
+    render() {
+      const module = this.model.get('_model_module');
+      const name = this.model.get('_model_name');
+      const viewModule = this.model.get('_view_module');
+      const viewName = this.model.get('_view_name');
+      const errorMessage = String(error || this.model.get('error').stack);
+      this.el.innerHTML = `Failed to create WidgetView '${viewName}' from module '${viewModule}' for WidgetModel '${name}' from module '${module}', error:<pre>${errorMessage}</pre>`;
+    }
+  };
+}
+
+export class ErrorWidgetView extends DOMWidgetView {
+  render() {
+    console.log('render');
+    const module = this.model.get('failed_module');
+    const name = this.model.get('failed_model_name');
+    const errorMessage = String(this.model.get('error').stack);
+    this.el.innerHTML = `Failed to load widget '${name}' from module '${module}', error:<pre>${errorMessage}</pre>`;
+  }
+}

packages/base/src/index.ts

@@ -10,3 +10,4 @@ export * from './viewlist';
 export * from './version';
 export * from './utils';
 export * from './registry';
+export * from './errorwidget';

packages/jupyterlab-manager/src/plugin.ts

@@ -279,7 +279,8 @@ function activateWidgetExtension(
       LayoutModel: base.LayoutModel,
       LayoutView: base.LayoutView,
       StyleModel: base.StyleModel,
-      StyleView: base.StyleView
+      StyleView: base.StyleView,
+      ErrorWidgetView: base.ErrorWidgetView
     }
   });
 

widgetsnbextension/src/manager.js

@@ -193,22 +193,29 @@ export class WidgetManager extends ManagerBase {
   }
 
   loadClass(className, moduleName, moduleVersion) {
+    const failure = () => {
+      throw new Error(
+        'Class ' + className + ' not found in module ' + moduleName
+      );
+    };
     if (moduleName === '@jupyter-widgets/controls') {
-      return Promise.resolve(widgets[className]);
+      return widgets[className]
+        ? Promise.resolve(widgets[className])
+        : failure();
     } else if (moduleName === '@jupyter-widgets/base') {
-      return Promise.resolve(base[className]);
+      return base[className] ? Promise.resolve(base[className]) : failure();
     } else if (moduleName == '@jupyter-widgets/output') {
-      return Promise.resolve(outputWidgets[className]);
+      return outputWidgets[className]
+        ? Promise.resolve(outputWidgets[className])
+        : failure();
     } else {
       return new Promise(function(resolve, reject) {
         window.require([moduleName], resolve, reject);
       }).then(function(mod) {
         if (mod[className]) {
           return mod[className];
         } else {
-          return Promise.reject(
-            'Class ' + className + ' not found in module ' + moduleName
-          );
+          return failure();
         }
       });
     }