🥅(frontend) improve error handling during upload

Catch and log errors when replacing blocks during
file upload.
This commit is contained in:
Anthony LC
2025-11-05 11:42:13 +01:00
parent 1372438f8e
commit f9ff578c6b
2 changed files with 55 additions and 40 deletions

View File

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

View File

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