Feat/#327-K: CRDT 에러 핸들러 추가 (#328)

* feat: 클라이언트 CRDT 에러 핸들러 추가

* feat: 동작 실패시 로깅 대신 에러 throw

* fix: try-catch 제거

* fix: try 블럭 필요한 부분만 적용

* refactor: initializedRef 네이밍 구체화

Author: se030

@wabinar/crdt/linked-list.ts

@@ -171,9 +171,8 @@ export default class LinkedList {
 
       return prevIndex + 1;
     } catch (e) {
-      console.log(`insertById 실패 ^^\n${e}`);
-
-      return null;
+      // console.log(`insertById 실패 ^^\n${e}`);
+      throw e;
     }
   }
 
@@ -197,9 +196,8 @@ export default class LinkedList {
 
       return targetIndex;
     } catch (e) {
-      console.log(`deleteById 실패 ^^\n${e}`);
-
-      return null;
+      // console.log(`deleteById 실패 ^^\n${e}`);
+      throw e;
     }
   }
 

client/src/components/Block/TextBlock.tsx

@@ -33,6 +33,10 @@ function TextBlock({
 }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
 
+  const initBlock = () => {
+    socket.emit(BLOCK_EVENT.INIT_TEXT, id);
+  };
+
   const {
     syncCRDT,
     readCRDT,
@@ -89,7 +93,14 @@ function TextBlock({
   };
 
   const onInsert = (op: RemoteInsertOperation) => {
-    const prevIndex = remoteInsertCRDT(op);
+    let prevIndex;
+
+    try {
+      prevIndex = remoteInsertCRDT(op);
+    } catch {
+      initBlock();
+      return;
+    }
 
     if (!blockRef.current) return;
 
@@ -101,7 +112,14 @@ function TextBlock({
   };
 
   const onDelete = (op: RemoteDeleteOperation) => {
-    const targetIndex = remoteDeleteCRDT(op);
+    let targetIndex;
+
+    try {
+      targetIndex = remoteDeleteCRDT(op);
+    } catch {
+      initBlock();
+      return;
+    }
 
     if (!blockRef.current) return;
 
@@ -114,7 +132,7 @@ function TextBlock({
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
-    socket.emit(BLOCK_EVENT.INIT_TEXT, id);
+    initBlock();
 
     ee.on(`${BLOCK_EVENT.INIT_TEXT}-${id}`, onInitialize);
     ee.on(`${BLOCK_EVENT.UPDATE_TEXT}-${id}`, onInitialize);
@@ -168,14 +186,29 @@ function TextBlock({
     if (event.isComposing) return; // 한글 입력 무시
 
     if (event.inputType === 'deleteContentBackward') {
-      const remoteDeletion = localDeleteCRDT(offsetRef.current);
+      let remoteDeletion;
+
+      try {
+        remoteDeletion = localDeleteCRDT(offsetRef.current);
+      } catch {
+        initBlock();
+        return;
+      }
+
       socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
       return;
     }
 
     const letter = event.data as string;
     const previousLetterIndex = offsetRef.current - 2;
-    const remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
+
+    let remoteInsertion;
+
+    try {
+      remoteInsertion = localInsertCRDT(previousLetterIndex, letter);
+    } catch {
+      initBlock();
+    }
 
     socket.emit(BLOCK_EVENT.INSERT_TEXT, id, remoteInsertion);
   };

client/src/components/Mom/index.tsx

@@ -15,6 +15,11 @@ function Mom() {
   const { selectedMom } = useSelectedMom();
   const { momSocket: socket } = useSocketContext();
 
+  const initMom = () => {
+    if (!selectedMom) return;
+    socket.emit(MOM_EVENT.INIT, selectedMom._id);
+  };
+
   const {
     syncCRDT,
     spreadCRDT,
@@ -82,11 +87,18 @@ function Mom() {
 
       const blockId = uuid();
 
-      const remoteInsertion = localInsertCRDT(index, blockId);
+      let remoteInsertion;
+
+      try {
+        remoteInsertion = localInsertCRDT(index, blockId);
+      } catch {
+        initMom();
+      }
 
       updateBlockFocus(index + 1);
 
       socket.emit(MOM_EVENT.INSERT_BLOCK, blockId, remoteInsertion);
+
       return;
     }
 
@@ -99,7 +111,13 @@ function Mom() {
 
       if (index === 0) return;
 
-      const remoteDeletion = localDeleteCRDT(index);
+      let remoteDeletion;
+
+      try {
+        remoteDeletion = localDeleteCRDT(index);
+      } catch {
+        initMom();
+      }
 
       updateBlockFocus(index - 1);
 
@@ -115,9 +133,7 @@ function Mom() {
   };
 
   useEffect(() => {
-    if (!selectedMom) return;
-
-    socket.emit(MOM_EVENT.INIT, selectedMom._id);
+    initMom();
 
     socket.on(MOM_EVENT.INIT, (crdt) => {
       syncCRDT(crdt);
@@ -135,14 +151,24 @@ function Mom() {
     });
 
     socket.on(MOM_EVENT.INSERT_BLOCK, (op) => {
-      remoteInsertCRDT(op);
+      try {
+        remoteInsertCRDT(op);
+      } catch {
+        initMom();
+        return;
+      }
 
       updateBlockFocus(undefined);
       setBlocks(spreadCRDT());
     });
 
     socket.on(MOM_EVENT.DELETE_BLOCK, (op) => {
-      remoteDeleteCRDT(op);
+      try {
+        remoteDeleteCRDT(op);
+      } catch {
+        initMom();
+        return;
+      }
 
       updateBlockFocus(undefined);
       setBlocks(spreadCRDT());

client/src/hooks/useCRDT.tsx

@@ -26,16 +26,17 @@ export function useCRDT() {
 
   const crdtRef = useRef<CRDT>(new CRDT(clientId, new LinkedList()));
 
-  const initializedRef = useRef<boolean>(false);
-  const operationSet: RemoteOperation[] = [];
+  const isCRDTInitializedRef = useRef<boolean>(false);
+  let operationSet: RemoteOperation[] = [];
 
   const syncCRDT = (structure: unknown) => {
     crdtRef.current = new CRDT(
       clientId,
       new LinkedList(structure as LinkedList),
     );
 
-    initializedRef.current = true;
+    isCRDTInitializedRef.current = true;
+
     operationSet.forEach(({ type, op }) => {
       switch (type) {
         case OPERATION_TYPE.INSERT:
@@ -48,15 +49,16 @@ export function useCRDT() {
           break;
       }
     });
+    operationSet = [];
   };
 
   const readCRDT = (): string => {
-    if (!initializedRef.current) return '';
+    if (!isCRDTInitializedRef.current) return '';
     return crdtRef.current.read();
   };
 
   const spreadCRDT = (): string[] => {
-    if (!initializedRef.current) return [];
+    if (!isCRDTInitializedRef.current) return [];
     return crdtRef.current.spread();
   };
 
@@ -73,7 +75,7 @@ export function useCRDT() {
   };
 
   const remoteInsertCRDT = (op: RemoteInsertOperation) => {
-    if (!initializedRef.current) {
+    if (!isCRDTInitializedRef.current) {
       operationSet.push({ type: OPERATION_TYPE.INSERT, op });
       return null;
     }
@@ -84,7 +86,7 @@ export function useCRDT() {
   };
 
   const remoteDeleteCRDT = (op: RemoteDeleteOperation) => {
-    if (!initializedRef.current) {
+    if (!isCRDTInitializedRef.current) {
       operationSet.push({ type: OPERATION_TYPE.DELETE, op });
       return null;
     }