From e34067fe9c786b57b65bd3f61b4e528aa8255fa9 Mon Sep 17 00:00:00 2001
From: Woody <woody.ck.tse@gmail.com>
Date: Sat, 25 Apr 2026 17:39:54 +0800
Subject: [PATCH] fix(frontend): URL-encode file paths in PDF viewer + add page
 error handling

- Encode filePath with encodeURIComponent to handle spaces/special chars
- Add page-level error handling in PdfViewerPage for better diagnostics
- Show PDF URL in error message to aid debugging
---
 frontend/src/lib/api.ts              |  2 +-
 frontend/src/pages/PdfViewerPage.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index a3c69b7..02c1d8a 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -41,7 +41,7 @@ export const deleteChunk = async (chunkId: string): Promise<DeleteResponse> => {
 
 export const getChunkPdfUrl = (filePath: string): string => {
   const baseUrl: string = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8000/api/v1'
-  return `${baseUrl}/chunks/${filePath}/pdf`
+  return `${baseUrl}/chunks/${encodeURIComponent(filePath)}/pdf`
 }
 
 export const getPdfViewerUrl = (filePath: string, page?: number, title?: string): string => {
diff --git a/frontend/src/pages/PdfViewerPage.tsx b/frontend/src/pages/PdfViewerPage.tsx
index 68d7e16..6b9b6ea 100644
--- a/frontend/src/pages/PdfViewerPage.tsx
+++ b/frontend/src/pages/PdfViewerPage.tsx
@@ -20,16 +20,22 @@ export const PdfViewerPage: React.FC = () => {
   const [pageNumber, setPageNumber] = useState<number>(initialPage)
   const [zoomIndex, setZoomIndex] = useState<number>(DEFAULT_ZOOM_INDEX)
   const [loadError, setLoadError] = useState<string | null>(null)
+  const [pageError, setPageError] = useState<string | null>(null)
 
   const onDocumentLoadSuccess = useCallback(({ numPages: total }: { numPages: number }) => {
     setNumPages(total)
     setLoadError(null)
+    setPageError(null)
   }, [])
 
   const onDocumentLoadError = useCallback((error: Error) => {
     setLoadError(error.message)
   }, [])
 
+  const onPageLoadError = useCallback((error: Error) => {
+    setPageError(error.message)
+  }, [])
+
   const goToPrevPage = () => setPageNumber((prev) => Math.max(1, prev - 1))
   const goToNextPage = () => setPageNumber((prev) => Math.min(numPages, prev + 1))
   const zoomIn = () => setZoomIndex((prev) => Math.min(ZOOM_LEVELS.length - 1, prev + 1))
@@ -96,7 +102,10 @@ export const PdfViewerPage: React.FC = () => {
       <div className="flex-1 overflow-auto flex justify-center p-4">
         {loadError ? (
           <div className="flex items-center justify-center h-full">
-            <p className="text-red-600">Failed to load PDF: {loadError}</p>
+            <div className="text-center space-y-2">
+              <p className="text-red-600">Failed to load PDF: {loadError}</p>
+              <p className="text-sm text-gray-500">URL: {pdfUrl}</p>
+            </div>
           </div>
         ) : (
           <Document
@@ -110,6 +119,8 @@ export const PdfViewerPage: React.FC = () => {
               scale={ZOOM_LEVELS[zoomIndex]}
               renderTextLayer={true}
               renderAnnotationLayer={true}
+              onLoadError={onPageLoadError}
+              error={<div className="text-red-600">Failed to load page: {pageError}</div>}
             />
           </Document>
         )}