Merge pull request #25093 from overleaf/td-upgrade-react-error-boundary-second-attempt

Upgrade react-error-boundary to version 5, second attempt

GitOrigin-RevId: 2b88334b66f0ace383211c147279ff88e9f956bb

services/web/frontend/js/features/source-editor/components/source-editor.tsx

@@ -16,4 +16,6 @@ function SourceEditor() {
   )
 }
 
-export default withErrorBoundary(memo(SourceEditor), ErrorBoundaryFallback)
+export default withErrorBoundary(memo(SourceEditor), () => (
+  <ErrorBoundaryFallback />
+))

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -33,7 +33,7 @@ import { setSpellCheckLanguage } from '../extensions/spelling'
 import { setKeybindings } from '../extensions/keybindings'
 import { Highlight } from '../../../../../types/highlight'
 import { EditorView } from '@codemirror/view'
-import { useErrorHandler } from 'react-error-boundary'
+import { useErrorBoundary } from 'react-error-boundary'
 import { setVisual } from '../extensions/visual/visual'
 import { useFileTreePathContext } from '@/features/file-tree/contexts/file-tree-path'
 import { useUserSettingsContext } from '@/shared/context/user-settings-context'
@@ -265,7 +265,7 @@ function useCodeMirrorScope(view: EditorView) {
     visual: showVisual,
   })
 
-  const handleError = useErrorHandler()
+  const { showBoundary } = useErrorBoundary()
 
   const handleException = useCallback((exception: any) => {
     captureException(exception, {
@@ -304,7 +304,7 @@ function useCodeMirrorScope(view: EditorView) {
           spelling: spellingRef.current,
           visual: visualRef.current,
           projectFeatures: projectFeaturesRef.current,
-          handleError,
+          showBoundary,
           handleException,
         }),
       })
@@ -335,7 +335,7 @@ function useCodeMirrorScope(view: EditorView) {
     }
     // IMPORTANT: This effect must not depend on anything variable apart from currentDocument,
     // as the editor state is recreated when the effect runs.
-  }, [view, currentDocument, handleError, handleException])
+  }, [view, currentDocument, showBoundary, handleException])
 
   useEffect(() => {
     if (openDocName) {