From 87a490c83e879d501d5d33c2f1bc9bb68da3539f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Sevilla=20Mart=C3=ADn?=
 <6401250+datitisev@users.noreply.github.com>
Date: Tue, 12 May 2020 12:23:13 -0400
Subject: [PATCH] Some improvements to request error handling and modal error
 formatting (#1929)

* Use decodeURI instead of unescape & don't close modals

* Add comment

* Don't use a try/catch, clean up the group log code

* Remove double negative

* Format; fix issues from rebasing
---
 framework/core/js/src/common/Application.js   | 21 ++++++++++++++++---
 .../common/components/RequestErrorModal.js    | 20 +++++++++++++-----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/framework/core/js/src/common/Application.js b/framework/core/js/src/common/Application.js
index b9ec8fa06..871f5797b 100644
--- a/framework/core/js/src/common/Application.js
+++ b/framework/core/js/src/common/Application.js
@@ -324,12 +324,15 @@ export default class Application {
         }
 
         const isDebug = app.forum.attribute('debug');
+        // contains a formatted errors if possible, response must be an JSON API array of errors
+        // the details property is decoded to transform escaped characters such as '\n'
+        const formattedError = error.response && Array.isArray(error.response.errors) && error.response.errors.map((e) => decodeURI(e.detail));
 
         error.alert = new Alert({
           type: 'error',
           children,
           controls: isDebug && [
-            <Button className="Button Button--link" onclick={this.showDebug.bind(this, error)}>
+            <Button className="Button Button--link" onclick={this.showDebug.bind(this, error, formattedError)}>
               Debug
             </Button>,
           ],
@@ -338,6 +341,17 @@ export default class Application {
         try {
           options.errorHandler(error);
         } catch (error) {
+          if (isDebug && error.xhr) {
+            const { method, url } = error.options;
+            const { status = '' } = error.xhr;
+
+            console.group(`${method} ${url} ${status}`);
+
+            console.error(...(formattedError || [error]));
+
+            console.groupEnd();
+          }
+
           this.alerts.show(error.alert);
         }
 
@@ -350,12 +364,13 @@ export default class Application {
 
   /**
    * @param {RequestError} error
+   * @param {string[]} [formattedError]
    * @private
    */
-  showDebug(error) {
+  showDebug(error, formattedError) {
     this.alerts.dismiss(this.requestError.alert);
 
-    this.modal.show(new RequestErrorModal({ error }));
+    this.modal.show(new RequestErrorModal({ error, formattedError }));
   }
 
   /**
diff --git a/framework/core/js/src/common/components/RequestErrorModal.js b/framework/core/js/src/common/components/RequestErrorModal.js
index 2a0aaa2a7..af460e91e 100644
--- a/framework/core/js/src/common/components/RequestErrorModal.js
+++ b/framework/core/js/src/common/components/RequestErrorModal.js
@@ -6,16 +6,26 @@ export default class RequestErrorModal extends Modal {
   }
 
   title() {
-    return this.props.error.xhr ? this.props.error.xhr.status + ' ' + this.props.error.xhr.statusText : '';
+    return this.props.error.xhr ? `${this.props.error.xhr.status} ${this.props.error.xhr.statusText}` : '';
   }
 
   content() {
+    const { error, formattedError } = this.props;
+
     let responseText;
 
-    try {
-      responseText = JSON.stringify(JSON.parse(this.props.error.responseText), null, 2);
-    } catch (e) {
-      responseText = this.props.error.responseText;
+    // If the error is already formatted, just add line endings;
+    // else try to parse it as JSON and stringify it with indentation
+    if (formattedError) {
+      responseText = formattedError.join('\n\n');
+    } else {
+      try {
+        const json = error.response || JSON.parse(error.responseText);
+
+        responseText = JSON.stringify(json, null, 2);
+      } catch (e) {
+        responseText = error.responseText;
+      }
     }
 
     return (