feat: add auth fail error

packages/client/src/components/document/editor/editor.tsx

@@ -35,6 +35,8 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
   if (!user) return null;
   const [status, setStatus] = useState<ProviderStatus>('connecting');
   const { online } = useNetwork();
+  const [loading, toggleLoading] = useToggle(true);
+  const [error, setError] = useState(null);
   const provider = useMemo(() => {
     return getProvider({
       targetId: documentId,
@@ -46,6 +48,13 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
         onAwarenessUpdate({ states }) {
           triggerJoinUser(states);
         },
+        onAuthenticationFailed() {
+          toggleLoading(false);
+          setError(new Error('鉴权失败！暂时无法提供服务'));
+        },
+        onSynced() {
+          toggleLoading(false);
+        },
       },
     });
   }, [documentId, user.token]);
@@ -65,7 +74,6 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
       } catch (e) {}
     }, 50),
   });
-  const [loading, toggleLoading] = useToggle(true);
 
   useEffect(() => {
     const indexdbProvider = getIndexdbProvider(documentId, provider.document);
@@ -74,10 +82,6 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
       setStatus('loadCacheSuccess');
     });
 
-    provider.on('synced', () => {
-      toggleLoading(false);
-    });
-
     provider.on('status', async ({ status }) => {
       setStatus(status);
     });
@@ -100,7 +104,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, authority, classNam
   return (
     <DataRender
       loading={loading}
-      error={null}
+      error={error}
       normalContent={() => {
         return (
           <div className={styles.editorWrap}>

packages/client/src/components/document/reader/editor.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import { useEditor, EditorContent } from '@tiptap/react';
 import { Layout } from '@douyinfe/semi-ui';
 import { IDocument, ILoginUser } from '@think/domains';
@@ -27,6 +27,8 @@ interface IProps {
 }
 
 export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
+  const [loading, toggleLoading] = useToggle(true);
+  const [error, setError] = useState(null);
   const provider = useMemo(() => {
     return getProvider({
       targetId: documentId,
@@ -38,6 +40,13 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
         onAwarenessUpdate({ states }) {
           triggerJoinUser(states);
         },
+        onAuthenticationFailed() {
+          toggleLoading(false);
+          setError(new Error('鉴权失败！暂时无法提供服务'));
+        },
+        onSynced() {
+          toggleLoading(false);
+        },
       },
     });
   }, [documentId, user.token]);
@@ -54,13 +63,8 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
       taskItemClickable: true,
     },
   });
-  const [loading, toggleLoading] = useToggle(true);
 
   useEffect(() => {
-    provider.on('synced', () => {
-      toggleLoading(false);
-    });
-
     return () => {
       destoryProvider(provider, 'READER');
     };
@@ -70,7 +74,7 @@ export const Editor: React.FC<IProps> = ({ user, documentId, document }) => {
     <DataRender
       loading={loading}
       loadingContent={<DocumentSkeleton />}
-      error={null}
+      error={error}
       normalContent={() => {
         return (
           <Content className={styles.editorWrap}>

packages/client/src/tiptap/provider.ts

@@ -20,6 +20,18 @@ export const getProvider = ({
   user: IUser;
   docType: 'document' | 'template';
   events?: {
+    onAuthenticated?: () => void;
+    onAuthenticationFailed?: ({ reason }: { reason: string }) => void;
+    onOpen?: (event: Event) => void;
+    onConnect?: () => void;
+    onMessage?: (event: MessageEvent) => void;
+    onOutgoingMessage?: (message) => void;
+    onStatus?: (status: any) => void;
+    onSynced?: () => void;
+    onDisconnect?: (event: CloseEvent) => void;
+    onClose?: (event: CloseEvent) => void;
+    onDestroy?: () => void;
+    onAwarenessChange?: (states: any) => void;
     onAwarenessUpdate?: (states: any) => void;
   };
 }) => {
@@ -38,7 +50,7 @@ export const getProvider = ({
       maxAttempts: 5,
       forceSyncInterval: 100,
       ...events,
-    });
+    } as any);
     pool.set(targetId, provider);
   }
   return pool.get(targetId);