From 1ca5d06696037899a61435ed4327fda24787206c Mon Sep 17 00:00:00 2001 From: Horus AI Date: Mon, 23 Mar 2026 22:06:57 +0100 Subject: [PATCH] fix(pdf-viewer): add debug info to troubleshoot rendering --- .../mission-control/PDFViewerClient.tsx | 134 ++++++++---------- 1 file changed, 62 insertions(+), 72 deletions(-) diff --git a/components/mission-control/PDFViewerClient.tsx b/components/mission-control/PDFViewerClient.tsx index 22f2a37..1de7568 100644 --- a/components/mission-control/PDFViewerClient.tsx +++ b/components/mission-control/PDFViewerClient.tsx @@ -17,6 +17,7 @@ export default function PDFViewerClient() { const [currentPage, setCurrentPage] = useState(1); const [scale, setScale] = useState(1.5); const [pdfjsLoaded, setPdfjsLoaded] = useState(false); + const [debugInfo, setDebugInfo] = useState(""); const canvasRef = useRef(null); const pdfDocRef = useRef(null); @@ -26,19 +27,31 @@ export default function PDFViewerClient() { script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"; script.async = true; script.onload = () => { - window.pdfjsLib = window.pdfjsLib; - setPdfjsLoaded(true); + try { + window.pdfjsLib = window.pdfjsLib; + window.pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js"; + setPdfjsLoaded(true); + setDebugInfo("PDF.js loaded successfully"); + } catch (e) { + setError("Failed to initialize PDF.js"); + setDebugInfo("Error loading PDF.js: " + e); + } }; script.onerror = () => { setError("Failed to load PDF.js library"); + setDebugInfo("Script failed to load"); }; document.body.appendChild(script); }, []); const renderPage = async (pageNum: number) => { - if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) return; + if (!pdfDocRef.current || !canvasRef.current || !window.pdfjsLib) { + setDebugInfo("Cannot render: pdfDoc=" + !!pdfDocRef.current + ", canvas=" + !!canvasRef.current + ", pdfjs=" + !!window.pdfjsLib); + return; + } try { + setDebugInfo("Rendering page " + pageNum); const page = await pdfDocRef.current.getPage(pageNum); const viewport = page.getViewport({ scale }); const canvas = canvasRef.current; @@ -51,7 +64,9 @@ export default function PDFViewerClient() { canvasContext: context, viewport: viewport, }).promise; + setDebugInfo("Page " + pageNum + " rendered successfully"); } catch (err) { + setDebugInfo("Render error: " + err); console.error("Error rendering page:", err); } }; @@ -64,7 +79,10 @@ export default function PDFViewerClient() { const handleFileUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; - if (!file || !window.pdfjsLib) return; + if (!file || !window.pdfjsLib) { + setError("Please wait for PDF.js to load or check console"); + return; + } if (file.type !== "application/pdf") { setError("Please select a PDF file"); @@ -75,16 +93,20 @@ export default function PDFViewerClient() { setError(null); setPdfName(file.name); setCurrentPage(1); + setDebugInfo("Loading file: " + file.name); try { const arrayBuffer = await file.arrayBuffer(); + setDebugInfo("File loaded, parsing PDF..."); const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise; pdfDocRef.current = pdf; setNumPages(pdf.numPages); setPdfData("local"); + setDebugInfo("PDF parsed, " + pdf.numPages + " pages"); await renderPage(1); } catch (err) { - setError("Failed to load PDF"); + setError("Failed to load PDF: " + err); + setDebugInfo("Error: " + err); console.error(err); } setLoading(false); @@ -103,6 +125,7 @@ export default function PDFViewerClient() { setPdfName(input.split("/").pop() || "document.pdf"); const response = await fetch(input); + if (!response.ok) throw new Error("Failed to fetch PDF"); const arrayBuffer = await response.arrayBuffer(); const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise; pdfDocRef.current = pdf; @@ -117,20 +140,13 @@ export default function PDFViewerClient() { }; const goToPrevPage = () => { - if (currentPage > 1) { - setCurrentPage(currentPage - 1); - } + if (currentPage > 1) setCurrentPage(currentPage - 1); }; const goToNextPage = () => { - if (currentPage < numPages) { - setCurrentPage(currentPage + 1); - } + if (currentPage < numPages) setCurrentPage(currentPage + 1); }; - const zoomIn = () => setScale(scale + 0.25); - const zoomOut = () => setScale(Math.max(0.5, scale - 0.25)); - return (
{/* Toolbar */} @@ -156,79 +172,59 @@ export default function PDFViewerClient() { {!pdfjsLoaded && ( - Loading PDF.js... + Loading PDF.js... )} {pdfData && ( <>
- - - - Page {currentPage} of {numPages} - - -
- - - - {Math.round(scale * 100)}% - - + + {Math.round(scale * 100)}% + )}
+ {/* Debug info */} + {debugInfo && ( +
+ Debug: {debugInfo} +
+ )} + + {/* Error */} + {error && ( +
+

Error

+

{error}

+ +
+ )} + {/* Content */}
- {error && ( -
-

Error

-

{error}

- -
- )} - {!pdfData && !loading && (
📄

No PDF Loaded

-

Upload a PDF or enter a URL to view it

-
-

• Upload your resume to let Horus analyze it

-

• Supports PDF files up to 50MB

-

• Or load from any public PDF URL

-
+

Upload a PDF or enter a URL

)} @@ -247,17 +243,11 @@ export default function PDFViewerClient() {
)}
- - {/* Instructions */} -
-

- 💡 Tip: Upload your resume PDF and Horus can analyze the design to recreate it -

-
); }