only send error info in debug mode

also incorperates error messages into
the VDOM schema itself

Author: rmorshea

src/client/packages/idom-client-react/src/component.js

@@ -17,19 +17,21 @@ export function Layout({ saveUpdateHook, sendEvent, loadImportSource }) {
 
   React.useEffect(() => saveUpdateHook(patchModel), [patchModel]);
 
-  if (model.tagName) {
-    return html`
-      <${LayoutConfigContext.Provider} value=${{ sendEvent, loadImportSource }}>
-        <${Element} model=${model} />
-      <//>
-    `;
-  } else {
-    return html`<div />`;
-  }
+  return html`
+    <${LayoutConfigContext.Provider} value=${{ sendEvent, loadImportSource }}>
+      <${Element} model=${model} />
+    <//>
+  `;
 }
 
 export function Element({ model }) {
-  if (model.importSource) {
+  if (!model.tagName) {
+    if (model.error) {
+      return html`<pre>${model.error}</pre>`
+    } else {
+      return null
+    }
+  } else if (model.importSource) {
     return html`<${ImportedElement} model=${model} />`;
   } else {
     return html`<${StandardElement} model=${model} />`;

src/idom/core/layout.py

@@ -201,8 +201,14 @@ def _render_component(
             self._render_model(old_state, new_state, raw_model)
         except Exception as error:
             logger.exception(f"Failed to render {component}")
-            new_state.model.current = {"tagName": "__error__", "children": [str(error)]}
-
+            new_state.model.current = {
+                "tagName": "",
+                "error": (
+                    f"{type(error).__name__}: {error}"
+                    if IDOM_DEBUG_MODE.current
+                    else ""
+                ),
+            }
         try:
             parent = new_state.parent
         except AttributeError:

src/idom/core/vdom.py

@@ -45,12 +45,19 @@
             "properties": {
                 "tagName": {"type": "string"},
                 "key": {"type": "string"},
+                "error": {"type": "string"},
                 "children": {"$ref": "#/definitions/elementChildren"},
                 "attributes": {"type": "object"},
                 "eventHandlers": {"$ref": "#/definitions/elementEventHandlers"},
                 "importSource": {"$ref": "#/definitions/importSource"},
             },
+            # The 'tagName' is required because its presence is a useful indicator of
+            # whether a dictionary describes a VDOM model or not.
             "required": ["tagName"],
+            "dependentSchemas": {
+                # When 'error' is given, the 'tagName' should be empty.
+                "error": {"properties": {"tagName": {"maxLength": 0}}}
+            },
         },
         "elementChildren": {
             "type": "array",
@@ -315,9 +322,9 @@ def _is_single_child(value: Any) -> bool:
 
 
 class _VdomDictOptional(TypedDict, total=False):
-    key: str  # noqa
-    children: Sequence[Any]  # noqa
-    attributes: Dict[str, Any]  # noqa
+    key: str
+    children: Sequence[Any]
+    attributes: Dict[str, Any]
     eventHandlers: EventHandlerDict  # noqa
     importSource: ImportSourceDict  # noqa
 
@@ -338,9 +345,10 @@ class ImportSourceDict(TypedDict):
 
 
 class _OptionalVdomJson(TypedDict, total=False):
-    key: str  # noqa
-    children: List[Any]  # noqa
-    attributes: Dict[str, Any]  # noqa
+    key: str
+    error: str
+    children: List[Any]
+    attributes: Dict[str, Any]
     eventHandlers: Dict[str, _JsonEventTarget]  # noqa
     importSource: _JsonImportSource  # noqa
 

test.py

@@ -0,0 +1,9 @@
+import idom
+
+
+@idom.component
+def Test():
+    raise ValueError("test message")
+
+
+idom.run(Test, port=8000)

tests/test_core/test_layout.py

@@ -134,10 +134,7 @@ def BadChild():
                     "path": "/children",
                     "value": [
                         {"tagName": "div", "children": ["hello"]},
-                        {
-                            "tagName": "__error__",
-                            "children": ["Something went wrong :("],
-                        },
+                        {"tagName": "", "error": "ValueError: Something went wrong :("},
                         {"tagName": "div", "children": ["hello"]},
                     ],
                 },