fix(core): rerender error boundary when route change and improve sentry report (#5147)

packages/frontend/component/src/components/block-suite-editor/index.tsx

@@ -12,6 +12,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { type Map as YMap } from 'yjs';
 
 import { Skeleton } from '../../ui/skeleton';
 import {
@@ -82,17 +83,21 @@ export class NoPageRootError extends Error {
     super('Page root not found when render editor!');
 
     // Log info to let sentry collect more message
-    const spaceVectors = Array.from(page.doc.spaces.entries()).map(
-      ([pageId, doc]) => `${pageId} > ${doc.guid}`
+    const hasExpectSpace = Array.from(page.doc.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'
     );
-    const blocks = page.doc.getMap('blocks');
     console.info(
       'NoPageRootError current data: %s',
       JSON.stringify({
         expectPageId: page.id,
         expectGuid: page.spaceDoc.guid,
-        spaceVectors,
+        hasExpectSpace,
         blockSize: blocks.size,
+        havePageBlock,
       })
     );
   }

packages/frontend/core/src/bootstrap/setup.ts

@@ -59,7 +59,7 @@ export async function setup(store: ReturnType<typeof createStore>) {
   performanceSetupLogger.info('setup global');
   setupGlobal();
 
-  if (window.SENTRY_RELEASE) {
+  if (window.SENTRY_RELEASE || environment.isDebug) {
     // https://docs.sentry.io/platforms/javascript/guides/react/#configure
     Sentry.init({
       dsn: process.env.SENTRY_DSN,
@@ -75,8 +75,10 @@ export async function setup(store: ReturnType<typeof createStore>) {
           ),
         }),
         new Sentry.Replay(),
-        new Sentry.BrowserTracing(),
       ],
+      // Set tracesSampleRate to 1.0 to capture 100%
+      // of transactions for performance monitoring.
+      tracesSampleRate: 1.0,
     });
     Sentry.setTags({
       appVersion: runtimeConfig.appVersion,

packages/frontend/core/src/pages/workspace/detail-page.tsx

@@ -164,8 +164,7 @@ export const DetailPage = (): ReactElement => {
     });
   }
 
-  // Add a key to force rerender when page changed, to avoid some lifecycle issues.
-  return <DetailPageImpl key={currentPageId} />;
+  return <DetailPageImpl />;
 };
 
 export const loader: LoaderFunction = async () => {
@@ -192,8 +191,9 @@ export const Component = () => {
     }
   }, [params, setContentLayout, setCurrentPageId, setCurrentWorkspaceId]);
 
+  // Add a key to force rerender when page changed, to avoid error boundary persisting.
   return (
-    <AffineErrorBoundary>
+    <AffineErrorBoundary key={params.pageId}>
       <DetailPage />
     </AffineErrorBoundary>
   );