Error management

ui-src/components/LibraryError.tsx

@@ -0,0 +1,40 @@
+import { Banner, Button, IconWarning32, Link } from '@create-figma-plugin/ui';
+
+import { useFigmaContext } from '@ui/context';
+
+import { Stack } from './Stack';
+
+export const LibraryError = () => {
+  const { reload, cancel, error } = useFigmaContext();
+
+  if (!error) return null;
+
+  return (
+    <Stack space="small">
+      <Stack space="xsmall">
+        <Banner icon={<IconWarning32 />} variant="warning">
+          Oops! It looks like there was an <b>error generating the export file</b>.
+        </Banner>
+        <span>
+          Please open an issue in our{' '}
+          <Link
+            href="https://github.com/penpot/penpot-exporter-figma-plugin/issues"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Github repository
+          </Link>
+          , and we&apos;ll be happy to assist you!
+        </span>
+        <Stack space="xsmall" direction="row">
+          <Button onClick={reload} fullWidth>
+            Reload
+          </Button>
+          <Button secondary onClick={cancel} fullWidth>
+            Cancel
+          </Button>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};

ui-src/components/PenpotExporter.tsx

@@ -1,19 +1,22 @@
 import { LoadingIndicator } from '@create-figma-plugin/ui';
 
+import { LibraryError } from '@ui/components/LibraryError';
 import { useFigmaContext } from '@ui/context';
 
 import { ExportForm } from './ExportForm';
 import { ExporterProgress } from './ExporterProgress';
 import { PluginReload } from './PluginReload';
 
 export const PenpotExporter = () => {
-  const { loading, needsReload, exporting } = useFigmaContext();
+  const { loading, needsReload, exporting, error } = useFigmaContext();
 
   if (loading) return <LoadingIndicator />;
 
   if (exporting) return <ExporterProgress />;
 
   if (needsReload) return <PluginReload />;
 
+  if (error) return <LibraryError />;
+
   return <ExportForm />;
 };

ui-src/context/messages.ts

@@ -11,7 +11,8 @@ type PluginMessage =
   | ProgressStepMessage
   | ProgressCurrentItemMessage
   | ProgressTotalItemsMessage
-  | ProgressProcessedItemsMessage;
+  | ProgressProcessedItemsMessage
+  | ErrorMessage;
 
 type PenpotDocumentMessage = {
   type: 'PENPOT_DOCUMENT';
@@ -47,6 +48,11 @@ type ProgressProcessedItemsMessage = {
   data: number;
 };
 
+type ErrorMessage = {
+  type: 'ERROR';
+  data: string;
+};
+
 export const sendMessage = (pluginMessage: PluginMessage) => {
   window.dispatchEvent(
     new MessageEvent<MessageData>('message', {

ui-src/context/useFigma.ts

@@ -10,6 +10,7 @@ export type UseFigmaHook = {
   needsReload: boolean;
   loading: boolean;
   exporting: boolean;
+  error: boolean;
   step: Steps | undefined;
   currentItem: string | undefined;
   totalItems: number;
@@ -38,6 +39,7 @@ export const useFigma = (): UseFigmaHook => {
   const [needsReload, setNeedsReload] = useState(false);
   const [loading, setLoading] = useState(true);
   const [exporting, setExporting] = useState(false);
+  const [error, setError] = useState(false);
 
   const [step, setStep] = useState<Steps>();
   const [currentItem, setCurrentItem] = useState<string | undefined>();
@@ -62,9 +64,16 @@ export const useFigma = (): UseFigmaHook => {
           data: 'exporting'
         });
 
-        const blob = await file.export();
+        const blob = await file.export().catch(error => {
+          sendMessage({
+            type: 'ERROR',
+            data: error.message
+          });
+        });
 
-        download(blob, `${pluginMessage.data.name}.zip`);
+        if (blob) {
+          download(blob, `${pluginMessage.data.name}.zip`);
+        }
 
         setExporting(false);
         setStep(undefined);
@@ -98,6 +107,12 @@ export const useFigma = (): UseFigmaHook => {
         setProcessedItems(pluginMessage.data);
         break;
       }
+      case 'ERROR': {
+        setError(true);
+        setLoading(false);
+        setExporting(false);
+        break;
+      }
     }
   };
 
@@ -113,6 +128,7 @@ export const useFigma = (): UseFigmaHook => {
 
   const reload = () => {
     setLoading(true);
+    setError(false);
     postMessage('reload');
   };
 
@@ -143,6 +159,7 @@ export const useFigma = (): UseFigmaHook => {
     needsReload,
     loading,
     exporting,
+    error,
     step,
     currentItem,
     totalItems,