5️⃣ 5주차 버그 해결 기록

Bug Explanation, Solution

Explanation

      const newNode: YNode = {
        id: pageId,
        type: "note",
        data: { title: existingNode.data.title, id: pageId, emoji: value },
        position: existingNode.position,
        selected: false,
        isHolding: false,
      }

프런트엔드에서는 지금까지 node 데이터를 yDoc에 세팅할 때 node.id, node.page.id가 모두 pageId로 세팅을 하는 상태이다

      if (customDoc.name?.startsWith('document-')) {
        const workspaceId = doc.guid;
        const pageId = parseInt(customDoc.name.split('-')[1]);
        const findPage = await this.pageService.findPageById(pageId);

하지만 백엔드에서는 변경 이벤트 감지후, node의 정보를 가져와서 갱신을 시도할 때 이를 pageId가 아닌 nodeId로 판단하고 update를 시도, 엉뚱한 id에 정보를 업데이트하고 있었던 것이다
팀원들끼리 테스트를 해봤을 때는 계속해서 소켓 안에서 로직이 처리되어 DB에 반영되기까지의 오류가 발생하지 않았지만, 사용자들이 대량으로 들어와 서비스를 사용하고 DB까지 반영되면서 버그가 쌓이고 서버가 터졌다

Solution

            // node.data는 페이지에 대한 정보
            const { title, id } = node.data;
            const { x, y } = node.position;
            const isHolding = node.isHolding;
            this.logger.log('log', node);
            if (!isHolding) {
              // TODO : node의 경우 key 값을 page id가 아닌 node id로 변경
              const findPage = await this.pageService.findPageById(id);
              await this.nodeService.updateNode(findPage.node.id, {
                title,
                x,
                y,
              });
            }

응급 조치로 page를 조회 할때 node를 join하도록 변경, page를 통해 nodeId를 가져오도록 변경하였다
그 후 프런트에서 pageId는 node.page.id로 저장, nodeId는 node.id로 저장을 확실하게 구분해 이를 별개로 저장하게 하여 서버에서도 다른 id로 취급하였다.

nodes.forEach((node) => {
      const nodeId = node.id.toString(); // id를 string으로 변환

      // Y.Map에 데이터를 삽입
      yNodeMap.set(nodeId, {
        id: nodeId,
        type: 'note',
        data: {
          title: node.page.title,
          id: node.page.id,
          emoji: node.page.emoji,
          color: node.color,
        },
        position: {
          x: node.x,
          y: node.y,
        },
        selected: false, // 기본적으로 선택되지 않음
        dragging: true,
        isHolding: false,
      });

서버에서 nodeId 는 페이지 안의 데이터, 위치 변경을 인식하고 DB에 반영할 때 사용되는 yNodeMap을 초기화할 때 id로 사용된다.

     // Y.Text title에 데이터 삽입
      const pageId = node.page.id.toString(); // id를 string으로 변환
      const yTitleText = new Y.Text();
      yTitleText.insert(0, node.page.title);

      // Y.Map에 데이터를 삽입
      yTitleMap.set(`title_${pageId}`, yTitleText);

      // Y.Text emoji에 데이터 삽입
      const yEmojiText = new Y.Text();
      const emoji = node.page.emoji ?? '📄';
      yEmojiText.insert(0, emoji);

      // Y.Map에 데이터를 삽입
      yEmojiMap.set(`emoji_${pageId}`, yEmojiText);

서버에서 pageId 는 페이지의 title, emoji 변경을 인식하고 DB에 반영할 때 사용되는 yEmojiText를 초기화 할 때 id를 만들며 사용된다.

What have we learned?

3, 4주 데모 준비 때는 별 문제 없이 개발이 원활하게 이루어졌으나, 이번 주 데모를 준비하면서는 개발 중 발생한 문제가 몇개 있었다.

1. 개발 환경의 통일 문제

개발 환경이 제대로 통일 되지 않아 로컬에서 서비스가 제대로 작동하는 것을 확인하지 않고 PR을 날리는 일이 잦았다. 후에 코드를 다 merge하고 나서, 어느 순간부터 서비스가 제대로 작동하지 않았는지 확인히 힘들어 마지막으로 작동하는 버전으로 되돌리느라 한참을 고생해야 했다.

2. 에러 처리 미숙

에러가 발생했을시 클린업하는 로직을 간과하였고, 서버가 죽지 않게하는 처리를 미리 생각해두지 않았다. 에러가 발생하더라도 서버는 초기화될지언정 죽으면 안된다!!

3. FE, BE 진도차이

마지막 주에 다다르면서 추가기능을 이것저것 추가하기 시작하면서 프런트엔드와 백엔드간의 진도가 차이나기 시작했고, 서로의 코드에 대한 이해와 소통이 적었다. 이 버그의 주 원인은 프런트엔드와 백엔드가 공유하는 id형식을 안 알려주고, 제대로 알지 못해서 생긴 것이다.

4. 너무 방대한 목표, 분업화

특히 백엔드에서는 배포를 정상화하는 작업, Redis로 최적화하는 작업, 워크스페이스와 권한 부여를 구현하는 작업을 일주일안에 모두 해결하려다 각각 한명씩 작업을 담당하게 되었고, 각자의 업무량이 많아 서로의 코드를 제대로 이해하면서 PR 리뷰를 남기는 일이 거의 진행되지 않았다. 이 때문에 데모 직전 버그를 찾는데 더 큰 어려움을 겪었다.

⇒ Octodocs 팀은 이 문제점들을 이제는 개선하기로 다짐하고 마지막 주, 리팩토링 작업을 시작하였다!