feat: add onError and onRender callbacks

apis/nucleus/src/components/Cell.jsx

@@ -17,6 +17,7 @@ import InstanceContext from '../contexts/InstanceContext';
 import useObjectSelections from '../hooks/useObjectSelections';
 import eventmixin from '../selections/event-mixin';
 import useStyling from '../hooks/useStyling';
+import RenderError from '../utils/render-error';
 
 /**
  * @interface
@@ -295,7 +296,7 @@ const loadType = async ({
         },
       });
     } else {
-      dispatch({ type: 'ERROR', error: { title: err.message } });
+      dispatch({ type: 'ERROR', error: { title: err.message, errorObject: err } });
     }
     onMount();
   }
@@ -313,6 +314,7 @@ const Cell = forwardRef(
       currentId,
       emitter,
       navigation,
+      onError,
     },
     ref
   ) => {
@@ -517,6 +519,10 @@ const Cell = forwardRef(
     if (state.loading && !state.longRunningQuery) {
       Content = <LoadingSn />;
     } else if (state.error) {
+      if (onError) {
+        const e = state.error.errorObject ? state.error.errorObject : new RenderError(state.error.title);
+        onError(e);
+      }
       Content = <CError {...state.error} />;
     } else if (state.loaded) {
       Content = (

apis/nucleus/src/components/glue.jsx

@@ -13,6 +13,7 @@ export default function glue({
   emitter,
   initialError,
   navigation,
+  onError,
 }) {
   const { root } = halo;
   const cellRef = React.createRef();
@@ -29,6 +30,7 @@ export default function glue({
       onMount={onMount}
       emitter={emitter}
       navigation={navigation}
+      onError={onError}
     />,
     element,
     currentId

apis/nucleus/src/object/create-session-object.js

@@ -10,6 +10,8 @@ import init from './initiate';
  * @description Configuration for rendering a visualisation, either creating or fetching an existing object.
  * @property {HTMLElement} element Target html element to render in to
  * @property {object=} options Options passed into the visualisation
+ * @property {function=} onRender Callback function called after rendering successfully
+ * @property {function(RenderError)=} onError Callback function called if an error occurs
  * @property {Plugin[]} [plugins] plugins passed into the visualisation
  * @property {string=} id For existing objects: Engine identifier of object to render
  * @property {string=} type For creating objects: Type of visualisation to render
@@ -39,7 +41,7 @@ import init from './initiate';
  * nebbie.render(createConfig);
  */
 export default async function createSessionObject(
-  { type, version, fields, properties, options, plugins, element, extendProperties, navigation },
+  { type, version, fields, properties, options, plugins, element, extendProperties, navigation, onRender, onError },
   halo,
   store
 ) {
@@ -90,5 +92,5 @@ export default async function createSessionObject(
     await halo.app.destroySessionObject(model.id);
     unsubscribe();
   };
-  return init(model, { options, plugins, element }, halo, navigation, error, onDestroy);
+  return init(model, { options, plugins, element, onRender, onError }, halo, navigation, error, onDestroy);
 }

apis/nucleus/src/object/get-generic-object.js

@@ -2,7 +2,11 @@ import init from './initiate';
 import initSheet from './initiate-sheet';
 import createNavigationApi from './navigation/navigation';
 
