유저 테스트 후 에러 핸들링 처리

유저 테스트를 진행한 후에 많은 사람들이 화면 공유와 마이크 공유를 할 때 권한이 없어서 제대로 화상회의를 하지 못하는 점이 발견됐다.

권한이 없는 것은 좋은데 권한을 요구한다는 아무런 메시지가 없어서 어떻게 권한을 요청해야하는지 유저들은 잘 몰랐다.

코드를 찬찬히 살펴보니 navigator.mediaDevices.getUserMedia({})에 video: {device:null} 이런식으로 들어갈 가능성이 있는데 이부분에서 권한 요청조차 하지 않고 넘어가서 제대로 된 정보가 아니니 권한도 요청하지 않았다.

따라사 해당 부분을 다시 수정하고 로컬 스토리지에 아무런 값이 없을 때에는 true로 설정하여 기본적으로 요청 메시지와 기본 device를 세팅할 수 있도록 하였고 해당 부분에 대해서 에러 핸들링을 아래처럼 추가적으로 해줬다.

const handleClickShareButton = async () => {
    try {
      if (isCanShare === undefined) {
        setIsShare(true);
      }
      const mediaStream: MediaStream | undefined =
        await getMediaStreamByType(type);

      if (!mediaStream) {
        setIsShare(false);
        return;
      }
      onShare(mediaStream, type);
    } catch (err: unknown) {
      setIsShare(false);
      console.error("on error when start capture", err);

      if (err instanceof Error) {
        if (err.name === "NotAllowedError") {
          callToastDockError(
            "권한 설정이 돼있지 않습니다.\n 권한 설정을 해주시길 바랍니다."
          );
          return;
        }
        if (err.name === "NotFoundError") {
          callToastDockError(
            "사용자 웹캠정보를 찾을 수 없습니다. 웹캠의 작동 상태 및 연결 상태를 확인해주시길 바랍니다."
          );
          return;
        }

        toast.error(
          "사용자 웹 캠 정보를 가져오는 과정에서 오류가 발생했습니다. 콘솔 창에 에러 메시지와 함께 개발자에게 문의바랍니다."
        );
        console.error(err);
      }
    }
  };

각 나올 수 있는 에러에 대해서 우선 적으로 처리를 해주고 그에 맞는 사용자에게 다른 알림을 줄 수 있도록 수정하였다.