From 42f07feb2333addc23509e509fb13a048d27b7e7 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 24 May 2026 11:10:52 -0700
Subject: [PATCH] Added error message for failed onlyoffice connections

---
 frontend/src/components/OnlyOfficeEditor.tsx | 42 +++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/OnlyOfficeEditor.tsx b/frontend/src/components/OnlyOfficeEditor.tsx
index 36e7807..9f1605a 100644
--- a/frontend/src/components/OnlyOfficeEditor.tsx
+++ b/frontend/src/components/OnlyOfficeEditor.tsx
@@ -21,6 +21,7 @@ interface OnlyOfficeEditorProps {
 
 export default function OnlyOfficeEditor({ file, type, onClose }: OnlyOfficeEditorProps) {
   const [downloadToken, setDownloadToken] = useState<string | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   useEffect(() => {
     // We need a short-lived download token to pass to the Document Server
@@ -31,8 +32,9 @@ export default function OnlyOfficeEditor({ file, type, onClose }: OnlyOfficeEdit
 
   if (!downloadToken) {
     return (
-      <div className="flex-1 flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+      <div className="flex-1 flex flex-col items-center justify-center" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
         <div className="text-sm" style={{ color: 'var(--color-text-tertiary)' }}>Loading Editor...</div>
+        {loadError && <div className="mt-4 text-red-500 font-medium">Error: {loadError}</div>}
       </div>
     );
   }
@@ -76,17 +78,8 @@ export default function OnlyOfficeEditor({ file, type, onClose }: OnlyOfficeEdit
   };
 
   const onLoadComponentError = function (errorCode: number, errorDescription: string) {
-    switch (errorCode) {
-      case -1: // Unknown error loading component
-        console.log(errorDescription);
-        break;
-      case -2: // Error load DocsAPI from http://documentserver/
-        console.log(errorDescription);
-        break;
-      case -3: // DocsAPI is not defined
-        console.log(errorDescription);
-        break;
-    }
+    setLoadError(`${errorCode}: ${errorDescription}`);
+    console.error("OnlyOffice Load Error:", errorCode, errorDescription);
   };
 
   return (
@@ -101,13 +94,24 @@ export default function OnlyOfficeEditor({ file, type, onClose }: OnlyOfficeEdit
         </button>
       </div>
       <div className="flex-1 relative">
-        <DocumentEditor
-          id="docxEditor"
-          documentServerUrl={typeof window !== 'undefined' ? (window.location.protocol === 'https:' ? `https://${window.location.hostname}:4430/` : `http://${window.location.hostname}:8084/`) : "http://192.168.50.81:8084/"}
-          config={config as any}
-          events_onDocumentReady={onDocumentReady}
-          onLoadComponentError={onLoadComponentError}
-        />
+        {loadError ? (
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-50 text-red-600 p-8 text-center flex-col">
+            <svg className="w-12 h-12 mb-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <h3 className="font-bold text-lg mb-2">Failed to load OnlyOffice Editor</h3>
+            <p className="text-sm">{loadError}</p>
+            <p className="mt-4 text-xs text-gray-500">Check if your OnlyOffice server is running and accessible at the configured URL.</p>
+          </div>
+        ) : (
+          <DocumentEditor
+            id="docxEditor"
+            documentServerUrl={typeof window !== 'undefined' ? (window.location.protocol === 'https:' ? `https://${window.location.hostname}:4430/` : `http://${window.location.hostname}:8084/`) : "http://192.168.50.81:8084/"}
+            config={config as any}
+            events_onDocumentReady={onDocumentReady}
+            onLoadComponentError={onLoadComponentError}
+          />
+        )}
       </div>
     </div>
   );