fix(web): corrected status (error) message format and display

jscad · Apr 30, 2022 · abd02b1 · abd02b1
1 parent 1c15139
commit abd02b1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/packages/web/css/demo.css b/packages/web/css/demo.css
@@ -193,11 +193,15 @@ span#paramsControls {
   color: red;
   top: 60px;
   left: 0;
-  width: 33%;
   padding:  20px;
   z-index: 1;
 }
 
+#stacktrace ul{
+  padding: 0px 0px 0px 15px;
+  margin: 0px;
+}
+
 #container{
   position: relative;
   height: 100%;

diff --git a/packages/web/src/ui/views/status.js b/packages/web/src/ui/views/status.js
@@ -3,29 +3,36 @@ const html = require('nanohtml')
 // status display
 const status = (state, paramsCallbacktoStream) => {
   const status = state.status
-  const errorMessage = status.error !== undefined && status.error.message ? `${status.error.message}` : ''
-  const errorLine = status.error !== undefined && status.error.lineno ? `Line: ${status.error.lineno}` : ''
-  const errorStack = status.error !== undefined && status.error.stack ? `Stack: ${status.error.stack}` : ''
+  let errorWhere = ''
+  let errorMessage = ''
+  let errorStack = ''
+  if (status.error) {
+    if (status.error.fileName && !status.error.fileName.startsWith('blob')) {
+      // syntax errors provide file name, line, and column number
+      errorWhere = `${status.error.fileName}:${status.error.lineNumber}:${status.error.columnNumber}`
+    }
+    errorMessage = `${status.error.name}: ${status.error.message}`
+    if (status.error.stack) {
+      errorStack = status.error.stack.trim().split('\n').map((s) => html`<ul>${s}</ul>`)
+    }
+  }
 
   const statusMessage = status.error !== undefined
     ? html`<span>
-    <div>
-      ERROR: 
+    <div id='errormessage'>
+      <p>
+        ${errorWhere}
+      </p>
+      <p>
+        ${errorMessage}
+      </p>
     </div>
-    <div>
-      ${errorMessage}
-    </div>
-    <div>
-      ${errorLine}
-    </div>
-    <div>
+    <div id='stacktrace'>
       ${errorStack}
     </div>
   </span>`
     : ''
 
-  // ? `Error: ${status.error.message} line: ${status.error.lineno}, filename:${status.error.filename} stack:  ${status.error.stack}` : ''
-  // ${statusMessage}
   const busy = status.busy
   return html`
       <span id='status'>