Get errors working on the client side as well.

packages/builder/src/components/common/bindings/EvaluationSidePanel.svelte

@@ -8,22 +8,29 @@
   export let evaluating = false
   export let expression = null
 
-  $: error = expressionResult === "Error while executing JS"
+  $: error = expressionResult && expressionResult.error != null
   $: empty = expression == null || expression?.trim() === ""
   $: success = !error && !empty
   $: highlightedResult = highlight(expressionResult)
 
-  const highlight = json => {
+  const highlight = result => {
-    if (json == null) {
+    if (result == null) {
       return ""
     }
-    // Attempt to parse and then stringify, in case this is valid JSON
+
-    try {
+    let str
-      json = JSON.stringify(JSON.parse(json), null, 2)
+    if (result.error) {
-    } catch (err) {
+      str = result.error.toString()
-      // Ignore
+    } else {
+      // Attempt to parse and then stringify, in case this is valid result
+      try {
+        str = JSON.stringify(JSON.parse(result.result), null, 2)
+      } catch (err) {
+        // Ignore
+      }
     }
-    return formatHighlight(json, {
+
+    return formatHighlight(str, {
       keyColor: "#e06c75",
       numberColor: "#e5c07b",
       stringColor: "#98c379",
@@ -34,7 +41,7 @@
   }
 
   const copy = () => {
-    let clipboardVal = expressionResult
+    let clipboardVal = expressionResult.result
     if (typeof clipboardVal === "object") {
       clipboardVal = JSON.stringify(clipboardVal, null, 2)
     }

packages/string-templates/src/index.ts

@@ -463,6 +463,22 @@ export function defaultJSSetup() {
         setTimeout: undefined,
       }
       createContext(context)
+
+      js = `
+        result = {
+          result: null,
+          error: null,
+        };
+
+        try {
+          result.result = ${js};
+        } catch (e) {
+          result.error = e.toString();
+        }
+
+        result;
+      `
+
       return runInNewContext(js, context, { timeout: 1000 })
     })
   } else {