Added better drawing load failure handling

Failure of loading drawings will now close the drawing view and show an
error message, hinting at file or permission issues, instead of leaving
the user facing a continuosly loading interface.

Adds test to cover.

This also updates errors from our HTTP service to be wrapped in a custom
error type for better identification and so the error is an actual
javascript error. Should be object compatible.

Related to #3955.

resources/js/services/drawio.js

@@ -95,8 +95,16 @@ async function upload(imageData, pageUploadedToId) {
  * @returns {Promise<string>}
  */
 async function load(drawingId) {
-    const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
-    return `data:image/png;base64,${resp.data.content}`;
+    try {
+        const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
+        return `data:image/png;base64,${resp.data.content}`;
+    } catch (error) {
+        if (error instanceof window.$http.HttpError) {
+            window.$events.showResponseError(error);
+        }
+        close();
+        throw error;
+    }
 }
 
 export default {show, close, upload, load};

resources/js/services/events.js

@@ -43,10 +43,8 @@ function emitPublic(targetElement, eventName, eventData) {
 }
 
 /**
- * Notify of a http error.
- * Check for standard scenarios such as validation errors and
- * formats an error notification accordingly.
- * @param {Error} error
+ * Notify of standard server-provided validation errors.
+ * @param {Object} error
  */
 function showValidationErrors(error) {
     if (!error.status) return;
@@ -56,6 +54,17 @@ function showValidationErrors(error) {
     }
 }
 
+/**
+ * Notify standard server-provided error messages.
+ * @param {Object} error
+ */
+function showResponseError(error) {
+    if (!error.status) return;
+    if (error.status >= 400 && error.data && error.data.message) {
+        emit('error', error.data.message);
+    }
+}
+
 export default {
     emit,
     emitPublic,
@@ -63,4 +72,5 @@ export default {
     success: (msg) => emit('success', msg),
     error: (msg) => emit('error', msg),
     showValidationErrors,
+    showResponseError,
 }

resources/js/services/http.js

@@ -132,7 +132,7 @@ async function request(url, options = {}) {
     };
 
     if (!response.ok) {
-        throw returnData;
+        throw new HttpError(response, content);
     }
 
     return returnData;
@@ -159,10 +159,24 @@ async function getResponseContent(response) {
     return await response.text();
 }
 
+class HttpError extends Error {
+    constructor(response, content) {
+        super(response.statusText);
+        this.data = content;
+        this.headers = response.headers;
+        this.redirected = response.redirected;
+        this.status = response.status;
+        this.statusText = response.statusText;
+        this.url = response.url;
+        this.original = response;
+    }
+}
+
 export default {
     get: get,
     post: post,
     put: put,
     patch: patch,
     delete: performDelete,
+    HttpError: HttpError,
 };

resources/js/wysiwyg/plugin-drawio.js

@@ -89,7 +89,7 @@ function drawingInit() {
         return Promise.resolve('');
     }
 
-    let drawingId = currentNode.getAttribute('drawio-diagram');
+    const drawingId = currentNode.getAttribute('drawio-diagram');
     return DrawIO.load(drawingId);
 }