[FIX] Add error fallback for PDF viewer when document fails to load#1781
[FIX] Add error fallback for PDF viewer when document fails to load#1781vishnuszipstack wants to merge 1 commit intomainfrom
Conversation
Previously, if a PDF failed to load due to an invalid/unavailable URL or corrupted file, the viewer would render a blank screen with no feedback. This adds a user-friendly error fallback with a retry option, and handles the case when no file URL is provided. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary by CodeRabbitRelease Notes
WalkthroughThe changes add error handling and retry functionality to the PDF viewer component. CSS styling for error states is introduced, and the PdfViewer component is enhanced with retry logic, error display UI using Ant Design components, and a new onError callback prop for parent component error reporting. Changes
Sequence DiagramsequenceDiagram
participant User
participant PdfViewer
participant Viewer
participant Parent
User->>Viewer: Load PDF
Viewer-->>PdfViewer: Error occurs
PdfViewer->>PdfViewer: Trigger renderError()
PdfViewer->>User: Display error UI with retry button
Parent->>Parent: Receive onError callback
User->>PdfViewer: Click retry button
PdfViewer->>PdfViewer: Update retryKey state
PdfViewer->>Viewer: Re-render with new key
Viewer->>User: Attempt PDF load again
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
vishnuszipstack
requested review from
Deepak-Kesavan,
athul-rs,
jagadeeswaran-zipstack and
jaseemjaskp
and removed request for
jagadeeswaran-zipstack and
jaseemjaskp
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/components/custom-tools/pdf-viewer/PdfViewer.jsx`:
- Around line 34-66: renderError currently calls the onError callback during
render which causes a side effect; instead, have renderError set a local error
state (useState) and remove the direct onError call, then add a useEffect that
watches that error state and invokes onError(error) when the state changes
(include onError in the effect deps and guard for non-null error). Update
references to renderError, onError, handleRetry and the new error state variable
so renderError remains pure and the notification happens in useEffect.
🧹 Nitpick comments (1)
frontend/src/components/custom-tools/pdf-viewer/Highlight.css (1)
11-36: Consider using Ant Design theme tokens instead of hardcoded colors.The colors (
#fafafa,#262626,#8c8c8c, etc.) are hardcoded, which won't adapt if the application ever adopts a dark theme or customizes its Ant Design theme tokens. Additionally, directly overriding.ant-result-title/.ant-result-subtitleclass names couples this to antd's internal markup — these can break on major antd upgrades.Not a blocker given the rest of the file already uses hardcoded values, but worth noting for future maintainability.
| // Render error fallback for PDF load failures | ||
| const renderError = useCallback( | ||
| (error) => { | ||
| const errorMessage = | ||
| error?.message || | ||
| "Failed to load PDF document. The file may be corrupted or inaccessible."; | ||
|
|
||
| // Notify parent component of error if callback provided | ||
| if (onError) { | ||
| onError(error); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="pdf-viewer-error"> | ||
| <Result | ||
| icon={<FileExclamationOutlined style={{ color: "#ff4d4f" }} />} | ||
| title="Failed to Load PDF" | ||
| subTitle={errorMessage} | ||
| extra={ | ||
| <Button | ||
| type="primary" | ||
| icon={<ReloadOutlined />} | ||
| onClick={handleRetry} | ||
| > | ||
| Retry | ||
| </Button> | ||
| } | ||
| /> | ||
| </div> | ||
| ); | ||
| }, | ||
| [onError, handleRetry] | ||
| ); |
There was a problem hiding this comment.
Side effect in render callback: onError is invoked during render.
renderError is a render callback — React can invoke it multiple times (reconciliation, Strict Mode double-render, etc.). Calling onError(error) directly inside it triggers a side effect during render, which can cause duplicate notifications to the parent and violates React's expectation that render functions are pure.
Move the error notification into a useEffect instead, tracking the error in state:
Proposed fix
- const [retryKey, setRetryKey] = useState(0);
+ const [retryKey, setRetryKey] = useState(0);
+ const [loadError, setLoadError] = useState(null);
+
const handleRetry = useCallback(() => {
setRetryKey((prev) => prev + 1);
+ setLoadError(null);
}, []);
+ // Notify parent of load errors
+ useEffect(() => {
+ if (loadError && onError) {
+ onError(loadError);
+ }
+ }, [loadError, onError]);
const renderError = useCallback(
(error) => {
const errorMessage =
error?.message ||
"Failed to load PDF document. The file may be corrupted or inaccessible.";
- if (onError) {
- onError(error);
- }
+ // Store error in state so useEffect can safely notify parent
+ setLoadError(error);
return (
<div className="pdf-viewer-error">
<Result
icon={<FileExclamationOutlined style={{ color: "#ff4d4f" }} />}
title="Failed to Load PDF"
subTitle={errorMessage}
extra={
<Button
type="primary"
icon={<ReloadOutlined />}
onClick={handleRetry}
>
Retry
</Button>
}
/>
</div>
);
},
- [onError, handleRetry]
+ [handleRetry]
);🤖 Prompt for AI Agents
In `@frontend/src/components/custom-tools/pdf-viewer/PdfViewer.jsx` around lines
34 - 66, renderError currently calls the onError callback during render which
causes a side effect; instead, have renderError set a local error state
(useState) and remove the direct onError call, then add a useEffect that watches
that error state and invokes onError(error) when the state changes (include
onError in the effect deps and guard for non-null error). Update references to
renderError, onError, handleRetry and the new error state variable so
renderError remains pure and the notification happens in useEffect.
jaseemjaskp
left a comment
jaseemjaskp
left a comment
There was a problem hiding this comment.
LGTM. please review the coderabbit comment and address it if valid. otherwise resolve it
3 participants
What
PdfViewercomponent that displays a user-friendly error message with a Retry button when a PDF fails to load (corrupted file, network error, invalid URL)fileUrlis provided, showing a "No PDF Available" warning instead of a blank screenWhy
How
renderErrorprop of@react-pdf-viewer/coreViewer component to catch PDF load failures and render a custom error UI using Ant Design'sResultcomponentretryKeystate to force the Viewer to re-mount when the Retry button is clickedfileUrlis falsy to show the "No PDF Available" stateonErrorcallback prop so parent components can be notified of PDF load errorsCan this PR break any existing features. If yes, please list possible items. If no, please explain why.
onErrorprop is optional and does not affect existing usage.Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
antdand@ant-design/iconspackages.Notes on Testing
Screenshots
Checklist
I have read and understood the Contribution Guidelines.