From ba4637a6bd2201754414534d95109cb30e883cdd Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Mon, 11 Mar 2024 07:09:46 +0000
Subject: [PATCH] fix(core): add view error boundary (#6036)

---
 .../error-fallbacks/no-page-root-fallback.tsx |  2 +-
 .../block-suite-editor/blocksuite-editor.tsx  | 30 +------------------
 .../block-suite-editor/no-page-error.ts       | 30 +++++++++++++++++++
 .../workbench/view/route-container.tsx        |  9 ++++--
 4 files changed, 38 insertions(+), 33 deletions(-)
 create mode 100644 packages/frontend/core/src/components/blocksuite/block-suite-editor/no-page-error.ts

diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
index 82d908102d..33a37d4824 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
index 38d209f27d..9171a4d165 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
+++ b/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 },
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/no-page-error.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/no-page-error.ts
new file mode 100644
index 0000000000..40d216e70f
--- /dev/null
+++ b/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,
+      })
+    );
+  }
+}
diff --git a/packages/frontend/core/src/modules/workbench/view/route-container.tsx b/packages/frontend/core/src/modules/workbench/view/route-container.tsx
index dc1008c9a9..a16a3e9dba 100644
--- a/packages/frontend/core/src/modules/workbench/view/route-container.tsx
+++ b/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>
   );
 };