🥅(frontend) improve error handling during upload

Catch and log errors when replacing blocks during
file upload.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/UploadLoaderBlock.tsx

@@ -70,35 +70,43 @@ const UploadLoaderBlockComponent = ({
     loopCheckDocMediaStatus(url)
       .then((response) => {
         // Replace the loading block with the resource block (image, audio, video, pdf ...)
-        editor.replaceBlocks(
-          [block.id],
-          [
-            {
-              type: block.props.blockUploadType,
-              props: {
-                url: `${mediaUrl}${response.file}`,
-                showPreview: block.props.blockUploadShowPreview,
-                name: block.props.blockUploadName,
-                caption: '',
-                backgroundColor: 'default',
-                textAlignment: 'left',
-              },
-            } as never,
-          ],
-        );
+        try {
+          editor.replaceBlocks(
+            [block.id],
+            [
+              {
+                type: block.props.blockUploadType,
+                props: {
+                  url: `${mediaUrl}${response.file}`,
+                  showPreview: block.props.blockUploadShowPreview,
+                  name: block.props.blockUploadName,
+                  caption: '',
+                  backgroundColor: 'default',
+                  textAlignment: 'left',
+                },
+              } as never,
+            ],
+          );
+        } catch {
+          /* During collaboration, another user might have updated the block */
+        }
       })
       .catch((error) => {
         console.error('Error analyzing file:', error);
 
-        editor.updateBlock(block.id, {
-          type: 'uploadLoader',
-          props: {
-            type: 'warning',
-            information: t(
-              'The antivirus has detected an anomaly in your file.',
-            ),
-          },
-        });
+        try {
+          editor.updateBlock(block.id, {
+            type: 'uploadLoader',
+            props: {
+              type: 'warning',
+              information: t(
+                'The antivirus has detected an anomaly in your file.',
+              ),
+            },
+          });
+        } catch {
+          /* During collaboration, another user might have updated the block */
+        }
       });
   }, [block, editor, mediaUrl]);
 

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useUploadFile.tsx

@@ -1,3 +1,4 @@
+import { captureException } from '@sentry/nextjs';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -70,22 +71,28 @@ export const useUploadStatus = (editor: DocsBlockNoteEditor) => {
       const timeoutId = setTimeout(() => {
         // Replace the resource block by a uploadLoader block
         // to show analyzing status
-        editor.replaceBlocks(
-          [blockChanges.block.id],
-          [
-            {
-              type: 'uploadLoader',
-              props: {
-                information: t('Analyzing file...'),
-                type: 'loading',
-                blockUploadName,
-                blockUploadType,
-                blockUploadUrl,
-                blockUploadShowPreview,
+        try {
+          editor.replaceBlocks(
+            [blockChanges.block.id],
+            [
+              {
+                type: 'uploadLoader',
+                props: {
+                  information: t('Analyzing file...'),
+                  type: 'loading',
+                  blockUploadName,
+                  blockUploadType,
+                  blockUploadUrl,
+                  blockUploadShowPreview,
+                },
               },
-            },
-          ],
-        );
+            ],
+          );
+        } catch (error) {
+          captureException(error, {
+            extra: { info: 'Error replacing block for upload loader' },
+          });
+        }
       }, 250);
 
       return () => {