fix(core): add view error boundary (#6036)

packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx

@@ -1,4 +1,4 @@
-import { NoPageRootError } from '@affine/core/components/blocksuite/block-suite-editor';
+import { NoPageRootError } from '@affine/core/components/blocksuite/block-suite-editor/no-page-error';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 
 import { ContactUS, ErrorDetail } from '../error-basic/error-detail';

packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx

@@ -16,13 +16,13 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { type Map as YMap } from 'yjs';
 
 import {
   pageReferenceRenderer,
   type PageReferenceRendererOptions,
 } from '../../affine/reference-link';
 import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
+import { NoPageRootError } from './no-page-error';
 import type { InlineRenderers } from './specs';
 
 export type ErrorBoundaryProps = {
@@ -77,34 +77,6 @@ const customRenderersFactory: (
   },
 });
 
-/**
- * TODO: Define error to unexpected state together in the future.
- */
-export class NoPageRootError extends Error {
-  constructor(public page: Doc) {
-    super('Page root not found when render editor!');
-
-    // Log info to let sentry collect more message
-    const hasExpectSpace = Array.from(page.rootDoc.spaces.values()).some(
-      doc => page.spaceDoc.guid === doc.guid
-    );
-    const blocks = page.spaceDoc.getMap('blocks') as YMap<YMap<any>>;
-    const havePageBlock = Array.from(blocks.values()).some(
-      block => block.get('sys:flavour') === 'affine:page'
-    );
-    console.info(
-      'NoPageRootError current data: %s',
-      JSON.stringify({
-        expectPageId: page.id,
-        expectGuid: page.spaceDoc.guid,
-        hasExpectSpace,
-        blockSize: blocks.size,
-        havePageBlock,
-      })
-    );
-  }
-}
-
 const BlockSuiteEditorImpl = forwardRef<AffineEditorContainer, EditorProps>(
   function BlockSuiteEditorImpl(
     { mode, page, className, defaultSelectedBlockId, onLoadEditor, style },

packages/frontend/core/src/components/blocksuite/block-suite-editor/no-page-error.ts

@@ -0,0 +1,30 @@
+import type { Doc } from '@blocksuite/store';
+import { type Map as YMap } from 'yjs';
+
+/**
+ * TODO: Define error to unexpected state together in the future.
+ */
+export class NoPageRootError extends Error {
+  constructor(public page: Doc) {
+    super('Page root not found when render editor!');
+
+    // Log info to let sentry collect more message
+    const hasExpectSpace = Array.from(page.rootDoc.spaces.values()).some(
+      doc => page.spaceDoc.guid === doc.guid
+    );
+    const blocks = page.spaceDoc.getMap('blocks') as YMap<YMap<any>>;
+    const havePageBlock = Array.from(blocks.values()).some(
+      block => block.get('sys:flavour') === 'affine:page'
+    );
+    console.info(
+      'NoPageRootError current data: %s',
+      JSON.stringify({
+        expectPageId: page.id,
+        expectGuid: page.spaceDoc.guid,
+        hasExpectSpace,
+        blockSize: blocks.size,
+        havePageBlock,
+      })
+    );
+  }
+}

packages/frontend/core/src/modules/workbench/view/route-container.tsx

@@ -6,6 +6,7 @@ import { useService } from '@toeverything/infra/di';
 import { useAtomValue } from 'jotai';
 import { Suspense, useCallback } from 'react';
 
+import { AffineErrorBoundary } from '../../../components/affine/affine-error-boundary';
 import {
   appSidebarOpenAtom,
   SidebarSwitch,
@@ -68,9 +69,11 @@ export const RouteContainer = ({ route }: Props) => {
         )}
       </div>
       <view.body.Target className={styles.viewBodyContainer} />
-      <Suspense>
-        <route.Component />
-      </Suspense>
+      <AffineErrorBoundary>
+        <Suspense>
+          <route.Component />
+        </Suspense>
+      </AffineErrorBoundary>
     </div>
   );
 };