diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index f956b5086..31ec20581 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -33,7 +33,7 @@ jobs:
   build-core:
     name: Build @affine/core
     runs-on: ubuntu-latest
-
+    environment: ${{ github.event.inputs.flavor }}
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js
@@ -50,6 +50,10 @@ jobs:
           SHOULD_REPORT_TRACE: true
           TRACE_REPORT_ENDPOINT: ${{ secrets.TRACE_REPORT_ENDPOINT }}
           CAPTCHA_SITE_KEY: ${{ secrets.CAPTCHA_SITE_KEY }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
       - name: Upload core artifact
         uses: actions/upload-artifact@v3
         with:
diff --git a/.github/workflows/nightly-build.yml b/.github/workflows/nightly-build.yml
index 84dce785b..a8930db8c 100644
--- a/.github/workflows/nightly-build.yml
+++ b/.github/workflows/nightly-build.yml
@@ -69,8 +69,8 @@ jobs:
         env:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
-          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           RELEASE_VERSION: ${{ needs.set-build-version.outputs.version }}
           SKIP_PLUGIN_BUILD: 'true'
           SKIP_NX_CACHE: 'true'
diff --git a/.github/workflows/release-desktop-app.yml b/.github/workflows/release-desktop-app.yml
index 08723c41f..41347783d 100644
--- a/.github/workflows/release-desktop-app.yml
+++ b/.github/workflows/release-desktop-app.yml
@@ -40,6 +40,7 @@ env:
 jobs:
   before-make:
     runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.build-type || (github.ref_type == 'tag' && contains(github.ref, 'canary') && 'canary') }}
     outputs:
       RELEASE_VERSION: ${{ steps.get-canary-version.outputs.RELEASE_VERSION }}
     steps:
@@ -65,6 +66,7 @@ jobs:
           SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           RELEASE_VERSION: ${{ github.event.inputs.version || steps.get-canary-version.outputs.RELEASE_VERSION }}
           SKIP_PLUGIN_BUILD: 'true'
           SKIP_NX_CACHE: 'true'
