From 0eead1dc854e967be6c35e120a0ab67efbe63dd5 Mon Sep 17 00:00:00 2001
From: Christophe <christophe.misc+git@protonmail.ch>
Date: Tue, 16 Jul 2024 15:11:37 +0200
Subject: [PATCH 1/2] fix: make error messages scroll horizontally if too long

---
 frontend/components/ErrorBox/BasicErrorDisplay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/ErrorBox/BasicErrorDisplay.tsx b/frontend/components/ErrorBox/BasicErrorDisplay.tsx
index ee70be0..95eefdd 100644
--- a/frontend/components/ErrorBox/BasicErrorDisplay.tsx
+++ b/frontend/components/ErrorBox/BasicErrorDisplay.tsx
@@ -11,7 +11,7 @@ const BasicErrorDisplay: FC<BasicErrorDisplayProps> = ({ error }) => {
                 <>
                     <p>The server did not respond as expected:</p>
                     {error.response && (
-                        <pre className="rounded-md bg-amber-200 p-2">
+                        <pre className="max-w-[80ch] overflow-x-scroll rounded-md bg-amber-200 p-2">
                             {JSON.stringify(error.response?.data, null, 2)}
                         </pre>
                     )}

From fa6ed482e9a37259b719bc3dd4fca9a2d2a9d7f6 Mon Sep 17 00:00:00 2001
From: Christophe <christophe.misc+git@protonmail.ch>
Date: Tue, 16 Jul 2024 15:56:02 +0200
Subject: [PATCH 2/2] fix: handle axioserror response data being blob

---
 .../components/ErrorBox/BasicErrorDisplay.tsx | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/components/ErrorBox/BasicErrorDisplay.tsx b/frontend/components/ErrorBox/BasicErrorDisplay.tsx
index 95eefdd..05080bc 100644
--- a/frontend/components/ErrorBox/BasicErrorDisplay.tsx
+++ b/frontend/components/ErrorBox/BasicErrorDisplay.tsx
@@ -1,18 +1,43 @@
-import { isAxiosError } from 'axios';
-import { type FC } from 'react';
+import { type AxiosResponse, isAxiosError } from 'axios';
+import { type FC, type ReactNode, useEffect, useState } from 'react';
+import LoadingSpinner from '../LoadingSpinner';
+
+type ResponseContentsProps = {
+    response: AxiosResponse<unknown>;
+};
+const ResponseContents: FC<ResponseContentsProps> = ({ response }) => {
+    const [message, setMessage] = useState<ReactNode>();
+
+    useEffect(() => {
+        if (typeof response.data === 'string') {
+            setMessage(response.data);
+        } else if (response.data instanceof Blob) {
+            response.data
+                .text()
+                .then((text) => setMessage(text))
+                .catch((error) =>
+                    setMessage(`(Failed to process server error blob text: "${error.toString()}")`)
+                );
+        } else {
+            setMessage('(Failed to read server error message)');
+        }
+    }, [response]);
+
+    return message ?? <LoadingSpinner />;
+};
 
 type BasicErrorDisplayProps = {
     error: unknown;
 };
-const BasicErrorDisplay: FC<BasicErrorDisplayProps> = ({ error }) => {
-    return isAxiosError(error) ? (
+const BasicErrorDisplay = ({ error }: BasicErrorDisplayProps) =>
+    isAxiosError(error) ? (
         <>
             {error.code !== undefined && (
                 <>
                     <p>The server did not respond as expected:</p>
                     {error.response && (
                         <pre className="max-w-[80ch] overflow-x-scroll rounded-md bg-amber-200 p-2">
-                            {JSON.stringify(error.response?.data, null, 2)}
+                            <ResponseContents response={error.response} />
                         </pre>
                     )}
                     {!error.response && <p>No server response.</p>}
@@ -23,6 +48,5 @@ const BasicErrorDisplay: FC<BasicErrorDisplayProps> = ({ error }) => {
     ) : (
         <p>An unknown error occured.</p>
     );
-};
 
 export default BasicErrorDisplay;