Mitigation for gappy/limited sync responses in SPA mode

src/useReactions.tsx

@@ -189,6 +189,10 @@ export const ReactionsProvider = ({
   // This effect handles any *live* reaction/redactions in the room.
   useEffect(() => {
     const reactionTimeouts = new Set<number>();
+    // TODO: this should be somewhere more sensible
+    const handleTimelineReset = (): void => {
+      logger.warn("Received TimelineReset indicating limited sync response");
+    };
     const handleReactionEvent = (event: MatrixEvent): void => {
       // Decrypted events might come from a different room
       if (event.getRoomId() !== room.roomId) return;
@@ -302,6 +306,7 @@ export const ReactionsProvider = ({
       }
     };
 
+    room.on(MatrixRoomEvent.TimelineReset, handleTimelineReset);
     room.on(MatrixRoomEvent.Timeline, handleReactionEvent);
     room.on(MatrixRoomEvent.Redaction, handleReactionEvent);
     room.client.on(MatrixEventEvent.Decrypted, handleReactionEvent);
@@ -311,6 +316,7 @@ export const ReactionsProvider = ({
     room.on(MatrixRoomEvent.LocalEchoUpdated, handleReactionEvent);
 
     return (): void => {
+      room.off(MatrixRoomEvent.TimelineReset, handleTimelineReset);
       room.off(MatrixRoomEvent.Timeline, handleReactionEvent);
       room.off(MatrixRoomEvent.Redaction, handleReactionEvent);
       room.client.off(MatrixEventEvent.Decrypted, handleReactionEvent);

src/utils/matrix.ts

@@ -9,6 +9,7 @@ import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
 import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import {
   createClient,
+  Filter,
   ICreateClientOpts,
   Preset,
   Visibility,
@@ -164,7 +165,20 @@ export async function initClient(
   // Otherwise, a sync may complete before the listener gets applied,
   // and we will miss it.
   const syncPromise = waitForSync(client);
-  await client.startClient({ clientWellKnownPollPeriod: 60 * 10 });
+  await client.startClient({
+    clientWellKnownPollPeriod: 60 * 10,
+    // ask for a high limit to try and avoid gappy syncs
+    filter: Filter.fromJson(undefined, "element-call", {
+      room: {
+        timeline: {
+          limit: 1000,
+        },
+      },
+    }),
+    // we ask for 20 past message to try and get some recent context
+    // n.b. past reactions are not guaranteed to be visible
+    initialSyncLimit: 20,
+  });
   await syncPromise;
 
   return client;