From 4d96d2dd0209911153259e365a2826ae95e55ace Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Wed, 6 Sep 2023 21:42:47 -0700
Subject: [PATCH] feat(core): add share page error boundary (#4245)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>
---
 .../components/share-page-not-found-error.tsx | 35 +++++++++++++++++++
 apps/core/src/pages/share/detail-page.tsx     | 19 +++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 apps/core/src/components/share-page-not-found-error.tsx

diff --git a/apps/core/src/components/share-page-not-found-error.tsx b/apps/core/src/components/share-page-not-found-error.tsx
new file mode 100644
index 0000000000..064a62c256
--- /dev/null
+++ b/apps/core/src/components/share-page-not-found-error.tsx
@@ -0,0 +1,35 @@
+import { Empty } from '@affine/component';
+import { Logo1Icon } from '@blocksuite/icons';
+
+export const SharePageNotFoundError = () => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <a
+        href="https://affine.pro/"
+        target="_blank"
+        rel="noreferrer"
+        style={{
+          position: 'absolute',
+          top: '16px',
+          left: '16px',
+          fontSize: '24px',
+          cursor: 'pointer',
+        }}
+      >
+        <Logo1Icon />
+      </a>
+      <Empty
+        description={'You do not have access or this content does not exist.'}
+      />
+    </div>
+  );
+};
diff --git a/apps/core/src/pages/share/detail-page.tsx b/apps/core/src/pages/share/detail-page.tsx
index 54cb5a5d1e..e135a55a4c 100644
--- a/apps/core/src/pages/share/detail-page.tsx
+++ b/apps/core/src/pages/share/detail-page.tsx
@@ -9,11 +9,17 @@ import { noop } from 'foxact/noop';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
-import { redirect, useLoaderData } from 'react-router-dom';
+import {
+  isRouteErrorResponse,
+  redirect,
+  useLoaderData,
+  useRouteError,
+} from 'react-router-dom';
 import { applyUpdate } from 'yjs';
 
 import { PageDetailEditor } from '../../adapters/shared';
 import { AppContainer } from '../../components/affine/app-container';
+import { SharePageNotFoundError } from '../../components/share-page-not-found-error';
 
 function assertArrayBuffer(value: unknown): asserts value is ArrayBuffer {
   if (!(value instanceof ArrayBuffer)) {
@@ -71,3 +77,14 @@ export const Component = (): ReactElement => {
     </AppContainer>
   );
 };
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  return isRouteErrorResponse(error) ? (
+    <h1>
+      {error.status} {error.statusText}
+    </h1>
+  ) : (
+    <SharePageNotFoundError />
+  );
+}