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,6 +987,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const elements = this.scene.getElements();
 
     const selectedElements = getSelectedElements(elements, this.state);
+    try {
       exportCanvas(
         "clipboard",
         selectedElements.length ? selectedElements : elements,
@@ -994,6 +995,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         this.canvas!,
         this.state,
       );
+    } catch (error) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+    }
   };
 
   private copyToClipboardAsSvg = () => {
@@ -1001,6 +1006,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.scene.getElements(),
       this.state,
     );
+    try {
       exportCanvas(
         "clipboard-svg",
         selectedElements.length ? selectedElements : this.scene.getElements(),
@@ -1008,6 +1014,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         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 {
+          await exportCanvas(type, exportedElements, appState, canvas, {
             exportBackground: appState.exportBackground,
             name: appState.name,
             viewBackgroundColor: appState.viewBackgroundColor,
             scale,
             shouldAddWatermark: appState.shouldAddWatermark,
           });
+        } catch (error) {
+          console.error(error);
+          setAppState({ errorMessage: error.message });
+        }
       }
     };
     return (
@@ -331,9 +336,10 @@ const LayerUI = ({
         onExportToPng={createExporter("png")}
         onExportToSvg={createExporter("svg")}
         onExportToClipboard={createExporter("clipboard")}
-        onExportToBackend={(exportedElements) => {
+        onExportToBackend={async (exportedElements) => {
           if (canvas) {
-            exportCanvas(
+            try {
+              await exportCanvas(
                 "backend",
                 exportedElements,
                 {
@@ -343,6 +349,10 @@ const LayerUI = ({
                 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;