Merge pull request #202 from mhsdesign/feature/betterExceptionHandling3

Feature: better exception handling

Resources/Private/JavaScript/containers/styleguide/error-message/style.css

@@ -17,6 +17,7 @@
     .message {
         text-align: center;
         width: 100%;
+        white-space: pre-line;
     }
 }
 

Resources/Private/JavaScript/state/business/sagas.ts

@@ -21,6 +21,39 @@ export function* operation(task: () => SagaIterator<void>) {
     yield put(actions.finishTask(taskName));
 }
 
+const throwErrorWithMessageFromFailedHttpResponse = async (response: Response) => {
+    const message = await response.text();
+
+    if (message.includes('Flow-Debug-Exception-Header') === false
+        && message.includes('neos-error-screen') === false) {
+        throw new Error(`Network response was not ok: (${response.status})\n${response.statusText}`);
+    }
+
+    const htmlContainer = document.createElement('div');
+    htmlContainer.innerHTML = message;
+
+    // similar how the neos-ui "hacks" it
+    // https://github.com/neos/neos-ui/blob/e53f8e20ee70ca832828f033f5a69c8223a2deab/packages/neos-ui/src/index.js#L161-L191
+    const exceptionHeader = htmlContainer.querySelector('.Flow-Debug-Exception-Header');
+    if (exceptionHeader && exceptionHeader.textContent?.trim().length) {
+        const exceptionSubject = exceptionHeader.querySelector('.ExceptionSubject')!;
+        const exceptionBody = exceptionHeader.querySelector('.ExceptionBody')!;
+        throw new Error(`Network response was not ok: (${response.status})\n\n${exceptionSubject.textContent}\n${exceptionBody.textContent}`);
+    }
+
+    const neosErrorScreen = htmlContainer.querySelector('.neos-error-screen');
+    if (neosErrorScreen && neosErrorScreen.textContent?.trim().length) {
+        const neos8FusionSyntaxErrorHeading = neosErrorScreen.querySelector("h3")?.textContent
+        throw new Error(`Network response was not ok: (${response.status})\n\n${
+            neos8FusionSyntaxErrorHeading?.length
+                ? neos8FusionSyntaxErrorHeading
+                : neosErrorScreen.textContent
+        }`);
+    }
+
+    throw new Error(`Network response was not ok: (${response.status})\nUnknown error from unexpected HTML response.`);
+}
+
 export async function unauthenticated(url: string, options?: RequestInit) {
     const response = await fetch(url, { ...options, credentials: 'include' });
 
@@ -32,7 +65,7 @@ export async function unauthenticated(url: string, options?: RequestInit) {
         return 'RE-AUTHORIZE';
     }
 
-    throw new Error(`Network response was not ok: (${response.status}) ${response.statusText}`);
+    await throwErrorWithMessageFromFailedHttpResponse(response)
 }
 
 export function authenticated(url: string, options?: RequestInit) {