[erp5_web_renderjs_ui] Increase verbosity of the error rendering

This is nearly a copy/paste of renderJS error rendering.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js

@@ -100,30 +100,70 @@
     return route(gadget, 'jio_gadget', method, param_list);
   }
 
-  function displayErrorContent(gadget, error) {
+  function displayErrorContent(gadget, original_error) {
+    var error_list = [original_error],
+      i,
+      error,
+      error_text = "";
+
+
     // Do not break the application in case of errors.
     // Display it to the user for now,
     // and allow user to go back to the frontpage
-    var error_text = "";
-    if (error instanceof ProgressEvent) {
-      error = error.target.error;
-    }
-
-    if ((error !== undefined) && (error.target instanceof XMLHttpRequest)) {
-      error_text = error.target.toString() + " " +
-        error.target.status + " " +
-        error.target.statusText + "\n" +
-        error.target.responseURL + "\n\n" +
-        error.target.getAllResponseHeaders();
-    } else if (error instanceof Error) {
-      error_text = error.toString();
-    } else {
-      error_text = JSON.stringify(error);
+
+    // Add error handling stack
+    error_list.push(new Error('stopping ERP5JS'));
+
+    for (i = 0; i < error_list.length; i += 1) {
+      error = error_list[i];
+      if (error instanceof Event) {
+        error = {
+          string: error.toString(),
+          message: error.message,
+          type: error.type,
+          target: error.target
+        };
+        if (error.target !== undefined) {
+          error_list.splice(i + 1, 0, error.target);
+        }
+      }
+      if (error instanceof XMLHttpRequest) {
+        error = {
+          message: error.toString(),
+          readyState: error.readyState,
+          status: error.status,
+          statusText: error.statusText,
+          response: error.response,
+          responseUrl: error.responseUrl,
+          response_headers: error.getAllResponseHeaders()
+        };
+      }
+      if (error.constructor === Array ||
+          error.constructor === String ||
+          error.constructor === Object) {
+        try {
+          error = JSON.stringify(error);
+        } catch (ignore) {
+        }
+      }
+
+      error_text += error.message || error;
+      error_text += '\n';
+
+      if (error.fileName !== undefined) {
+        error_text += 'File: ' +
+          error.fileName +
+          ': ' + error.lineNumber + '\n';
+      }
+      if (error.stack !== undefined) {
+        error_text += 'Stack: ' + error.stack + '\n';
+      }
+      error_text += '---\n';
     }
 
-    console.error(error);
-    if (error instanceof Error) {
-      console.error(error.stack);
+    console.error(original_error);
+    if (original_error instanceof Error) {
+      console.error(original_error.stack);
     }
     if (gadget.props === undefined) {
       // Gadget has not yet been correctly initialized
@@ -600,14 +640,59 @@
             return;
           })
           .push(function () {
-            // XXX Improve error rendering
-            gadget.props.content_element.innerHTML =
-              "<br/><br/><br/><pre></pre>";
-            gadget.props.content_element.querySelector('pre').textContent =
-              "Error: " + gadget.state.error_text;
+            var element = gadget.props.content_element,
+              container = document.createElement("section"),
+              paragraph,
+              link;
+
+            paragraph = document.createElement("p");
+            paragraph.textContent =
+              'Please report this unhandled error to the support team, ' +
+              'and go back to the ';
+            link = document.createElement("a");
+            link.href = '#';
+            link.textContent = 'homepage';
+            paragraph.appendChild(link);
+            container.appendChild(paragraph);
+
+            container.appendChild(document.createElement("br"));
+
+            paragraph = document.createElement("p");
+            paragraph.textContent = 'Location: ';
+            link = document.createElement("a");
+            link.href = link.textContent = window.location.toString();
+            paragraph.appendChild(link);
+            container.appendChild(paragraph);
+
+            paragraph = document.createElement("p");
+            paragraph.textContent = 'User-agent: ' + navigator.userAgent;
+            container.appendChild(paragraph);
+
+            paragraph = document.createElement("p");
+            paragraph.textContent =
+              'Date: ' + new Date(Date.now()).toISOString();
+            container.appendChild(paragraph);
+
+            paragraph = document.createElement("p");
+            paragraph.textContent = 'Online: ' + navigator.onLine;
+            container.appendChild(paragraph);
+
+            container.appendChild(document.createElement("br"));
+
+            link = document.createElement("code");
+            link.textContent = gadget.state.error_text;
+            paragraph = document.createElement("pre");
+            paragraph.appendChild(link);
+            container.appendChild(paragraph);
+
+            // Remove the content
+            while (element.firstChild) {
+              element.removeChild(element.firstChild);
+            }
+            element.appendChild(container);
+
             // reset gadget state
             gadget.state = JSON.parse(default_state_json_string);
-            // XXX Notify error
           });
       }
 

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml

@@ -228,7 +228,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>971.61005.64164.54442</string> </value>
+                <value> <string>975.29285.197.41386</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -246,7 +246,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1543420133.66</float>
+                        <float>1556813529.18</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/testErrorPageFirstLoad.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testErrorPageFirstLoad</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode></unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/testErrorPageFirstLoad.zpt

+<html xmlns:tal="http://xml.zope.org/namespaces/tal"
+      xmlns:metal="http://xml.zope.org/namespaces/metal">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Test RenderJS UI</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<!-- Initialize -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/web_site_module/renderjs_runner/#/?page=foobar</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Wait for the error to be displayed</b></td>
+</tr>
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@class="ui-icon-spinner ui-btn-icon-notext first-loader"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementPresent</td>
+  <td>//div[@class="ui-icon-spinner ui-btn-icon-notext first-loader"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//div[@class="ui-icon-spinner ui-btn-icon-notext first-loader"]</td>
+  <td></td>
+</tr>
+<tr>
+  <td>assertElementNotPresent</td>
+  <td>//div[@class="ui-icon-spinner ui-btn-icon-notext first-loader"]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><p></p></td>
+</tr>
+
+
+<tr>
+  <td>assertTextPresent</td>
+  <td>"status":404</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertTextPresent</td>
+  <td>Please report this unhandled error to the support team, and go back to the homepage</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>assertTextPresent</td>
+  <td>#/?page=foobar</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td colspan="3"><b>Go back to the homepage</b></td>
+</tr>
+<tr>
+  <td>click</td>
+  <td>//div[@role='main']//a[text()='homepage' and @href='#']</td>
+  <td></td>
+</tr>
+<tr>
+  <td colspan="3"><p></p></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-url='${base_url}/web_site_module/renderjs_runner/gadget_erp5_page_worklist.html']</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file