Merge pull request #2407 from projectblacklight/modal-error-without-t…

…emplate-literal Provide a more useful error in the modal when there is a problem
projectblacklight · Jan 8, 2021 · aa38861 · aa38861
2 parents 2ffa839 + 584a2fb
commit aa38861
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/app/assets/javascripts/blacklight/blacklight.js b/app/assets/javascripts/blacklight/blacklight.js
@@ -99,6 +99,7 @@ Blacklight.onLoad(function () {
 Blacklight.onLoad(function () {
   // Button clicks should change focus. As of 10/3/19, Firefox for Mac and
   // Safari both do not set focus to a button on button click.
+  // See https://zellwk.com/blog/inconsistent-button-behavior/ for background information
   document.querySelectorAll('button.collapse-toggle').forEach(button => {
     button.addEventListener('click', () => {
       event.target.focus();
@@ -349,8 +350,9 @@ Blacklight.modal.modalCloseSelector = '[data-blacklight-modal~=close]'; // Calle
 // to show to user in modal.  Right now called only for extreme
 // network errors.
 
-Blacklight.modal.onFailure = function (data) {
-  var contents = '<div class="modal-header">' + '<div class="modal-title">Network Error</div>' + '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' + '  <span aria-hidden="true">&times;</span>' + '</button>';
+Blacklight.modal.onFailure = function (jqXHR, textStatus, errorThrown) {
+  console.error('Server error:', this.url, jqXHR.status, errorThrown);
+  var contents = '<div class="modal-header">' + '<div class="modal-title">There was a problem with your request.</div>' + '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' + '  <span aria-hidden="true">&times;</span>' + '</button></div>' + ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' + '<pre>' + this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown + '</pre></div>';
   $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
   $(Blacklight.modal.modalSelector).modal('show');
 };

diff --git a/app/javascript/blacklight/modal.js b/app/javascript/blacklight/modal.js
@@ -101,12 +101,18 @@ Blacklight.modal.modalCloseSelector   = '[data-blacklight-modal~=close]';
 // Called on fatal failure of ajax load, function returns content
 // to show to user in modal.  Right now called only for extreme
 // network errors.
-Blacklight.modal.onFailure = function(data) {
-  var contents =  '<div class="modal-header">' +
-            '<div class="modal-title">Network Error</div>' +
+Blacklight.modal.onFailure = function(jqXHR, textStatus, errorThrown) {
+  console.error('Server error:', this.url, jqXHR.status, errorThrown);
+
+  var contents = '<div class="modal-header">' +
+            '<div class="modal-title">There was a problem with your request.</div>' +
             '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' +
             '  <span aria-hidden="true">&times;</span>' +
-            '</button>';
+            '</button></div>' +
+            ' <div class="modal-body"><p>Expected a successful response from the server, but got an error</p>' +
+            '<pre>' +
+            this.type + ' ' + this.url + "\n" + jqXHR.status + ': ' + errorThrown +
+            '</pre></div>';
   $(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
   $(Blacklight.modal.modalSelector).modal('show');
 }