diff --git a/nx.json b/nx.json
index da98371a7..69c3b1f5e 100644
--- a/nx.json
+++ b/nx.json
@@ -56,7 +56,7 @@
           "env": "SENTRY_AUTH_TOKEN"
         },
         {
-          "env": "NEXT_PUBLIC_SENTRY_DSN"
+          "env": "SENTRY_DSN"
         },
         {
           "env": "DISTRIBUTION"
diff --git a/packages/common/infra/src/blocksuite/initialization/index.ts b/packages/common/infra/src/blocksuite/initialization/index.ts
index a45ca66c5..ca06c51e5 100644
--- a/packages/common/infra/src/blocksuite/initialization/index.ts
+++ b/packages/common/infra/src/blocksuite/initialization/index.ts
@@ -4,6 +4,10 @@ import type { createStore, WritableAtom } from 'jotai/vanilla';
 import { nanoid } from 'nanoid';
 
 import { migratePages } from '../migration/blocksuite';
+import {
+  checkWorkspaceCompatibility,
+  MigrationPoint,
+} from '../migration/workspace';
 
 export async function initEmptyPage(page: Page, title?: string) {
   await page.load(() => {
@@ -244,46 +248,48 @@ export async function buildShowcaseWorkspace(
       {} as Record<string, string>
     );
   });
-  await Promise.all(
-    data.map(async ([id, promise, newId]) => {
-      const { default: template } = await promise;
-      let json = JSON.stringify(template);
-      Object.entries(idMap).forEach(([oldId, newId]) => {
-        json = json.replaceAll(oldId, newId);
-      });
-      json = JSON.parse(json);
-      await workspace
-        .importPageSnapshot(structuredClone(json), newId)
-        .catch(error => {
-          console.error('error importing page', id, error);
-        });
-      const page = workspace.getPage(newId);
-      assertExists(page);
-      await page.load();
-      workspace.schema.upgradePage(
-        0,
-        {
-          'affine:note': 1,
-          'affine:bookmark': 1,
-          'affine:database': 2,
-          'affine:divider': 1,
-          'affine:image': 1,
-          'affine:list': 1,
-          'affine:code': 1,
-          'affine:page': 2,
-          'affine:paragraph': 1,
-          'affine:surface': 3,
-        },
-        page.spaceDoc
-      );
 
-      // The showcase building will create multiple pages once, and may skip the version writing.
-      // https://github.com/toeverything/blocksuite/blob/master/packages/store/src/workspace/page.ts#L662
-      if (!workspace.meta.blockVersions) {
-        await migratePages(workspace.doc, workspace.schema);
-      }
-    })
-  );
+  // Import page one by one to prevent workspace meta race condition problem.
+  for (const [id, promise, newId] of data) {
+    const { default: template } = await promise;
+    let json = JSON.stringify(template);
+    Object.entries(idMap).forEach(([oldId, newId]) => {
+      json = json.replaceAll(oldId, newId);
+    });
+    json = JSON.parse(json);
+    await workspace
+      .importPageSnapshot(structuredClone(json), newId)
+      .catch(error => {
+        console.error('error importing page', id, error);
+      });
+    const page = workspace.getPage(newId);
+    assertExists(page);
+    await page.load();
+    workspace.schema.upgradePage(
+      0,
+      {
+        'affine:note': 1,
+        'affine:bookmark': 1,
+        'affine:database': 2,
+        'affine:divider': 1,
+        'affine:image': 1,
+        'affine:list': 1,
+        'affine:code': 1,
+        'affine:page': 2,
+        'affine:paragraph': 1,
+        'affine:surface': 3,
+      },
+      page.spaceDoc
+    );
+  }
+
+  // The showcase building will create multiple pages once, and may skip the version writing.
+  // https://github.com/toeverything/blocksuite/blob/master/packages/store/src/workspace/page.ts#L662
+  const compatibilityResult = checkWorkspaceCompatibility(workspace);
+  if (compatibilityResult === MigrationPoint.BlockVersion) {
+    await migratePages(workspace.doc, workspace.schema);
+  }
+
   Object.entries(pageMetas).forEach(([oldId, meta]) => {
     const newId = idMap[oldId];
     workspace.setPageMeta(newId, meta);
diff --git a/packages/common/infra/src/blocksuite/migration/blocksuite.ts b/packages/common/infra/src/blocksuite/migration/blocksuite.ts
index 10474d5b9..ef6139151 100644
--- a/packages/common/infra/src/blocksuite/migration/blocksuite.ts
+++ b/packages/common/infra/src/blocksuite/migration/blocksuite.ts
@@ -20,13 +20,18 @@ export async function migratePages(
   const meta = rootDoc.getMap('meta') as YMap<unknown>;
   const versions = meta.get('blockVersions') as YMap<number>;
   const oldVersions = versions?.toJSON() ?? {};
+
   spaces.forEach((space: YDoc) => {
-    try {
-      schema.upgradePage(0, oldVersions, space);
-    } catch (e) {
-      console.error(`page ${space.guid} upgrade failed`, e);
-    }
+    schema.upgradePage(0, oldVersions, space);
   });
+  schema.upgradeWorkspace(rootDoc);
+
+  // Hard code to upgrade page version to 2.
+  // Let e2e to ensure the data version is correct.
+  const pageVersion = meta.get('pageVersion');
+  if (typeof pageVersion !== 'number' || pageVersion < 2) {
+    meta.set('pageVersion', 2);
+  }
 
   const newVersions = getLatestVersions(schema);
   meta.set('blockVersions', new YMap(Object.entries(newVersions)));
diff --git a/packages/common/infra/src/blocksuite/migration/fixing.ts b/packages/common/infra/src/blocksuite/migration/fixing.ts
index c677179cc..f46fd11c0 100644
--- a/packages/common/infra/src/blocksuite/migration/fixing.ts
+++ b/packages/common/infra/src/blocksuite/migration/fixing.ts
@@ -43,3 +43,25 @@ export function guidCompatibilityFix(rootDoc: YDoc) {
   });
   return changed;
 }
+
+/**
+ * Hard code to fix workspace version to be compatible with legacy data.
+ * Let e2e to ensure the data version is correct.
+ */
+export function fixWorkspaceVersion(rootDoc: YDoc) {
+  const meta = rootDoc.getMap('meta') as YMap<unknown>;
+
+  /**
+   * It doesn't matter to upgrade workspace version from 1 or undefined to 2.
+   * Blocksuite just set the value, do nothing else.
+   */
+  const workspaceVersion = meta.get('workspaceVersion');
+  if (typeof workspaceVersion !== 'number' || workspaceVersion < 2) {
+    meta.set('workspaceVersion', 2);
+
+    const pageVersion = meta.get('pageVersion');
+    if (typeof pageVersion !== 'number') {
+      meta.set('pageVersion', 1);
+    }
+  }
+}
diff --git a/packages/common/infra/src/blocksuite/migration/workspace.ts b/packages/common/infra/src/blocksuite/migration/workspace.ts
index 24d09671b..e26f64423 100644
--- a/packages/common/infra/src/blocksuite/migration/workspace.ts
+++ b/packages/common/infra/src/blocksuite/migration/workspace.ts
@@ -58,15 +58,25 @@ export function checkWorkspaceCompatibility(
     return MigrationPoint.SubDoc;
   }
 
-  // Sometimes, blocksuite will not write blockVersions to meta.
-  // Just fix it when user open the workspace.
-  const blockVersions = workspace.meta.blockVersions;
-  if (!blockVersions) {
+  const hasVersion = workspace.meta.hasVersion;
+  if (!hasVersion) {
     return MigrationPoint.BlockVersion;
   }
 
+  // TODO: Catch compatibility error from blocksuite to show upgrade page.
+  // Temporarily follow the check logic of blocksuite.
+  if ((workspace.meta.pages?.length ?? 0) <= 1) {
+    try {
+      workspace.meta.validateVersion(workspace);
+    } catch (e) {
+      console.info('validateVersion error', e);
+      return MigrationPoint.BlockVersion;
+    }
+  }
+
   // From v2, we depend on blocksuite to check and migrate data.
-  for (const [flavour, version] of Object.entries(blockVersions)) {
+  const blockVersions = workspace.meta.blockVersions;
+  for (const [flavour, version] of Object.entries(blockVersions ?? {})) {
     const schema = workspace.schema.flavourSchemaMap.get(flavour);
     if (schema?.version !== version) {
       return MigrationPoint.BlockVersion;
diff --git a/packages/frontend/component/src/components/block-suite-editor/index.tsx b/packages/frontend/component/src/components/block-suite-editor/index.tsx
index d8b40e2a4..41a4b26c5 100644
--- a/packages/frontend/component/src/components/block-suite-editor/index.tsx
+++ b/packages/frontend/component/src/components/block-suite-editor/index.tsx
@@ -7,14 +7,12 @@ import type { CSSProperties, ReactElement } from 'react';
 import {
   memo,
   Suspense,
-  useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
-import type { FallbackProps } from 'react-error-boundary';
-import { ErrorBoundary } from 'react-error-boundary';
+import { type Map as YMap } from 'yjs';
 
 import { Skeleton } from '../../ui/skeleton';
 import {
@@ -77,6 +75,67 @@ const useBlockElementById = (
   return blockElement;
 };
 
+/**
+ * TODO: Define error to unexpected state together in the future.
+ */
+export class NoPageRootError extends Error {
+  constructor(public page: Page) {
+    super('Page root not found when render editor!');
+
+    // Log info to let sentry collect more message
+    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'
+    );
+    console.info(
+      'NoPageRootError current data: %s',
+      JSON.stringify({
+        expectPageId: page.id,
+        expectGuid: page.spaceDoc.guid,
+        hasExpectSpace,
+        blockSize: blocks.size,
+        havePageBlock,
+      })
+    );
+  }
+}
+
+/**
+ * TODO: Defined async cache to support suspense, instead of reflect symbol to provider persistent error cache.
+ */
+const PAGE_LOAD_KEY = Symbol('PAGE_LOAD');
+const PAGE_ROOT_KEY = Symbol('PAGE_ROOT');
+function usePageRoot(page: Page) {
+  let load$ = Reflect.get(page, PAGE_LOAD_KEY);
+  if (!load$) {
+    load$ = page.load();
+    Reflect.set(page, PAGE_LOAD_KEY, load$);
+  }
+  use(load$);
+
+  if (!page.root) {
+    let root$: Promise<void> | undefined = Reflect.get(page, PAGE_ROOT_KEY);
+    if (!root$) {
+      root$ = new Promise((resolve, reject) => {
+        const disposable = page.slots.rootAdded.once(() => {
+          resolve();
+        });
+        window.setTimeout(() => {
+          disposable.dispose();
+          reject(new NoPageRootError(page));
+        }, 20 * 1000);
+      });
+      Reflect.set(page, PAGE_ROOT_KEY, root$);
+    }
+    use(root$);
+  }
+
+  return page.root;
+}
+
 const BlockSuiteEditorImpl = ({
   mode,
   page,
@@ -86,9 +145,8 @@ const BlockSuiteEditorImpl = ({
   onModeChange,
   style,
 }: EditorProps): ReactElement => {
-  if (!page.loaded) {
-    use(page.waitForLoaded());
-  }
+  usePageRoot(page);
+
   assertExists(page, 'page should not be null');
   const editorRef = useRef<EditorContainer | null>(null);
   if (editorRef.current === null) {
@@ -176,27 +234,7 @@ const BlockSuiteEditorImpl = ({
   );
 };
 
-const BlockSuiteErrorFallback = (
-  props: FallbackProps & ErrorBoundaryProps
-): ReactElement => {
-  return (
-    <div>
-      <h1>Sorry.. there was an error</h1>
-      <div>{props.error.message}</div>
-      <button
-        data-testid="error-fallback-reset-button"
-        onClick={() => {
-          props.onReset?.();
-          props.resetErrorBoundary();
-        }}
-      >
-        Try again
-      </button>
-    </div>
-  );
-};
-
-export const BlockSuiteFallback = memo(function BlockSuiteFallback() {
+export const EditorLoading = memo(function EditorLoading() {
   return (
     <div className={blockSuiteEditorStyle}>
       <Skeleton
@@ -210,21 +248,12 @@ export const BlockSuiteFallback = memo(function BlockSuiteFallback() {
 });
 
 export const BlockSuiteEditor = memo(function BlockSuiteEditor(
-  props: EditorProps & ErrorBoundaryProps
+  props: EditorProps
 ): ReactElement {
   return (
-    <ErrorBoundary
-      fallbackRender={useCallback(
-        (fallbackProps: FallbackProps) => (
-          <BlockSuiteErrorFallback {...fallbackProps} onReset={props.onReset} />
-        ),
-        [props.onReset]
-      )}
-    >
-      <Suspense fallback={<BlockSuiteFallback />}>
-        <BlockSuiteEditorImpl key={props.page.id} {...props} />
-      </Suspense>
-    </ErrorBoundary>
+    <Suspense fallback={<EditorLoading />}>
+      <BlockSuiteEditorImpl key={props.page.id} {...props} />
+    </Suspense>
   );
 });
 
diff --git a/packages/frontend/component/src/components/page-detail-skeleton/index.tsx b/packages/frontend/component/src/components/page-detail-skeleton/index.tsx
index 4b323ff01..889288085 100644
--- a/packages/frontend/component/src/components/page-detail-skeleton/index.tsx
+++ b/packages/frontend/component/src/components/page-detail-skeleton/index.tsx
@@ -1,4 +1,4 @@
-import { BlockSuiteFallback } from '../block-suite-editor';
+import { EditorLoading } from '../block-suite-editor';
 import {
   pageDetailSkeletonStyle,
   pageDetailSkeletonTitleStyle,
@@ -8,7 +8,7 @@ export const PageDetailSkeleton = () => {
   return (
     <div className={pageDetailSkeletonStyle}>
       <div className={pageDetailSkeletonTitleStyle} />
-      <BlockSuiteFallback />
+      <EditorLoading />
     </div>
   );
 };
diff --git a/packages/frontend/core/.webpack/config.ts b/packages/frontend/core/.webpack/config.ts
index 2586b8ce8..15e1c1e46 100644
--- a/packages/frontend/core/.webpack/config.ts
+++ b/packages/frontend/core/.webpack/config.ts
@@ -351,6 +351,8 @@ export const createConfiguration: (
         'process.env.CAPTCHA_SITE_KEY': JSON.stringify(
           process.env.CAPTCHA_SITE_KEY
         ),
+        'process.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_DSN),
+        'process.env.BUILD_TYPE': JSON.stringify(process.env.BUILD_TYPE),
         runtimeConfig: JSON.stringify(runtimeConfig),
       }),
       new CopyPlugin({
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index bf31b4204..fd30a0a01 100644
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -45,6 +45,8 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@react-hookz/web": "^23.1.0",
+    "@sentry/integrations": "^7.83.0",
+    "@sentry/react": "^7.83.0",
     "@toeverything/components": "^0.0.46",
     "@toeverything/theme": "^0.7.20",
     "@vanilla-extract/css": "^1.13.0",
diff --git a/packages/frontend/core/project.json b/packages/frontend/core/project.json
index ae85c4b3a..a3d1d51dd 100644
--- a/packages/frontend/core/project.json
+++ b/packages/frontend/core/project.json
@@ -41,7 +41,7 @@
           "env": "SENTRY_AUTH_TOKEN"
         },
         {
-          "env": "NEXT_PUBLIC_SENTRY_DSN"
+          "env": "SENTRY_DSN"
         },
         {
           "env": "DISTRIBUTION"
diff --git a/packages/frontend/core/src/bootstrap/setup.ts b/packages/frontend/core/src/bootstrap/setup.ts
index 27353eb87..36af51425 100644
--- a/packages/frontend/core/src/bootstrap/setup.ts
+++ b/packages/frontend/core/src/bootstrap/setup.ts
@@ -6,7 +6,15 @@ import {
   rootWorkspacesMetadataAtom,
   workspaceAdaptersAtom,
 } from '@affine/workspace/atom';
+import * as Sentry from '@sentry/react';
 import type { createStore } from 'jotai/vanilla';
+import { useEffect } from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
 
 import { WorkspaceAdapters } from '../adapters/workspace';
 import { performanceLogger } from '../shared';
@@ -51,6 +59,33 @@ export async function setup(store: ReturnType<typeof createStore>) {
   performanceSetupLogger.info('setup global');
   setupGlobal();
 
+  if (window.SENTRY_RELEASE || environment.isDebug) {
+    // https://docs.sentry.io/platforms/javascript/guides/react/#configure
+    Sentry.init({
+      dsn: process.env.SENTRY_DSN,
+      environment: process.env.BUILD_TYPE ?? 'development',
+      integrations: [
+        new Sentry.BrowserTracing({
+          routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+            useEffect,
+            useLocation,
+            useNavigationType,
+            createRoutesFromChildren,
+            matchRoutes
+          ),
+        }),
+        new Sentry.Replay(),
+      ],
+      // Set tracesSampleRate to 1.0 to capture 100%
+      // of transactions for performance monitoring.
+      tracesSampleRate: 1.0,
+    });
+    Sentry.setTags({
+      appVersion: runtimeConfig.appVersion,
+      editorVersion: runtimeConfig.editorVersion,
+    });
+  }
+
   performanceSetupLogger.info('get root workspace meta');
   // do not read `rootWorkspacesMetadataAtom` before migration
   await store.get(rootWorkspacesMetadataAtom);
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary.tsx
deleted file mode 100644
index cd576a0ec..000000000
--- a/packages/frontend/core/src/components/affine/affine-error-boundary.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import type {
-  QueryParamError,
-  Unreachable,
-  WorkspaceNotFoundError,
-} from '@affine/env/constant';
-import { PageNotFoundError } from '@affine/env/constant';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { Button } from '@toeverything/components/button';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-  getCurrentStore,
-} from '@toeverything/infra/atom';
-import { useAtomValue } from 'jotai/react';
-import { Provider } from 'jotai/react';
-import type { ErrorInfo, ReactElement, ReactNode } from 'react';
-import type React from 'react';
-import { Component, useEffect } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-
-import {
-  RecoverableError,
-  type SessionFetchErrorRightAfterLoginOrSignUp,
-} from '../../unexpected-application-state/errors';
-import {
-  errorDescription,
-  errorDetailStyle,
-  errorDivider,
-  errorImage,
-  errorLayout,
-  errorRetryButton,
-  errorTitle,
-} from './affine-error-boundary.css';
-import errorBackground from './error-status.assets.svg';
-
-export type AffineErrorBoundaryProps = React.PropsWithChildren & {
-  height?: number | string;
-};
-
-type AffineError =
-  | QueryParamError
-  | Unreachable
-  | WorkspaceNotFoundError
-  | PageNotFoundError
-  | Error
-  | SessionFetchErrorRightAfterLoginOrSignUp;
-
-interface AffineErrorBoundaryState {
-  error: AffineError | null;
-  canRetryRecoveredError: boolean;
-}
-
-export const DumpInfo = () => {
-  const location = useLocation();
-  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
-  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
-  const currentPageId = useAtomValue(currentPageIdAtom);
-  const path = location.pathname;
-  const query = useParams();
-  useEffect(() => {
-    console.info('DumpInfo', {
-      path,
-      query,
-      currentWorkspaceId,
-      currentPageId,
-      metadata,
-    });
-  }, [path, query, currentWorkspaceId, currentPageId, metadata]);
-  return null;
-};
-
-export class AffineErrorBoundary extends Component<
-  AffineErrorBoundaryProps,
-  AffineErrorBoundaryState
-> {
-  override state: AffineErrorBoundaryState = {
-    error: null,
-    canRetryRecoveredError: true,
-  };
-
-  private readonly handleRecoverableRetry = () => {
-    if (this.state.error instanceof RecoverableError) {
-      if (this.state.error.canRetry()) {
-        this.state.error.retry();
-        this.setState({
-          error: null,
-          canRetryRecoveredError: this.state.error.canRetry(),
-        });
-      } else {
-        document.location.reload();
-      }
-    }
-  };
-
-  private readonly handleRefresh = () => {
-    this.setState({ error: null });
-  };
-
-  static getDerivedStateFromError(
-    error: AffineError
-  ): AffineErrorBoundaryState {
-    return {
-      error,
-      canRetryRecoveredError:
-        error instanceof RecoverableError ? error.canRetry() : true,
-    };
-  }
-
-  override componentDidCatch(error: AffineError, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  override render(): ReactNode {
-    if (this.state.error) {
-      let errorDetail: ReactElement | null = null;
-      const error = this.state.error;
-      if (error instanceof PageNotFoundError) {
-        errorDetail = (
-          <>
-            <h1>Sorry.. there was an error</h1>
-            <>
-              <span> Page error </span>
-              <span>
-                Cannot find page {error.pageId} in workspace{' '}
-                {error.workspace.id}
-              </span>
-            </>
-          </>
-        );
-      } else if (error instanceof RecoverableError) {
-        const retryButtonDesc = this.state.canRetryRecoveredError
-          ? 'Refetch'
-          : 'Reload';
-        errorDetail = (
-          <>
-            <h1 className={errorTitle}>Sorry.. there was an error</h1>
-            <span className={errorDescription}> {error.message} </span>
-            <span className={errorDescription}>
-              If you are still experiencing this issue, please{' '}
-              <a
-                style={{ color: 'var(--affine-primary-color)' }}
-                href="https://community.affine.pro"
-                target="__blank"
-              >
-                contact us through the community.
-              </a>
-            </span>
-            <Button
-              className={errorRetryButton}
-              onClick={this.handleRecoverableRetry}
-              type="primary"
-            >
-              {retryButtonDesc}
-            </Button>
-          </>
-        );
-      } else {
-        errorDetail = (
-          <>
-            <h1 className={errorTitle}>Sorry.. there was an error</h1>
-            <code className={errorDescription}>
-              {error.message ?? error.toString()}
-            </code>
-            <Button
-              onClick={this.handleRefresh}
-              className={errorRetryButton}
-              type="primary"
-            >
-              Refresh
-            </Button>
-          </>
-        );
-      }
-      return (
-        <div className={errorLayout} style={{ height: this.props.height }}>
-          <div className={errorDetailStyle}>{errorDetail}</div>
-          <span className={errorDivider} />
-          <div
-            className={errorImage}
-            style={{ backgroundImage: `url(${errorBackground})` }}
-          />
-          <Provider key="JotaiProvider" store={getCurrentStore()}>
-            <DumpInfo />
-          </Provider>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts
new file mode 100644
index 000000000..d1026be77
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.css.ts
@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const viewport = style({
+  height: '100%',
+  width: '100%',
+});
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx
new file mode 100644
index 000000000..864d809db
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/affine-error-fallback.tsx
@@ -0,0 +1,53 @@
+import { getCurrentStore } from '@toeverything/infra/atom';
+import { Provider } from 'jotai/react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import * as styles from './affine-error-fallback.css';
+import {
+  ERROR_REFLECT_KEY,
+  type FallbackProps,
+} from './error-basic/fallback-creator';
+import { DumpInfo } from './error-basic/info-logger';
+import { AnyErrorFallback } from './error-fallbacks/any-error-fallback';
+import { NoPageRootFallback } from './error-fallbacks/no-page-root-fallback';
+import { PageNotFoundDetail } from './error-fallbacks/page-not-found-fallback';
+import { RecoverableErrorFallback } from './error-fallbacks/recoverable-error-fallback';
+
+/**
+ * Register all fallback components here.
+ * If have new one just add it to the set.
+ */
+const fallbacks = new Set([
+  PageNotFoundDetail,
+  RecoverableErrorFallback,
+  NoPageRootFallback,
+]);
+
+function getErrorFallbackComponent(error: any): FC<FallbackProps> {
+  for (const Component of fallbacks) {
+    const ErrorConstructor = Reflect.get(Component, ERROR_REFLECT_KEY);
+    if (ErrorConstructor && error instanceof ErrorConstructor) {
+      return Component as FC<FallbackProps>;
+    }
+  }
+  return AnyErrorFallback;
+}
+
+export interface AffineErrorFallbackProps extends FallbackProps {
+  height?: number | string;
+}
+
+export const AffineErrorFallback: FC<AffineErrorFallbackProps> = props => {
+  const { error, resetError, height } = props;
+  const Component = useMemo(() => getErrorFallbackComponent(error), [error]);
+
+  return (
+    <div className={styles.viewport} style={{ height }}>
+      <Component error={error} resetError={resetError} />
+      <Provider key="JotaiProvider" store={getCurrentStore()}>
+        <DumpInfo error={error} />
+      </Provider>
+    </div>
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/error-status.assets.svg b/packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/404-status.assets.svg
similarity index 100%
rename from packages/frontend/core/src/components/affine/error-status.assets.svg
rename to packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/404-status.assets.svg
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/500-status.assets.svg b/packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/500-status.assets.svg
new file mode 100644
index 000000000..69823de35
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-assets/500-status.assets.svg
@@ -0,0 +1,43 @@
+<svg width="490" height="242" viewBox="0 0 490 242" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.5098 155.545C16.4625 163.027 18.0723 169.655 21.3393 175.432C24.6064 181.208 29.1282 185.73 34.9047 188.997C40.6812 192.264 47.3337 193.898 54.8621 193.898C63.2428 193.898 70.6765 191.838 77.1632 187.719C83.65 183.599 88.7399 177.989 92.4331 170.886C96.1263 163.784 97.9965 155.735 98.0439 146.739C98.0912 137.364 96.1026 129.196 92.078 122.236C88.1007 115.228 82.7977 109.807 76.1689 105.972C69.5875 102.089 62.3905 100.148 54.578 100.148C48.7541 100.148 43.4274 101.166 38.5979 103.202C33.7683 105.19 29.5306 107.866 25.8848 111.227H25.3166L32.703 51H93.2143" stroke="black" stroke-width="2"/>
+  <ellipse cx="94.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="16.4026" cy="155.889" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="32.4026" cy="50.8894" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <ellipse cx="25.4026" cy="110.889" rx="3.89381" ry="3.88938" fill="#121212"/>
+  <path d="M151.592 59.1235L275.951 183.342" stroke="#E3E2E4"/>
+  <rect x="151.626" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
+  <path d="M275.573 121.465C276.129 117.824 276.417 114.095 276.417 110.299C276.417 69.7024 243.469 36.792 202.826 36.792C162.183 36.792 129.235 69.7024 129.235 110.299C129.235 150.897 162.183 183.807 202.826 183.807C206.465 183.807 210.041 183.543 213.539 183.034" stroke="#E3E2E4"/>
+  <path d="M213.539 182.964C217.184 183.519 220.917 183.807 224.717 183.807C265.36 183.807 298.308 150.897 298.308 110.299C298.308 69.7024 265.36 36.792 224.717 36.792C184.074 36.792 151.126 69.7024 151.126 110.299C151.126 114.095 151.414 117.824 151.97 121.465" stroke="#E3E2E4"/>
+  <path d="M151.434 121.465C150.924 124.958 150.66 128.531 150.66 132.166C150.66 172.763 183.608 205.673 224.251 205.673C264.894 205.673 297.842 172.763 297.842 132.166C297.842 91.5686 264.894 58.6582 224.251 58.6582C220.613 58.6582 217.036 58.922 213.539 59.4314" stroke="#E3E2E4"/>
+  <path d="M213.539 59.4314C210.041 58.922 206.465 58.6582 202.826 58.6582C162.183 58.6582 129.235 91.5686 129.235 132.166C129.235 172.763 162.183 205.673 202.826 205.673C243.469 205.673 276.417 172.763 276.417 132.166C276.417 128.531 276.153 124.958 275.643 121.465" stroke="#E3E2E4"/>
+  <path d="M275.951 59.1235L151.592 183.342" stroke="#E3E2E4"/>
+  <path d="M151.126 121.465H275.951" stroke="#E3E2E4"/>
+  <path d="M213.539 58.6582V183.807" stroke="#E3E2E4"/>
+  <ellipse cx="275.951" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="275.951" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="275.951" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="151.592" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="213.539" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <path d="M338.583 59.1235L462.943 183.342" stroke="#E3E2E4"/>
+  <rect x="338.617" y="59.1582" width="124.291" height="124.149" stroke="#E3E2E4"/>
+  <path d="M462.565 121.465C463.12 117.824 463.408 114.095 463.408 110.299C463.408 69.7024 430.46 36.792 389.817 36.792C349.174 36.792 316.226 69.7024 316.226 110.299C316.226 150.897 349.174 183.807 389.817 183.807C393.456 183.807 397.033 183.543 400.53 183.034" stroke="#E3E2E4"/>
+  <path d="M400.53 182.964C404.175 183.519 407.908 183.807 411.708 183.807C452.351 183.807 485.299 150.897 485.299 110.299C485.299 69.7024 452.351 36.792 411.708 36.792C371.065 36.792 338.117 69.7024 338.117 110.299C338.117 114.095 338.405 117.824 338.961 121.465" stroke="#E3E2E4"/>
+  <path d="M338.425 121.465C337.915 124.958 337.651 128.531 337.651 132.166C337.651 172.763 370.599 205.673 411.242 205.673C451.886 205.673 484.833 172.763 484.833 132.166C484.833 91.5686 451.886 58.6582 411.242 58.6582C407.604 58.6582 404.027 58.922 400.53 59.4314" stroke="#E3E2E4"/>
+  <path d="M400.53 59.4314C397.033 58.922 393.456 58.6582 389.817 58.6582C349.174 58.6582 316.226 91.5686 316.226 132.166C316.226 172.763 349.174 205.673 389.817 205.673C430.46 205.673 463.408 172.763 463.408 132.166C463.408 128.531 463.144 124.958 462.634 121.465" stroke="#E3E2E4"/>
+  <path d="M462.943 59.1235L338.583 183.342" stroke="#E3E2E4"/>
+  <path d="M338.117 121.465H462.943" stroke="#E3E2E4"/>
+  <path d="M400.53 58.6582V183.807" stroke="#E3E2E4"/>
+  <ellipse cx="462.942" cy="121.465" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="462.942" cy="59.1233" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="462.942" cy="183.807" rx="3.72614" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="121.465" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="338.583" cy="59.1233" rx="3.72613" ry="3.7219" fill="#121212"/>
+  <ellipse cx="400.53" cy="183.807" rx="3.72613" ry="3.7219" fill="#121212"/>
+</svg>
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary.css.ts b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts
similarity index 89%
rename from packages/frontend/core/src/components/affine/affine-error-boundary.css.ts
rename to packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts
index 5999d7ec1..5586afb01 100644
--- a/packages/frontend/core/src/components/affine/affine-error-boundary.css.ts
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.css.ts
@@ -6,6 +6,7 @@ export const errorLayout = style({
   alignItems: 'center',
   height: '100%',
   width: '100%',
+  gap: '20px',
 });
 
 export const errorDetailStyle = style({
@@ -24,15 +25,15 @@ export const errorImage = style({
   height: '178px',
   maxWidth: '400px',
   flexGrow: 1,
+  backgroundSize: 'cover',
 });
 
 export const errorDescription = style({
   marginTop: '24px',
 });
 
-export const errorRetryButton = style({
+export const errorFooter = style({
   marginTop: '24px',
-  width: '94px',
 });
 
 export const errorDivider = style({
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
new file mode 100644
index 000000000..2aa22a1f7
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/error-detail.tsx
@@ -0,0 +1,106 @@
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+  useState,
+} from 'react';
+
+import imageUrlFor404 from '../error-assets/404-status.assets.svg';
+import imageUrlFor500 from '../error-assets/500-status.assets.svg';
+import * as styles from './error-detail.css';
+
+export enum ErrorStatus {
+  NotFound = 404,
+  Unexpected = 500,
+}
+
+export interface ErrorDetailProps extends PropsWithChildren {
+  status?: ErrorStatus;
+  direction?: 'column' | 'row';
+  title: string;
+  description: ReactNode | Array<ReactNode>;
+  buttonText?: string;
+  onButtonClick?: () => void | Promise<void>;
+  resetError?: () => void;
+  withoutImage?: boolean;
+}
+
+const imageMap = new Map([
+  [ErrorStatus.NotFound, imageUrlFor404],
+  [ErrorStatus.Unexpected, imageUrlFor500],
+]);
+
+/**
+ * TODO: Unify with NotFoundPage.
+ */
+export const ErrorDetail: FC<ErrorDetailProps> = props => {
+  const {
+    status = ErrorStatus.Unexpected,
+    direction = 'row',
+    description,
+    onButtonClick,
+    resetError,
+    withoutImage,
+  } = props;
+  const descriptions = Array.isArray(description) ? description : [description];
+  const [isBtnLoading, setBtnLoading] = useState(false);
+  const t = useAFFiNEI18N();
+
+  const onBtnClick = useAsyncCallback(async () => {
+    try {
+      setBtnLoading(true);
+      await onButtonClick?.();
+      resetError?.(); // Only reset when retry success.
+    } finally {
+      setBtnLoading(false);
+    }
+  }, [onButtonClick, resetError]);
+
+  return (
+    <div className={styles.errorLayout} style={{ flexDirection: direction }}>
+      <div className={styles.errorDetailStyle}>
+        <h1 className={styles.errorTitle}>{props.title}</h1>
+        {descriptions.map((item, i) => (
+          <p key={i} className={styles.errorDescription}>
+            {item}
+          </p>
+        ))}
+        <div className={styles.errorFooter}>
+          <Button
+            type="primary"
+            onClick={onBtnClick}
+            loading={isBtnLoading}
+            size="extraLarge"
+          >
+            {props.buttonText ?? t['com.affine.error.retry']()}
+          </Button>
+        </div>
+      </div>
+      {withoutImage ? null : (
+        <div
+          className={styles.errorImage}
+          style={{ backgroundImage: `url(${imageMap.get(status)})` }}
+        />
+      )}
+    </div>
+  );
+};
+
+export function ContactUS() {
+  return (
+    <Trans>
+      If you are still experiencing this issue, please{' '}
+      <a
+        style={{ color: 'var(--affine-primary-color)' }}
+        href="https://community.affine.pro"
+        target="__blank"
+      >
+        contact us through the community.
+      </a>
+    </Trans>
+  );
+}
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/fallback-creator.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/fallback-creator.tsx
new file mode 100644
index 000000000..062deac3d
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/fallback-creator.tsx
@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+
+export interface FallbackProps<T extends Error = Error> {
+  error: T;
+  resetError: () => void;
+}
+
+export const ERROR_REFLECT_KEY = Symbol('ERROR_REFLECT_KEY');
+
+export function createErrorFallback<T extends Error>(
+  ErrorConstructor: abstract new (...args: any[]) => T,
+  Component: FC<FallbackProps<T>>
+): FC<FallbackProps<T>> {
+  Reflect.set(Component, ERROR_REFLECT_KEY, ErrorConstructor);
+  return Component;
+}
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx
new file mode 100644
index 000000000..ae8004d59
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx
@@ -0,0 +1,31 @@
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import {
+  currentPageIdAtom,
+  currentWorkspaceIdAtom,
+} from '@toeverything/infra/atom';
+import { useAtomValue } from 'jotai/react';
+import { useEffect } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+
+export interface DumpInfoProps {
+  error: any;
+}
+
+export const DumpInfo = (_props: DumpInfoProps) => {
+  const location = useLocation();
+  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
+  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
+  const currentPageId = useAtomValue(currentPageIdAtom);
+  const path = location.pathname;
+  const query = useParams();
+  useEffect(() => {
+    console.info('DumpInfo', {
+      path,
+      query,
+      currentWorkspaceId,
+      currentPageId,
+      metadata,
+    });
+  }, [path, query, currentWorkspaceId, currentPageId, metadata]);
+  return null;
+};
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx
new file mode 100644
index 000000000..759af6097
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/any-error-fallback.tsx
@@ -0,0 +1,26 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { type FC, useCallback } from 'react';
+
+import { ErrorDetail } from '../error-basic/error-detail';
+import type { FallbackProps } from '../error-basic/fallback-creator';
+
+/**
+ * TODO: Support reload and retry two reset actions in page error and area error.
+ */
+export const AnyErrorFallback: FC<FallbackProps> = props => {
+  const { error } = props;
+  const t = useAFFiNEI18N();
+
+  const reloadPage = useCallback(() => {
+    document.location.reload();
+  }, []);
+
+  return (
+    <ErrorDetail
+      title={t['com.affine.error.unexpected-error.title']()}
+      resetError={reloadPage}
+      buttonText={t['com.affine.error.reload']()}
+      description={error.message ?? error.toString()}
+    />
+  );
+};
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
new file mode 100644
index 000000000..88bbe9d5e
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/no-page-root-fallback.tsx
@@ -0,0 +1,21 @@
+import { NoPageRootError } from '@affine/component/block-suite-editor';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import { ContactUS, ErrorDetail } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const NoPageRootFallback = createErrorFallback(
+  NoPageRootError,
+  props => {
+    const { resetError } = props;
+    const t = useAFFiNEI18N();
+
+    return (
+      <ErrorDetail
+        title={t['com.affine.error.no-page-root.title']()}
+        description={<ContactUS />}
+        resetError={resetError}
+      />
+    );
+  }
+);
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx
new file mode 100644
index 000000000..2c8ce3a70
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/page-not-found-fallback.tsx
@@ -0,0 +1,30 @@
+import { PageNotFoundError } from '@affine/env/constant';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback } from 'react';
+
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '../../../../hooks/use-navigate-helper';
+import { ErrorDetail, ErrorStatus } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const PageNotFoundDetail = createErrorFallback(PageNotFoundError, () => {
+  const t = useAFFiNEI18N();
+  const { jumpToIndex } = useNavigateHelper();
+
+  const onBtnClick = useCallback(
+    () => jumpToIndex(RouteLogic.REPLACE),
+    [jumpToIndex]
+  );
+
+  return (
+    <ErrorDetail
+      title={t['com.affine.notFoundPage.title']()}
+      description={t['404.hint']()}
+      buttonText={t['404.back']()}
+      onButtonClick={onBtnClick}
+      status={ErrorStatus.NotFound}
+    />
+  );
+});
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx
new file mode 100644
index 000000000..5c872f71d
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-fallbacks/recoverable-error-fallback.tsx
@@ -0,0 +1,41 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useCallback, useMemo, useState } from 'react';
+
+import { RecoverableError } from '../../../../unexpected-application-state/errors';
+import { ContactUS, ErrorDetail } from '../error-basic/error-detail';
+import { createErrorFallback } from '../error-basic/fallback-creator';
+
+export const RecoverableErrorFallback = createErrorFallback(
+  RecoverableError,
+  props => {
+    const { error, resetError } = props;
+    const t = useAFFiNEI18N();
+    const [count, rerender] = useState(0);
+
+    const canRetry = error.canRetry();
+    const buttonDesc = useMemo(() => {
+      if (canRetry) {
+        return t['com.affine.error.refetch']();
+      }
+      return t['com.affine.error.reload']();
+    }, [canRetry, t]);
+    const onRetry = useCallback(async () => {
+      if (canRetry) {
+        rerender(count + 1);
+        await error.retry();
+      } else {
+        document.location.reload();
+      }
+    }, [error, count, canRetry]);
+
+    return (
+      <ErrorDetail
+        title={t['com.affine.error.unexpected-error.title']()}
+        resetError={resetError}
+        buttonText={buttonDesc}
+        onButtonClick={onRetry}
+        description={[error.message, <ContactUS key="contact-us" />]}
+      />
+    );
+  }
+);
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/error-status.assets.svg b/packages/frontend/core/src/components/affine/affine-error-boundary/error-status.assets.svg
new file mode 100644
index 000000000..f996812af
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/error-status.assets.svg
@@ -0,0 +1,25 @@
+<svg width="402" height="178" viewBox="0 0 402 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M93.7434 129.308H1L71.7965 15.1021V167.142" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
+  <ellipse cx="71.4426" cy="14.7483" rx="3.89381" ry="3.88938" fill="#121212" />
+  <ellipse cx="93.3894" cy="129.308" rx="3.89381" ry="3.88938" fill="#121212" />
+  <path d="M140.357 27.1235L264.717 151.342" stroke="#E3E2E4" />
+  <rect x="140.392" y="27.1582" width="124.291" height="124.149" stroke="#E3E2E4" />
+  <path d="M264.339 89.4652C264.895 85.8242 265.183 82.0954 265.183 78.2995C265.183 37.7024 232.235 4.79199 191.592 4.79199C150.948 4.79199 118 37.7024 118 78.2995C118 118.897 150.948 151.807 191.592 151.807C195.23 151.807 198.807 151.543 202.304 151.034" stroke="#E3E2E4" />
+  <path d="M202.304 150.964C205.949 151.519 209.682 151.807 213.483 151.807C254.126 151.807 287.074 118.897 287.074 78.2995C287.074 37.7024 254.126 4.79199 213.483 4.79199C172.839 4.79199 139.892 37.7024 139.892 78.2995C139.892 82.0955 140.18 85.8242 140.735 89.4652" stroke="#E3E2E4" />
+  <path d="M140.2 89.4652C139.69 92.9584 139.426 96.5312 139.426 100.166C139.426 140.763 172.374 173.673 213.017 173.673C253.66 173.673 286.608 140.763 286.608 100.166C286.608 59.5686 253.66 26.6582 213.017 26.6582C209.378 26.6582 205.801 26.922 202.304 27.4314" stroke="#E3E2E4" />
+  <path d="M202.304 27.4314C198.807 26.922 195.23 26.6582 191.592 26.6582C150.948 26.6582 118 59.5686 118 100.166C118 140.763 150.948 173.673 191.592 173.673C232.235 173.673 265.183 140.763 265.183 100.166C265.183 96.5312 264.919 92.9584 264.409 89.4652" stroke="#E3E2E4" />
+  <path d="M264.717 27.1235L140.357 151.342" stroke="#E3E2E4" />
+  <path d="M139.892 89.4653H264.717" stroke="#E3E2E4" />
+  <path d="M202.304 26.6582V151.807" stroke="#E3E2E4" />
+  <ellipse cx="264.717" cy="89.4651" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="264.717" cy="27.1233" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="264.717" cy="151.807" rx="3.72614" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="89.4651" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="140.357" cy="27.1233" rx="3.72613" ry="3.7219" fill="#121212" />
+  <ellipse cx="202.304" cy="151.807" rx="3.72613" ry="3.7219" fill="#121212" />
+  <path d="M401 127.187H308.257L379.053 12.9805V165.02" stroke="#121212" stroke-width="2" stroke-linecap="square" stroke-linejoin="bevel" />
+  <ellipse cx="379.407" cy="127.187" rx="3.89381" ry="3.88938" fill="#121212" />
+</svg>
diff --git a/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx b/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx
new file mode 100644
index 000000000..9ee5e1cc5
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/affine-error-boundary/index.tsx
@@ -0,0 +1,34 @@
+import { ErrorBoundary } from '@sentry/react';
+import type { FC, PropsWithChildren } from 'react';
+import { useCallback } from 'react';
+
+import { AffineErrorFallback } from './affine-error-fallback';
+import { type FallbackProps } from './error-basic/fallback-creator';
+
+export { type FallbackProps } from './error-basic/fallback-creator';
+
+export interface AffineErrorBoundaryProps extends PropsWithChildren {
+  height?: number | string;
+}
+
+/**
+ * TODO: Unify with SWRErrorBoundary
+ */
+export const AffineErrorBoundary: FC<AffineErrorBoundaryProps> = props => {
+  const fallbackRender = useCallback(
+    (fallbackProps: FallbackProps) => {
+      return <AffineErrorFallback {...fallbackProps} height={props.height} />;
+    },
+    [props.height]
+  );
+
+  const onError = useCallback((error: Error, componentStack: string) => {
+    console.error('Uncaught error:', error, componentStack);
+  }, []);
+
+  return (
+    <ErrorBoundary fallback={fallbackRender} onError={onError}>
+      {props.children}
+    </ErrorBoundary>
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/any-error-boundary/index.tsx b/packages/frontend/core/src/components/affine/any-error-boundary/index.tsx
deleted file mode 100644
index 35a72366c..000000000
--- a/packages/frontend/core/src/components/affine/any-error-boundary/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { ReactElement } from 'react';
-import type { FallbackProps } from 'react-error-boundary';
-
-export const AnyErrorBoundary = (props: FallbackProps): ReactElement => {
-  return (
-    <div>
-      <p>Something went wrong:</p>
-      <p>{props.error.toString()}</p>
-    </div>
-  );
-};
diff --git a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
index 55926dbb3..5901dce95 100644
--- a/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
+++ b/packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx
@@ -29,7 +29,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
 
 import { openSettingModalAtom } from '../../../atoms';
 import type { CheckedUser } from '../../../hooks/affine/use-current-user';
@@ -39,7 +38,7 @@ import { useMemberCount } from '../../../hooks/affine/use-member-count';
 import { type Member, useMembers } from '../../../hooks/affine/use-members';
 import { useRevokeMemberPermission } from '../../../hooks/affine/use-revoke-member-permission';
 import { useUserSubscription } from '../../../hooks/use-subscription';
-import { AnyErrorBoundary } from '../any-error-boundary';
+import { AffineErrorBoundary } from '../affine-error-boundary';
 import * as style from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
@@ -362,10 +361,10 @@ export const MembersPanel = (props: MembersPanelProps): ReactElement | null => {
     return <MembersPanelLocal />;
   }
   return (
-    <ErrorBoundary FallbackComponent={AnyErrorBoundary}>
+    <AffineErrorBoundary>
       <Suspense>
         <CloudWorkspaceMembersPanel {...props} />
       </Suspense>
-    </ErrorBoundary>
+    </AffineErrorBoundary>
   );
 };
diff --git a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
index 220fe3ef2..8eb7150e8 100644
--- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
@@ -1,7 +1,7 @@
 import { Scrollable } from '@affine/component';
 import {
   BlockSuiteEditor,
-  BlockSuiteFallback,
+  EditorLoading,
 } from '@affine/component/block-suite-editor';
 import type { PageMode } from '@affine/core/atoms';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -147,7 +147,7 @@ const HistoryEditorPreview = ({
           onModeChange={onModeChange}
         />
       ) : (
-        <BlockSuiteFallback />
+        <EditorLoading />
       )}
     </div>
   );
@@ -410,7 +410,7 @@ export const PageHistoryModal = ({
 
   return (
     <ModalContainer onOpenChange={onOpenChange} open={open}>
-      <Suspense fallback={<BlockSuiteFallback />}>
+      <Suspense fallback={<EditorLoading />}>
         <PageHistoryManager
           onClose={onClose}
           pageId={pageId}
diff --git a/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts b/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts
index 8cca9f637..2e83b1499 100644
--- a/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts
+++ b/packages/frontend/core/src/components/workspace-upgrade/upgrade.css.ts
@@ -19,6 +19,7 @@ export const upgradeTips = style({
   fontStyle: 'normal',
   fontWeight: '400',
   lineHeight: '20px',
+  textAlign: 'center',
 });
 
 const rotate = keyframes({
diff --git a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx b/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
index ff2afad53..e132926ba 100644
--- a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
+++ b/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
@@ -44,7 +44,7 @@ interface WorkspaceUpgradeProps {
 export const WorkspaceUpgrade = function WorkspaceUpgrade(
   props: WorkspaceUpgradeProps
 ) {
-  const [upgradeState, , upgradeWorkspace, newWorkspaceId] =
+  const [upgradeState, error, upgradeWorkspace, newWorkspaceId] =
     useUpgradeWorkspace(props.migration);
   const t = useAFFiNEI18N();
 
@@ -75,7 +75,7 @@ export const WorkspaceUpgrade = function WorkspaceUpgrade(
       <div className={styles.upgradeBox}>
         <AffineShapeIcon width={180} height={180} />
         <p className={styles.upgradeTips}>
-          {t[UPGRADE_TIPS_KEYS[upgradeState]]()}
+          {error ? error.message : t[UPGRADE_TIPS_KEYS[upgradeState]]()}
         </p>
         <Button
           data-testid="upgrade-workspace-button"
diff --git a/packages/frontend/core/src/pages/workspace/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page.tsx
index 58e45519e..bc8cd4996 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page.tsx
@@ -113,7 +113,6 @@ export const DetailPage = (): ReactElement => {
   const currentSyncEngineStatus = useCurrentSyncEngineStatus();
   const currentPageId = useAtomValue(currentPageIdAtom);
   const [page, setPage] = useState<Page | null>(null);
-  const [pageLoaded, setPageLoaded] = useState<boolean>(false);
 
   // load page by current page id
   useEffect(() => {
@@ -158,30 +157,7 @@ export const DetailPage = (): ReactElement => {
     return;
   }, [currentSyncEngineStatus, navigate, page]);
 
-  // wait for page to be loaded
-  useEffect(() => {
-    if (page) {
-      if (!page.isEmpty) {
-        setPageLoaded(true);
-      } else {
-        setPageLoaded(false);
-        // call waitForLoaded to trigger load
-        page
-          .load(() => {})
-          .catch(() => {
-            // do nothing
-          });
-        return page.slots.ready.on(() => {
-          setPageLoaded(true);
-        }).dispose;
-      }
-    } else {
-      setPageLoaded(false);
-    }
-    return;
-  }, [page]);
-
-  if (!currentPageId || !page || !pageLoaded) {
+  if (!currentPageId || !page) {
     return <PageDetailSkeleton key="current-page-is-null" />;
   }
 
@@ -218,8 +194,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>
   );
diff --git a/packages/frontend/core/src/pages/workspace/index.tsx b/packages/frontend/core/src/pages/workspace/index.tsx
index ee96ec951..a9b20a7f4 100644
--- a/packages/frontend/core/src/pages/workspace/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/index.tsx
@@ -8,6 +8,7 @@ import {
 import type { MigrationPoint } from '@toeverything/infra/blocksuite';
 import {
   checkWorkspaceCompatibility,
+  fixWorkspaceVersion,
   guidCompatibilityFix,
 } from '@toeverything/infra/blocksuite';
 import { useSetAtom } from 'jotai';
@@ -54,6 +55,7 @@ export const loader: LoaderFunction = async args => {
   workspaceLoaderLogger.info('workspace loaded');
 
   guidCompatibilityFix(workspace.doc);
+  fixWorkspaceVersion(workspace.doc);
   return checkWorkspaceCompatibility(workspace);
 };
 
@@ -73,7 +75,7 @@ export const Component = (): ReactElement => {
 
   const migration = useLoaderData() as MigrationPoint | undefined;
   return (
-    <AffineErrorBoundary height="100vh">
+    <AffineErrorBoundary key={params.workspaceId} height="100vh">
       <WorkspaceLayout migration={migration}>
         <Outlet />
       </WorkspaceLayout>
diff --git a/packages/frontend/core/src/router.ts b/packages/frontend/core/src/router.ts
index 3a974858d..50a2ba76c 100644
--- a/packages/frontend/core/src/router.ts
+++ b/packages/frontend/core/src/router.ts
@@ -1,5 +1,6 @@
+import * as Sentry from '@sentry/react';
 import type { RouteObject } from 'react-router-dom';
-import { createBrowserRouter } from 'react-router-dom';
+import { createBrowserRouter as reactRouterCreateBrowserRouter } from 'react-router-dom';
 
 export const routes = [
   {
@@ -70,6 +71,9 @@ export const routes = [
   },
 ] satisfies [RouteObject, ...RouteObject[]];
 
+const createBrowserRouter = Sentry.wrapCreateBrowserRouter(
+  reactRouterCreateBrowserRouter
+);
 export const router = createBrowserRouter(routes, {
   future: {
     v7_normalizeFormMethod: true,
diff --git a/packages/frontend/core/src/unexpected-application-state/errors.ts b/packages/frontend/core/src/unexpected-application-state/errors.ts
index 137bb0617..9fe04fd1d 100644
--- a/packages/frontend/core/src/unexpected-application-state/errors.ts
+++ b/packages/frontend/core/src/unexpected-application-state/errors.ts
@@ -5,7 +5,7 @@ export abstract class RecoverableError extends Error {
     return this.ttl > 0;
   }
 
-  abstract retry(): void;
+  abstract retry(): void | Promise<void>;
 }
 
 // the first session request failed after login or signup succeed.
@@ -24,8 +24,6 @@ export class SessionFetchErrorRightAfterLoginOrSignUp extends RecoverableError {
     }
     try {
       this.onRetry();
-    } catch (e) {
-      console.error('Retry error', e);
     } finally {
       this.ttl--;
     }
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index bbbb19b8c..22f5d6072 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -689,7 +689,7 @@
   "com.affine.new_edgeless": "New Edgeless",
   "com.affine.new_import": "Import",
   "com.affine.notFoundPage.backButton": "Back Home",
-  "com.affine.notFoundPage.title": "404 - Page Not Found",
+  "com.affine.notFoundPage.title": "Page Not Found",
   "com.affine.onboarding.title1": "Hyper merged whiteboard and docs",
   "com.affine.onboarding.title2": "Intuitive & robust block-based editing",
   "com.affine.onboarding.videoDescription1": "Easily switch between Page mode for structured document creation and Whiteboard mode for the freeform visual expression of creative ideas.",
@@ -963,6 +963,13 @@
   "com.affine.workspaceType.offline": "Available Offline",
   "com.affine.write_with_a_blank_page": "Write with a blank page",
   "com.affine.yesterday": "Yesterday",
+  "com.affine.error.retry": "Refresh",
+  "com.affine.error.refetch": "Refetch",
+  "com.affine.error.reload": "Reload",
+  "com.affine.error.page-not-found.title": "Refresh",
+  "com.affine.error.unexpected-error.title": "Something is wrong...",
+  "com.affine.error.contact.description": "If you are still experiencing this issue, please <1>contact us through the community.</1>",
+  "com.affine.error.no-page-root.title": "Page content is missing",
   "core": "core",
   "dark": "Dark",
   "emptyAllPages": "Click on the <1>$t(New Page)</1> button to create your first page.",
diff --git a/tests/storybook/project.json b/tests/storybook/project.json
index 50ef65e2a..d4364d796 100644
--- a/tests/storybook/project.json
+++ b/tests/storybook/project.json
@@ -31,7 +31,7 @@
           "env": "SENTRY_AUTH_TOKEN"
         },
         {
-          "env": "NEXT_PUBLIC_SENTRY_DSN"
+          "env": "SENTRY_DSN"
         },
         {
           "env": "DISTRIBUTION"
diff --git a/tools/@types/env/__all.d.ts b/tools/@types/env/__all.d.ts
index 57c735f09..129df6096 100644
--- a/tools/@types/env/__all.d.ts
+++ b/tools/@types/env/__all.d.ts
@@ -56,6 +56,11 @@ declare global {
   var runtimeConfig: RuntimeConfig;
   // eslint-disable-next-line no-var
   var $AFFINE_SETUP: boolean | undefined;
+  /**
+   * Inject by https://www.npmjs.com/package/@sentry/webpack-plugin
+   */
+  // eslint-disable-next-line no-var
+  var SENTRY_RELEASE: { id: string } | undefined;
 }
 
 declare module '@blocksuite/store' {
diff --git a/yarn.lock b/yarn.lock
index b5355fd19..2bc871517 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -357,6 +357,8 @@ __metadata:
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-select": "npm:^2.0.0"
     "@react-hookz/web": "npm:^23.1.0"
+    "@sentry/integrations": "npm:^7.83.0"
+    "@sentry/react": "npm:^7.83.0"
     "@sentry/webpack-plugin": "npm:^2.8.0"
     "@svgr/webpack": "npm:^8.1.0"
     "@swc/core": "npm:^1.3.93"
@@ -10850,6 +10852,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/tracing@npm:7.83.0":
+  version: 7.83.0
+  resolution: "@sentry-internal/tracing@npm:7.83.0"
+  dependencies:
+    "@sentry/core": "npm:7.83.0"
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+  checksum: 7f5d2a2490f15b907c57fbc96ad3fa34a63f585433e0dfefa82400d363004ddff1e5e3b5c40436679b80a8f2afb7cb18f2802d7134ae44f607f0104a352811c3
+  languageName: node
+  linkType: hard
+
+"@sentry/browser@npm:7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/browser@npm:7.83.0"
+  dependencies:
+    "@sentry-internal/tracing": "npm:7.83.0"
+    "@sentry/core": "npm:7.83.0"
+    "@sentry/replay": "npm:7.83.0"
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+  checksum: a4d2181dc36d7946b3af133bf9249be3bb3bd6d3eb34c70352c42445416934a98cb537ed7b827b77277ce60cb902e81aa86b5d94bf8de036aedf1f54d301ba78
+  languageName: node
+  linkType: hard
+
 "@sentry/bundler-plugin-core@npm:2.10.1":
   version: 2.10.1
   resolution: "@sentry/bundler-plugin-core@npm:2.10.1"
@@ -10891,6 +10917,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/core@npm:7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/core@npm:7.83.0"
+  dependencies:
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+  checksum: c75cca15b750180d73975309d44ff3309a369b60f95c1c01f679b868a3eca43ace768d026aa11333c7cc1bc147a947f5f2b507ec72803033e4e3f87ea895cf7b
+  languageName: node
+  linkType: hard
+
+"@sentry/integrations@npm:^7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/integrations@npm:7.83.0"
+  dependencies:
+    "@sentry/core": "npm:7.83.0"
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+    localforage: "npm:^1.8.1"
+  checksum: 6f614f4f5bb56cdfa7e493b2546ddbd9a45a867fd61e0cf46f5c5af22b74f82b6a8a50c86bab76c9c828c03242652eef72d24a4235c2584e7a0fac58821b7c3d
+  languageName: node
+  linkType: hard
+
 "@sentry/node@npm:^7.60.0":
   version: 7.81.1
   resolution: "@sentry/node@npm:7.81.1"
@@ -10904,6 +10952,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/react@npm:^7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/react@npm:7.83.0"
+  dependencies:
+    "@sentry/browser": "npm:7.83.0"
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+    hoist-non-react-statics: "npm:^3.3.2"
+  peerDependencies:
+    react: 15.x || 16.x || 17.x || 18.x
+  checksum: 7668d087914c390a30cc8c6e252c96ab8a47e660580224dbceb48179c83565208ce3dc50ed079366047ec1875f21175d55c73d3e623f01614dcd114d29d0c043
+  languageName: node
+  linkType: hard
+
+"@sentry/replay@npm:7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/replay@npm:7.83.0"
+  dependencies:
+    "@sentry-internal/tracing": "npm:7.83.0"
+    "@sentry/core": "npm:7.83.0"
+    "@sentry/types": "npm:7.83.0"
+    "@sentry/utils": "npm:7.83.0"
+  checksum: 6e2f1960db208c0723537ffcdc8a7370d97ac2df2103d18ecf824c9b69ac83d76ebf29d37833d7a45ef435f480f0553da7148682d8110031074dd7b3c4936ca7
+  languageName: node
+  linkType: hard
+
 "@sentry/types@npm:7.81.1":
   version: 7.81.1
   resolution: "@sentry/types@npm:7.81.1"
@@ -10911,7 +10985,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/utils@npm:7.81.1, @sentry/utils@npm:^7.60.0":
+"@sentry/types@npm:7.83.0":
+  version: 7.83.0
+  resolution: "@sentry/types@npm:7.83.0"
+  checksum: 257b37678c7ea8624d4cdd9a18ccacbdb53a84be90ab6c0f3a6d6d30e8bc021f72a02a09dcf17ba6b1a9f6797580b89b827a3fcd0bc851185e7fc695ae68fbc3
+  languageName: node
+  linkType: hard
+
+"@sentry/utils@npm:7.81.1":
   version: 7.81.1
   resolution: "@sentry/utils@npm:7.81.1"
   dependencies:
@@ -10920,6 +11001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry/utils@npm:7.83.0, @sentry/utils@npm:^7.60.0":
+  version: 7.83.0
+  resolution: "@sentry/utils@npm:7.83.0"
+  dependencies:
+    "@sentry/types": "npm:7.83.0"
+  checksum: f0e4ef51f32e610ec8a33a43566e6f900e88e5f6c31aaf9a325f1b44a65ec882fa6e46122e23451afb0f2cf8f77bd766cc9684f9e40730c7193814d01d94daa4
+  languageName: node
+  linkType: hard
+
 "@sentry/webpack-plugin@npm:^2.8.0":
   version: 2.10.1
   resolution: "@sentry/webpack-plugin@npm:2.10.1"
@@ -25156,6 +25246,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lie@npm:3.1.1":
+  version: 3.1.1
+  resolution: "lie@npm:3.1.1"
+  dependencies:
+    immediate: "npm:~3.0.5"
+  checksum: c2c7d9dcc3a9aae641f41cde4e2e2cd571e4426b1f5915862781d77776672dcbca43461e16f4d382c9a300825c15e1a4923f1def3a5568d97577e077a3cecb44
+  languageName: node
+  linkType: hard
+
 "lie@npm:~3.3.0":
   version: 3.3.0
   resolution: "lie@npm:3.3.0"
@@ -25356,6 +25455,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"localforage@npm:^1.8.1":
+  version: 1.10.0
+  resolution: "localforage@npm:1.10.0"
+  dependencies:
+    lie: "npm:3.1.1"
+  checksum: d5c44be3a09169b013a3ebe252e678aaeb6938ffe72e9e12c199fd4307c1ec9d1a057ac2dfdfbb1379dfeec467a34ad0fc3ecd27489a2c43a154fb72b2822542
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"