Catch errors in rendering values.

diff --git a/src/FormView.css b/src/FormView.css
index 905e61270fed9517d763ff63521f68228a9fecfa..c63a2e5e4a3c492d021499d5209f2b908684ac3d 100644 (file)
--- a/src/FormView.css
+++ b/src/FormView.css
@@ -36,3 +36,8 @@
   text-align: right;
   padding: 0 5px;
 }
+
+.error {
+  color: red;
+  font-weight: bold;
+}

diff --git a/src/FormView.tsx b/src/FormView.tsx
index 9205bb362db16874f0ed4b8acf3862aad6909377..ab0cf6f87695cb762426ddace409872356f6a232 100644 (file)
--- a/src/FormView.tsx
+++ b/src/FormView.tsx
@@ -27,11 +27,18 @@ export default function FormView(props: FormProps) {
 
 function Line(props: { tr, line }) {
   const { tr, line } = props;
+  const value = createMemo(() => {
+    try {
+      return line.value(tr);
+    } catch (e) {
+      return <span class={S.error} title={e.stack}>{e.message}</span>;
+    }
+  });
   return (
     <tr class={S.line}>
       <th class={S.id}>{line.id}</th>
       <td class={S.description}>{line.description}</td>
-      <td class={S.value}>{line.value(tr)}</td>
+      <td class={S.value}>{value()}</td>
     </tr>
   );
 }