add export error handling (#2243)

src/components/Actions.tsx

@@ -111,7 +111,7 @@ export const ShapesSwitcher = ({
   isLibraryOpen,
 }: {
   elementType: ExcalidrawElement["type"];
-  setAppState: (appState: Partial<AppState>) => void;
+  setAppState: React.Component<any, AppState>["setState"];
   isLibraryOpen: boolean;
 }) => (
   <>

src/components/App.tsx

@@ -987,13 +987,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const elements = this.scene.getElements();
 
     const selectedElements = getSelectedElements(elements, this.state);
-    exportCanvas(
+    try {
-      "clipboard",
+      exportCanvas(
-      selectedElements.length ? selectedElements : elements,
+        "clipboard",
-      this.state,
+        selectedElements.length ? selectedElements : elements,
-      this.canvas!,
+        this.state,
-      this.state,
+        this.canvas!,
-    );
+        this.state,
+      );
+    } catch (error) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+    }
   };
 
   private copyToClipboardAsSvg = () => {
@@ -1001,13 +1006,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.scene.getElements(),
       this.state,
     );
-    exportCanvas(
+    try {
-      "clipboard-svg",
+      exportCanvas(
-      selectedElements.length ? selectedElements : this.scene.getElements(),
+        "clipboard-svg",
-      this.state,
+        selectedElements.length ? selectedElements : this.scene.getElements(),
-      this.canvas!,
+        this.state,
-      this.state,
+        this.canvas!,
-    );
+        this.state,
+      );
+    } catch (error) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+    }
   };
 
   private static resetTapTwice() {

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -10,7 +10,7 @@ export const BackgroundPickerAndDarkModeToggle = ({
 }: {
   actionManager: ActionManager;
   appState: AppState;
-  setAppState: any;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}

src/components/LayerUI.tsx

@@ -49,7 +49,7 @@ interface LayerUIProps {
   actionManager: ActionManager;
   appState: AppState;
   canvas: HTMLCanvasElement | null;
-  setAppState: any;
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onRoomCreate: () => void;
   onUsernameChange: (username: string) => void;
@@ -103,7 +103,7 @@ const LibraryMenuItems = ({
   onRemoveFromLibrary: (index: number) => void;
   onInsertShape: (elements: LibraryItem) => void;
   onAddToLibrary: (elements: LibraryItem) => void;
-  setAppState: any;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
   const isMobile = useIsMobile();
   const numCells = library.length + (pendingElements.length > 0 ? 1 : 0);
@@ -202,7 +202,7 @@ const LibraryMenu = ({
   onClickOutside: (event: MouseEvent) => void;
   onInsertShape: (elements: LibraryItem) => void;
   onAddToLibrary: () => void;
-  setAppState: any;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useOnClickOutside(ref, onClickOutside);
@@ -309,18 +309,23 @@ const LayerUI = ({
   );
 
   const renderExportDialog = () => {
-    const createExporter = (type: ExportType): ExportCB => (
+    const createExporter = (type: ExportType): ExportCB => async (
       exportedElements,
       scale,
     ) => {
       if (canvas) {
-        exportCanvas(type, exportedElements, appState, canvas, {
+        try {
-          exportBackground: appState.exportBackground,
+          await exportCanvas(type, exportedElements, appState, canvas, {
-          name: appState.name,
+            exportBackground: appState.exportBackground,
-          viewBackgroundColor: appState.viewBackgroundColor,
+            name: appState.name,
-          scale,
+            viewBackgroundColor: appState.viewBackgroundColor,
-          shouldAddWatermark: appState.shouldAddWatermark,
+            scale,
-        });
+            shouldAddWatermark: appState.shouldAddWatermark,
+          });
+        } catch (error) {
+          console.error(error);
+          setAppState({ errorMessage: error.message });
+        }
       }
     };
     return (
@@ -331,18 +336,23 @@ const LayerUI = ({
         onExportToPng={createExporter("png")}
         onExportToSvg={createExporter("svg")}
         onExportToClipboard={createExporter("clipboard")}
-        onExportToBackend={(exportedElements) => {
+        onExportToBackend={async (exportedElements) => {
           if (canvas) {
-            exportCanvas(
+            try {
-              "backend",
+              await exportCanvas(
-              exportedElements,
+                "backend",
-              {
+                exportedElements,
-                ...appState,
+                {
-                selectedElementIds: {},
+                  ...appState,
-              },
+                  selectedElementIds: {},
-              canvas,
+                },
-              appState,
+                canvas,
-            );
+                appState,
+              );
+            } catch (error) {
+              console.error(error);
+              setAppState({ errorMessage: error.message });
+            }
           }
         }}
       />
@@ -577,7 +587,7 @@ const LayerUI = ({
       )}
       {appState.showShortcutsDialog && (
         <ShortcutsDialog
-          onClose={() => setAppState({ showShortcutsDialog: null })}
+          onClose={() => setAppState({ showShortcutsDialog: false })}
         />
       )}
       {renderFixedSideContainer()}

src/components/MobileMenu.tsx

@@ -23,7 +23,7 @@ type MobileMenuProps = {
   appState: AppState;
   actionManager: ActionManager;
   exportButton: React.ReactNode;
-  setAppState: any;
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   libraryMenu: JSX.Element | null;
   onRoomCreate: () => void;