-export default async function getObject({ id, options, plugins, element, navigation: inputNavigation }, halo, store) {
+export default async function getObject(
+  { id, options, plugins, element, onRender, onError, navigation: inputNavigation },
+  halo,
+  store
+) {
   const { modelStore, rpcRequestModelStore } = store;
   const key = `${id}`;
   let rpc = rpcRequestModelStore.get(key);
@@ -18,5 +22,5 @@ export default async function getObject({ id, options, plugins, element, navigat
     return initSheet(model, { options, plugins, element }, halo, navigation);
   }
 
-  return init(model, { options, plugins, element }, halo, navigation);
+  return init(model, { options, plugins, element, onRender, onError }, halo, navigation);
 }

apis/nucleus/src/object/initiate.js

@@ -2,12 +2,15 @@
 import vizualizationAPI from '../viz';
 
 export default async function init(model, optional, halo, navigation, initialError, onDestroy = async () => {}) {
+  const { onRender, onError } = optional;
   const api = vizualizationAPI({
     model,
     halo,
     navigation,
     initialError,
     onDestroy,
+    onRender,
+    onError,
   });
   if (optional.options) {
     api.__DO_NOT_USE__.options(optional.options);

apis/nucleus/src/sn/load.js

@@ -1,3 +1,5 @@
+import RenderError from '../utils/render-error';
+
 const LOADED = {};
 
 /**
@@ -32,7 +34,7 @@ export async function load(name, version, { config }, loader) {
         if (__NEBULA_DEV__) {
           console.warn(e); // eslint-disable-line no-console
         }
-        throw new Error(`Failed to load visualization: '${sKey}'`);
+        throw new RenderError(`Failed to load visualization: '${sKey}'`, e);
       });
   }
 

apis/nucleus/src/utils/render-error.js

@@ -0,0 +1,15 @@
+/**
+ * @class RenderError
+ * @extends Error
+ * @param {string} message
+ * @param {Error} originalError
+ * @property {Error} originalError
+ */
+
+export default class RenderError extends Error {
+  constructor(message, originalError) {
+    super(message);
+    this.originalError = originalError;
+    this.name = 'RenderError';
+  }
+}

apis/nucleus/src/viz.js

@@ -10,24 +10,33 @@ import saveSoftProperties from './utils/save-soft-properties';
 
 const noopi = () => {};
 
-export default function viz({ model, halo, navigation, initialError, onDestroy = async () => {} } = {}) {
+export default function viz({
+  model,
+  halo,
+  navigation,
+  initialError,
+  onDestroy = async () => {},
+  onRender = () => {},
+  onError = () => {},
+} = {}) {
   let unmountCell = noopi;
   let cellRef = null;
   let mountedReference = null;
   let onMount = null;
-  let onRender = null;
+  let onRenderResolve = null;
   let viewDataObjectId;
   const mounted = new Promise((resolve) => {
     onMount = resolve;
   });
 
   const rendered = new Promise((resolve) => {
-    onRender = resolve;
+    onRenderResolve = resolve;
   });
 
   const createOnInitialRender = (override) => () => {
-    override && override();
-    onRender();
+    override?.(); // from options.onInitialRender
+    onRenderResolve(); // internal promise in viz to wait for render
+    onRender(); // from RenderConfig
   };
 
   let initialSnOptions = {};
@@ -248,6 +257,7 @@ export default function viz({ model, halo, navigation, initialError, onDestroy =
           onMount,
           emitter,
           navigation,
+          onError,
         });
         return mounted;
       },

apis/stardust/api-spec/spec.json

@@ -1757,6 +1757,22 @@
           "optional": true,
           "type": "object"
         },
+        "onRender": {
+          "description": "Callback function called after rendering successfully",
+          "optional": true,
+          "kind": "function",
+          "params": []
+        },
+        "onError": {
+          "description": "Callback function called if an error occurs",
+          "optional": true,
+          "kind": "function",
+          "params": [
+            {
+              "type": "#/definitions/RenderError"
+            }
+          ]
+        },
         "plugins": {
           "description": "plugins passed into the visualisation",
           "optional": true,
@@ -1902,6 +1918,32 @@
         }
       }
     },
+    "RenderError": {
+      "extends": [
+        {
+          "type": "Error"
+        }
+      ],
+      "kind": "class",
+      "constructor": {
+        "kind": "function",
+        "params": [
+          {
+            "name": "message",
+            "type": "string"
+          },
+          {
+            "name": "originalError",
+            "type": "Error"
+          }
+        ]
+      },
+      "entries": {
+        "originalError": {
+          "type": "Error"
+        }
+      }
+    },
     "Navigation": {
       "stability": "experimental",
       "availability": {

apis/stardust/types/index.d.ts

@@ -564,6 +564,15 @@ declare namespace stardust {
     interface RenderConfig {
         element: HTMLElement;
         options?: object;
+        /**
+         * Callback function called after rendering successfully
+         */
+        onRender?(): void;
+        /**
+         * Callback function called if an error occurs
+         * @param $
+         */
+        onError?($: stardust.RenderError): void;
         plugins?: stardust.Plugin[];
         id?: string;
         type?: string;
@@ -602,6 +611,13 @@ declare namespace stardust {
         meta?: object;
     }
 
+    class RenderError extends Error {
+        constructor(message: string, originalError: Error);
+
+        originalError: Error;
+
+    }
+
     class Navigation implements stardust.Emitter {
         constructor();
 

test/mashup/visualize/life.html

@@ -44,6 +44,7 @@
     <div class="wrapper">
       <div class="viz"></div>
       <div class="actions"></div>
+      <div class="errors" data-tid="error-external"></div>
     </div>
   </body>
 </html>

test/mashup/visualize/life.int.js

@@ -20,6 +20,10 @@ describe('object lifecycle', () => {
       '[data-tid="error-title"]',
       "Could not find a version of 'voooz' that supports current object version. Did you forget to register voooz?"
     );
+    await waitForTextStatus(
+      '[data-tid="error-external"]',
+      "Could not find a version of 'voooz' that supports current object version. Did you forget to register voooz?"
+    );
   });
 
   it('should show spinner and requirements for known type', async () => {

test/mashup/visualize/scenarios.js

@@ -587,7 +587,15 @@ async function render() {
   const scenario = getScenario();
   const app = await EnigmaMocker.fromGenericObjects([scenario.genericObject], scenario.options);
   const element = document.querySelector('.viz');
-  const viz = await configuration(app).render({ element, id: 'bb8' });
+  const viz = await configuration(app).render({
+    element,
+    id: 'bb8',
+    onError: (e) => {
+      console.log(e);
+      const errorElement = document.querySelector('.errors');
+      errorElement.textContent = e.message;
+    },
+  });
 
   if (typeof scenario.post === 'function') {
     scenario.post(viz);