fix: update codes

frontend/appflowy_web_app/src/components/error/NotFound.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Container, Box, Typography, Button } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+  return (
+    <Container component='main' maxWidth='xs'>
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <Typography variant='h1' component='h1' color='error' gutterBottom>
+          404
+        </Typography>
+        <Typography variant='h5' component='h2' gutterBottom>
+          Page Not Found
+        </Typography>
+        <Typography variant='body1' color='textSecondary'>
+          Sorry, the page you're looking for doesn't exist.
+        </Typography>
+        <Button component={Link} to='https://appflowy.io' variant='contained' color='primary' sx={{ mt: 3 }}>
+          Go to AppFlowy.io
+        </Button>
+      </Box>
+    </Container>
+  );
+};
+
+export default NotFound;

frontend/appflowy_web_app/src/components/publish/PublishView.tsx

@@ -5,6 +5,7 @@ import { AFConfigContext } from '@/components/app/AppConfig';
 import CollabView from '@/components/publish/CollabView';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { PublishViewHeader } from 'src/components/publish/header';
+import NotFound from '@/components/error/NotFound';
 
 export interface PublishViewProps {
   namespace: string;
@@ -23,10 +24,6 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
     try {
       doc = await service?.getPublishView(namespace, publishName);
     } catch (e) {
-      // do nothing
-    }
-
-    if (!doc) {
       setNotFound(true);
       return;
     }
@@ -38,8 +35,8 @@ export function PublishView({ namespace, publishName }: PublishViewProps) {
     void openPublishView();
   }, [openPublishView]);
 
-  if (notFound) {
-    return <div className={'flex h-full w-full items-center justify-center'}>Not found</div>;
+  if (notFound && !doc) {
+    return <NotFound />;
   }
 
   return (