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

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>
   );