Add Error.cause and stack to the error output

Author: nkronlage

content/JavaScript/error.jsdoc

@@ -23,6 +23,14 @@ Same as %%#new_Error_String|**new Error(message)**%%.
 Spec:
 http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.1.1
 
+----
+Error(message : String, options : Object) : Error
+
+Same as %%#new_Error_String_Object|**new Error(message, options)**%%.
+
+Spec:
+https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-error-constructor
+
 ----
 new Error(message : String) : Error
 
@@ -37,7 +45,7 @@ var divide = function(x, y) {
 };
 
 try {
-  console.log(divide(10, 0)); 
+  console.log(divide(10, 0));
 }
 catch (error) {
   console.log(error.name);
@@ -49,21 +57,42 @@ Spec:
 http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.2.1
 
 ----
-prototype.name : String
+new Error(message : String, options : { cause : Error }) : Error
 
-The type of error.
+Creates a new **Error** with the specified **message** that describes the error and
+original **cause** of the error.
 
 <example>
+var validateNumber = function(x) {
+  if (typeof x !== 'number') {
+    throw Error(x + ' is not a number');
+  }
+  return x;
+};
+
+var multiply = function(x, y) {
+  try {
+    return validateNumber(x) * validateNumber(y);
+  }
+  catch(e) {
+    throw Error('Unable to multiply', { cause: e });
+  }
+};
+
 try {
-  foo; 
+  console.log(multiply(3, 'abc'));
 }
 catch (error) {
-  console.log(error.name);
+  console.log(error);
+  console.log('Cause:', error.cause);
 }
 </example>
 
 Spec:
-http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.2
+https://tc39.es/ecma262/multipage/fundamental-objects.html#sec-error-constructor
+
+Version:
+ECMAScript 2022
 
 ----
 prototype.message : String
@@ -72,7 +101,7 @@ A human readable message that describes the error.
 
 <example>
 try {
-  foo; 
+  foo;
 }
 catch (error) {
   console.log(error.message);
@@ -82,3 +111,19 @@ catch (error) {
 Spec:
 http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.3
 
+----
+prototype.name : String
+
+The type of error.
+
+<example>
+try {
+  foo;
+}
+catch (error) {
+  console.log(error.name);
+}
+</example>
+
+Spec:
+http://www.ecma-international.org/ecma-262/5.1/#sec-15.11.4.2

static/styles.css

@@ -397,6 +397,7 @@ h1.declaration {
   padding: 0.5em;
   font-family: Menlo, consolas, monospace;
   font-size: 0.8em;
+  white-space: pre;
   box-shadow: 2px 2px 5px -1px rgba(102, 92, 48, 0.8); }
 
 .errormessage {
@@ -600,6 +601,6 @@ div.popup {
 .members-collapsed .member-body {
   display: none; }
 
-.ecmascript2019, .ecmascript2020, .ecmascript2021 {
+.ecmascript2020, .ecmascript2021, .ecmascript2022 {
   background: #FFE780;
   color: #413500; }

templates/javascripture.ejs

@@ -474,6 +474,39 @@ var escapeHTML = function(s) {
   });
 }
 
+var getErrorMessage = function(error, fromUnhandledRejection) {
+  var message = fromUnhandledRejection ? 'Promise rejected: ' : '';
+
+  if (error.stack) {
+    // Replace blob url with 'example'
+    var stack = error.stack.replace(/blob:https?:\/\/.*?\/[^:]*/g, 'example')
+
+    // FireFox/Safari style error
+    if (/@/.test(stack)) {
+      // Strip asyncFunctionResume added by Safari
+      console.log('here', JSON.stringify(stack));
+      stack = stack.replace(/\s*asyncFunctionResume.*\n.*/g, '');
+      // Indent
+      stack = stack.replace(/^/gm, '    ');
+      // Prepend name/message
+      message += error.name + ': ' + error.message + '\n' + stack;
+    }
+    else {
+      message += stack;
+    }
+  }
+  else if (error.name) {
+    message += error.name + ': ' + error.message;
+  }
+  else {
+    message += String(error);
+  }
+  if (error.cause) {
+    message += '\nCaused by: ' + getErrorMessage(error.cause);
+  }
+  return message;
+}
+
 var lastRun;
 var recordRun = function(prop) {
   if (!init && lastRun !== prop) {
@@ -576,15 +609,15 @@ var executeExample = function(example, prop) {
       }
     };
 
-    iframe.contentWindow.javascriptureReportError = function(error) {
-      errormessage.innerHTML = escapeHTML(error);
+    iframe.contentWindow.javascriptureReportError = function(error, fromUnhandledRejection) {
+      errormessage.innerHTML = getErrorMessage(error, fromUnhandledRejection);
       errormessage.style.display = 'block';
     };
 
     doc.writeln('<!DOCTYPE html>');
     doc.writeln('<script>');
-    doc.writeln('window.onerror=function(err) { javascriptureReportError(err); };');
-    doc.writeln('window.onunhandledrejection=function(evt) { javascriptureReportError("Promise rejected: " + evt.reason); evt.preventDefault(); };');
+    doc.writeln('window.onerror=function(msg, file, line, column, err) { javascriptureReportError(err || msg); };');
+    doc.writeln('window.onunhandledrejection=function(evt) { javascriptureReportError(evt.reason, true); evt.preventDefault(); };');
     doc.writeln('</script>');
 
     var scriptBody;
@@ -666,15 +699,15 @@ var executeHTMLExample = function(example, prop) {
 
     errormessage.style.display = 'none';
 
-    iframe.contentWindow.javascriptureReportError = function(error) {
-      errormessage.innerHTML = escapeHTML(error);
+    iframe.contentWindow.javascriptureReportError = function(error, fromUnhandledRejection) {
+      errormessage.innerHTML = getErrorMessage(error, fromUnhandledRejection);
       errormessage.style.display = 'block';
     };
 
     doc.writeln('<!DOCTYPE html>');
     doc.writeln('<script>');
-    doc.writeln('window.onerror=function(err) { javascriptureReportError(err); };');
-    doc.writeln('window.onunhandledrejection=function(evt) { javascriptureReportError("Promise rejected: " + evt.reason); evt.preventDefault(); };');
+    doc.writeln('window.onerror=function(msg, file, line, column, err) { javascriptureReportError(err || msg); };');
+    doc.writeln('window.onunhandledrejection=function(evt) { javascriptureReportError(evt.reason, true); evt.preventDefault(); };');
     doc.writeln('</script>');
     doc.writeln(code.value);
     doc.close();