fix: mark retryable duplicated messages as received (#2331)

### 🎯 Goal

In some circumstances, the response about the delivery of a message may
be aborted (timeout) or the web socket information about `message.new`
might not arrive because of network conditions (offline, etc...).
In this case, the SDK will prompt the user to re-send the message. Once
the user retries, the backend will error with `SendMessage failed:
Message with id XYZ already exists`.

This error wasn't handled properly by the SDK and it led the user to
re-attempt sending the same message over and over again in a loop.
This loop could have been broken only by reloading the app. This PR aims
to fix that.

### 🛠 Implementation details

The SDK now recognizes this error, and once it happens, it immediately
marks the message as `received`. This breaks the re-send loop for the
user. Any UI inconsistencies (ordering of messages) related to the
network glitches and optimistic rendering will be sorted out once the
network connection restores and our SDK establishes a solid connection
to our backend systems.

Author: oliverlaz

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',
+        });
+      }
     }
   };
 

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