feature: Add logger to VoicePlayer and VoiceRecorder (#453)

[UIKIT-3260](https://sendbird.atlassian.net/browse/UIKIT-3260)
* Add a logger to VoicePlayer and VoiceRecorder
* Add a logger to sending voice message

Author: HoonBaek

src/hooks/VoicePlayer/index.tsx

@@ -19,6 +19,7 @@ import {
   VOICE_PLAYER_AUDIO_ID,
   VOICE_PLAYER_ROOT_ID,
 } from '../../utils/consts';
+import useSendbirdStateContext from '../useSendbirdStateContext';
 
 // VoicePlayerProvider interface
 export interface VoicePlayerProps {
@@ -59,15 +60,19 @@ export const VoicePlayerProvider = ({
     currentPlayer,
     audioStorage,
   } = voicePlayerStore;
+  const { config } = useSendbirdStateContext();
+  const { logger } = config;
 
   const stop = (text = '') => {
     if (currentGroupKey.includes(text)) {
+      logger.info('VoicePlayer: Pause playing(by text).');
       pause(currentGroupKey);
     }
   };
 
   const pause = (groupKey: string) => {
     if (currentGroupKey === groupKey && currentPlayer !== null) {
+      logger.info('VoicePlayer: Pause playing(by group key).');
       currentPlayer?.pause();
     }
   };
@@ -97,9 +102,7 @@ export const VoicePlayerProvider = ({
       }
       voicePlayerDispatcher({
         type: INITIALIZE_AUDIO_UNIT,
-        payload: {
-          groupKey,
-        },
+        payload: { groupKey },
       });
       fetch(audioFileUrl)
         .then((res) => res.blob())
@@ -111,48 +114,42 @@ export const VoicePlayerProvider = ({
           resolve(audioFile);
         });
     }).then((audioFile: File) => {
+      logger.info('VoicePlayer: Succeeded getting audio file.', audioFile);
       const currentAudioUnit = audioStorage[groupKey] || AudioUnitDefaultValue() as AudioStorageUnit;
       const audioPlayer = new Audio(URL?.createObjectURL?.(audioFile));
       audioPlayer.id = VOICE_PLAYER_AUDIO_ID;
       audioPlayer.currentTime = currentAudioUnit.playbackTime;
       audioPlayer.volume = 1;
       audioPlayer.loop = false;
       audioPlayer.onplaying = () => {
+        logger.info('VoicePlayer: OnPlaying event is called from audioPlayer', { groupKey, audioPlayer });
         voicePlayerDispatcher({
           type: ON_VOICE_PLAYER_PLAY,
-          payload: {
-            groupKey,
-            audioFile,
-          },
+          payload: { groupKey, audioFile },
         });
       };
       audioPlayer.onpause = () => {
+        logger.info('VoicePlayer: OnPause event is called from audioPlayer', { groupKey, audioPlayer });
         voicePlayerDispatcher({
           type: ON_VOICE_PLAYER_PAUSE,
-          payload: {
-            groupKey,
-          },
+          payload: { groupKey },
         });
       };
       audioPlayer.ontimeupdate = () => {
         voicePlayerDispatcher({
           type: ON_CURRENT_TIME_UPDATE,
-          payload: {
-            groupKey,
-          },
+          payload: { groupKey },
         });
       };
       audioPlayer?.play();
       const voicePlayerRoot = document.getElementById(VOICE_PLAYER_ROOT_ID);
       voicePlayerRoot.appendChild(audioPlayer);
       voicePlayerDispatcher({
         type: SET_CURRENT_PLAYER,
-        payload: {
-          groupKey,
-          audioPlayer,
-        },
+        payload: { groupKey, audioPlayer },
       });
-    })
+      logger.info('VoicePlayer: Succeeded playing audio player.', { groupKey, audioPlayer });
+    });
   };
 
   return (

src/hooks/VoiceRecorder/index.tsx

@@ -6,6 +6,7 @@ import {
   VOICE_RECORDER_AUDIO_BITS,
   VOICE_RECORDER_MIME_TYPE,
 } from '../../utils/consts';
+import useSendbirdStateContext from '../useSendbirdStateContext';
 
 // Input props of VoiceRecorder
 export interface VoiceRecorderProps {
@@ -31,23 +32,28 @@ const VoiceRecorderContext = createContext<VoiceRecorderContext>({
 });
 
 export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactElement => {
+  const { children } = props;
+  const { config } = useSendbirdStateContext();
+  const { logger } = config;
   const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>(null);
   const [isRecordable, setIsRecordable] = useState<boolean>(false);
 
-  const { children } = props;
-
   const start = useCallback((eventHandler: VoiceRecorderEventHandler): void => {
+    logger.info('VoiceRecorder: Start recording.');
     if (mediaRecorder) {
       stop();
+      logger.info('VoiceRecorder: Previous mediaRecorder is stopped.');
     }
     navigator?.mediaDevices?.getUserMedia?.({ audio: true })
       .then((stream) => {
+        logger.info('VoiceRecorder: Succeeded getting media stream.', stream);
         setIsRecordable(true);
         const mediaRecorder = new MediaRecorder(stream, {
           mimeType: VOICE_RECORDER_MIME_TYPE,
           audioBitsPerSecond: VOICE_RECORDER_AUDIO_BITS,
         });
         mediaRecorder.ondataavailable = (e) => {// when recording stops
+          logger.info('VoiceRecorder: Succeeded getting an available data.', e.data);
           const audioFile = new File([e.data], VOICE_MESSAGE_FILE_NAME, {
             lastModified: new Date().getTime(),
             type: VOICE_MESSAGE_MIME_TYPE,
@@ -60,6 +66,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
               type: VOICE_MESSAGE_MIME_TYPE,
             });
             eventHandler?.onRecordingEnded(convertedAudioFile);
+            logger.info('VoiceRecorder: Succeeded converting audio file.', convertedAudioFile);
           });
           stream?.getAudioTracks?.().forEach?.(track => track?.stop());
           setIsRecordable(false);
@@ -68,8 +75,8 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
         setMediaRecorder(mediaRecorder);
         eventHandler?.onRecordingStarted();
       })
-      .catch(() => {
-        // error
+      .catch((err) => {
+        logger.error('VoiceRecorder: Failed getting media stream.', err);
         setMediaRecorder(null);
       });
   }, [mediaRecorder]);
@@ -79,7 +86,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
     mediaRecorder?.stop();
     setMediaRecorder(null);
     setIsRecordable(false);
-    // TODO: logger
+    logger.info('VoiceRecorder: Stop recording.');
   }, [mediaRecorder]);
 
   return (

src/smart-components/Channel/context/hooks/useSendVoiceMessageCallback.ts

@@ -60,6 +60,7 @@ export const useSendVoiceMessageCallback = ({
       messageParams.isReplyToChannel = true;
       messageParams.parentMessageId = quoteMessage.messageId;
     }
+    logger.info('Channel: Start sending voice message', messageParams);
     currentGroupChannel.sendFileMessage(messageParams)
       .onPending((pendingMessage) => {
         pubSub.publish(topics.SEND_MESSAGE_START, {

src/smart-components/Thread/context/hooks/useSendVoiceMessageCallback.ts

@@ -62,7 +62,7 @@ export const useSendVoiceMessageCallback = ({
       messageParams.isReplyToChannel = true;
       messageParams.parentMessageId = quoteMessage.messageId;
     }
-
+    logger.info('Thread | useSendVoiceMessageCallback:  Start sending voice message', messageParams);
     currentChannel?.sendFileMessage(messageParams)
       .onPending((pendingMessage) => {
         threadDispatcher({