fix: add error handling to async clipboard handler in header.tsx#746
fix: add error handling to async clipboard handler in header.tsx#74696528025 wants to merge 2 commits intoOpenCut-app:mainfrom
Conversation
Wrap the async onClick handler for copying the SVG logo in a try-catch block to handle potential failures from fetch(), res.text(), and navigator.clipboard.writeText(). Show a success toast on copy and an error toast if any step fails. Fixes OpenCut-app#722 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
| @96528025 is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
| No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds try/catch around the SVG logo copy-to-clipboard flow in the header component and shows success/error toasts using the sonner library instead of silently failing. Changes affect only the click handler logic for copying the SVG. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed. Inline comments: In `@apps/web/src/components/header.tsx`: - Around line 70-77: Change the fetch block to properly check HTTP failures and use a non-abbreviated variable name: when fetching DEFAULT_LOGO_URL use "response" (not "res"), verify response.ok and throw or call toast.error if it's false before calling response.text(), then await navigator.clipboard.writeText(svg) and call toast.success on success; ensure the catch still triggers toast.error for network/other errors (update the block around navigator.clipboard.writeText and toast.success/toast.error accordingly). ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c2b7ccfe-dffb-46f5-bd66-3fe70ab64080
📒 Files selected for processing (1)
apps/web/src/components/header.tsx
| try { | ||
| const res = await fetch(DEFAULT_LOGO_URL); | ||
| const svg = await res.text(); | ||
| await navigator.clipboard.writeText(svg); | ||
| toast.success("SVG copied to clipboard"); | ||
| } catch { | ||
| toast.error("Failed to copy SVG to clipboard"); | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash # Verify whether the copy handler checks HTTP status before success toast. # Expected: explicit `response.ok` guard in the same handler block. rg -n -C4 'fetch\(DEFAULT_LOGO_URL\)|response\.ok|toast\.success\("SVG copied to clipboard"\)' apps/web/src/components/header.tsxRepository: OpenCut-app/OpenCut
Length of output: 491
Guard HTTP failure responses and fix variable naming.
The fetch() at line 71 can resolve with non-2xx status codes without checking response.ok, allowing error responses to proceed to the success toast at line 74, which misleadingly indicates the SVG was successfully copied when it may have been an error page. Additionally, the variable res violates the no-abbreviation naming guideline; use response instead.
🔧 Suggested patch
onClick={async () => { try { -const res = await fetch(DEFAULT_LOGO_URL); -const svg = await res.text(); -await navigator.clipboard.writeText(svg); +const response = await fetch(DEFAULT_LOGO_URL); +if (!response.ok) { +throw new Error( +`Failed to fetch SVG: ${response.status}`, +); +} +const svgMarkup = await response.text(); +await navigator.clipboard.writeText(svgMarkup); toast.success("SVG copied to clipboard"); } catch { toast.error("Failed to copy SVG to clipboard"); } }}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/components/header.tsx` around lines 70 - 77, Change the fetch block to properly check HTTP failures and use a non-abbreviated variable name: when fetching DEFAULT_LOGO_URL use "response" (not "res"), verify response.ok and throw or call toast.error if it's false before calling response.text(), then await navigator.clipboard.writeText(svg) and call toast.success on success; ensure the catch still triggers toast.error for network/other errors (update the block around navigator.clipboard.writeText and toast.success/toast.error accordingly). - Rename `res` to `response` to follow no-abbreviation naming guideline - Add `response.ok` check to throw on non-2xx status codes, preventing error page content from being silently copied to the clipboard Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
Summary
Fixes #722
The async
onClickhandler for copying the SVG logo had three unhandled promise rejections with no user feedback on failure.fetch(),res.text(), andnavigator.clipboard.writeText()in atry-catchblocktoast.successon successful copytoast.errorif any step failsTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes