improve error handling

src/app/components/Clients/QRCodeDialog.vue

@@ -33,6 +33,7 @@
 <script setup lang="ts">
 defineProps<{ qrCode: string }>();
 
+const toast = useToast();
 const img = useTemplateRef('img');
 
 async function svgToPng() {
@@ -63,35 +64,52 @@ async function svgToPng() {
 }
 
 async function downloadPng() {
-  const blob = await svgToPng();
+  try {
+    const blob = await svgToPng();
 
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = 'client-config.png';
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'client-config.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (e) {
+    console.error('failed to download png', e);
+    toast.showToast({
+      type: 'error',
+      message: $t('toast.unknown'),
+    });
+  }
 }
 
 async function copyPng() {
-  try {
-    const blob = await svgToPng();
+  const blob = await svgToPng().catch((e) => {
+    console.error('failed to convert svg to png', e);
+    toast.showToast({
+      type: 'error',
+      message: $t('toast.unknown'),
+    });
+  });
+  if (!blob) {
+    return;
+  }
 
+  try {
     await navigator.clipboard.write([
       new ClipboardItem({
         [blob.type]: blob,
       }),
     ]);
 
-    useToast().showToast({
+    toast.showToast({
       type: 'success',
       message: $t('copy.copied'),
     });
   } catch (e) {
     console.error('failed to copy png', e);
-    useToast().showToast({
+    toast.showToast({
       type: 'error',
       message: $t('copy.failed'),
     });

src/i18n/locales/en.json

@@ -134,7 +134,8 @@
   "toast": {
     "success": "Success",
     "saved": "Saved",
-    "error": "Error"
+    "error": "Error",
+    "unknown": "Unknown error. See console for more details"
   },
   "form": {
     "actions": "Actions",