{"record":{"id":"1773125f0b284a1b","repo":"AykutSarac/jsoncrack.com","slug":"failed-to-copy-to-clipboard","errorCode":null,"errorMessage":"Failed to copy to clipboard","messagePattern":"Failed to copy to clipboard","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"apps/www/src/features/modals/DownloadModal/index.tsx","lineNumber":110,"sourceCode":"      const blob = await toBlob(imageElement, imageOptions);\n\n      if (!blob) return;\n\n      await navigator.clipboard?.write([\n        new ClipboardItem({\n          [blob.type]: blob,\n        }),\n      ]);\n\n      toast.success(\"Copied to clipboard\");\n      gaEvent(\"clipboard_img\");\n    } catch (error) {\n      if (error instanceof Error && error.name === \"NotAllowedError\") {\n        toast.error(\n          \"Clipboard write permission denied. Please allow clipboard access in your browser settings.\"\n        );\n      } else {\n        toast.error(\"Failed to copy to clipboard\");\n      }\n    } finally {\n      toast.dismiss(\"toastClipboard\");\n      onClose();\n    }\n  };\n\n  const exportAsImage = async () => {\n    try {\n      toast.loading(\"Downloading...\", { id: \"toastDownload\" });\n\n      const imageElement = getExportElement();\n      if (!imageElement) {\n        toast.error(\"Canvas not found.\");\n        return;\n      }\n      const imageOptions = {\n        quality: fileDetails.quality,","sourceCodeStart":92,"sourceCodeEnd":128,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/modals/DownloadModal/index.tsx#L92-L128","documentation":"Generic clipboard failure toast from clipboardImage()'s catch — the branch taken when the error is NOT a NotAllowedError. Covers any other DOMException or thrown error from the clipboard pipeline: unsupported MIME type in ClipboardItem (e.g. image/svg+xml is not universally supported), AbortError, SecurityError, or NotSupportedError.","triggerScenarios":"Trying to copy an SVG blob via navigator.clipboard.write (many browsers only accept image/png in ClipboardItem); a null blob (the `if (!blob) return` guard exists but a later await may still fail); the browser does not implement ClipboardItem for the given type.","commonSituations":"Exporting as SVG then clicking Clipboard (SVG MIME unsupported by async clipboard API); Firefox/Safari limitations on clipboard image types; transient AbortError from rapid repeated clicks.","solutions":["Force PNG for the clipboard path (render a PNG blob) regardless of the selected extension.","Check typeof ClipboardItem and blob.type support before calling write.","Log the actual error to distinguish NotSupportedError from AbortError.","Offer a download fallback when clipboard write is unsupported."],"exampleFix":"// before\nconst blob = await toBlob(imageElement, imageOptions);\nif (!blob) return;\nawait navigator.clipboard?.write([new ClipboardItem({ [blob.type]: blob })]);\n\n// after — always use PNG for clipboard compatibility\nconst pngBlob = await toPng(imageElement, imageOptions);\nif (!pngBlob) return;\nconst type = ClipboardItem.supports(\"image/png\") ? \"image/png\" : pngBlob.type;\nawait navigator.clipboard?.write([new ClipboardItem({ [type]: pngBlob })]);","handlingStrategy":"validation","validationCode":"// Force a clipboard-safe MIME type\nexport function clipboardSupportedType(blob: Blob): string {\n  return typeof ClipboardItem !== \"undefined\" && ClipboardItem.supports?.(\"image/png\")\n    ? \"image/png\"\n    : blob.type;\n}","typeGuard":"// Detect unsupported clipboard image types\nexport function isUnsupportedClipboard(error: unknown): boolean {\n  return error instanceof DOMException && (error.name === \"NotSupportedError\" || error.name === \"AbortError\");\n}","tryCatchPattern":"// Distinguish unsupported-type from other failures\ntry {\n  await navigator.clipboard?.write([new ClipboardItem({ [type]: blob })]);\n} catch (error) {\n  if (isUnsupportedClipboard(error)) downloadURI(URL.createObjectURL(blob), name);\n  else toast.error(\"Failed to copy to clipboard\");\n}","preventionTips":["Always render a PNG blob for the clipboard path (SVG MIME is not universally accepted).","Check ClipboardItem.supports before writing.","Offer a download fallback when clipboard write is unsupported."],"tags":["clipboard","browser","export","html-to-image","svg"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}