fix: mark retryable duplicated messages as received

Author: oliverlaz

Diff for: src/components/Channel/Channel.tsx

@@ -13,10 +13,12 @@ import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
 import {
+  APIErrorResponse,
   ChannelAPIResponse,
   ChannelMemberResponse,
   ChannelQueryOptions,
   ChannelState,
+  ErrorFromResponse,
   Event,
   EventAPIResponse,
   Message,
@@ -940,14 +942,34 @@ const ChannelInner = <
     } catch (error) {
       // error response isn't usable so needs to be stringified then parsed
       const stringError = JSON.stringify(error);
-      const parsedError = stringError ? JSON.parse(stringError) : {};
-
-      updateMessage({
-        ...message,
-        error: parsedError,
-        errorStatusCode: (parsedError.status as number) || undefined,
-        status: 'failed',
-      });
+      const parsedError = (stringError
+        ? JSON.parse(stringError)
+        : {}) as ErrorFromResponse<APIErrorResponse>;
+
+      // Handle the case where the message already exists
+      // (typically, when retrying to send a message).
+      // If the message already exists, we can assume it was sent successfully,
+      // so we update the message status to "received".
+      // Right now, the only way to check this error is by checking
+      // the combination of the error code and the error description,
+      // since there is no special error code for duplicate messages.
+      if (
+        parsedError.code === 4 &&
+        error instanceof Error &&
+        error.message.includes('already exists')
+      ) {
+        updateMessage({
+          ...message,
+          status: 'received',
+        });
+      } else {
+        updateMessage({
+          ...message,
+          error: parsedError,
+          errorStatusCode: parsedError.status || undefined,
+          status: 'failed',
+        });
+      }
     }
   };
 

Diff for: src/components/Channel/__tests__/Channel.test.js

@@ -1261,6 +1261,46 @@ describe('Channel', () => {
         expect(await findByText(messageText)).toBeInTheDocument();
       });
 
+      it('should mark message as received when the backend reports duplicated message id', async () => {
+        const { channel, chatClient } = await initClient();
+        // flag to prevent infinite loop
+        let hasSent = false;
+        const messageText = 'hello world';
+        const messageId = '123456';
+
+        let originalMessageStatus = null;
+
+        const { findByText } = await renderComponent(
+          {
+            channel,
+            chatClient,
+            children: <MockMessageList />,
+          },
+          ({ sendMessage }) => {
+            jest.spyOn(channel, 'sendMessage').mockImplementation((message) => {
+              originalMessageStatus = message.status;
+              throw new chatClient.errorFromResponse({
+                data: {
+                  code: 4,
+                  message: `SendMessage failed with error: "a message with ID ${message.id} already exists"`,
+                },
+                status: 400,
+              });
+            });
+            if (!hasSent) {
+              sendMessage({ text: messageText }, { id: messageId, status: 'sending' });
+            }
+            hasSent = true;
+          },
+        );
+        expect(await findByText(messageText)).toBeInTheDocument();
+        expect(originalMessageStatus).toBe('sending');
+
+        const msg = channel.state.findMessage(messageId);
+        expect(msg).toBeDefined();
+        expect(msg.status).toBe('received');
+      });
+
       it('should use the doSendMessageRequest prop to send messages if that is defined', async () => {
         const { channel, chatClient } = await initClient();
         // flag to prevent infinite loop