Skip to content

fix: add error handling to async clipboard handler in header.tsx #746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
96528025 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: add error handling to async clipboard handler in header.tsx #746

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29504c8
fix: add error handling to async clipboard handler in header.tsx
96528025 Mar 18, 2026
c1613d8
fix: guard HTTP failure responses and rename res to response
96528025 Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions apps/web/src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
ContextMenuItem,
ContextMenuTrigger,
} from "./ui/context-menu";
import { toast } from "sonner";

export function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
Expand Down Expand Up @@ -66,9 +67,17 @@ export function Header() {
<ContextMenuContent>
<ContextMenuItem
onClick={async () => {
const res = await fetch(DEFAULT_LOGO_URL);
const svg = await res.text();
await navigator.clipboard.writeText(svg);
try {
const response = await fetch(DEFAULT_LOGO_URL);
if (!response.ok) {
throw new Error(`Failed to fetch SVG: ${response.status}`);
}
const svg = await response.text();
await navigator.clipboard.writeText(svg);
toast.success("SVG copied to clipboard");
} catch {
toast.error("Failed to copy SVG to clipboard");
}
Comment on lines +70 to +80
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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.tsx

Repository: 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).

}}
>
<HugeiconsIcon icon={Copy01Icon} />
Expand Down