feat(replay): Consider user input in form field as "user activity" (#…

…7355) This adds user input (event from core SDK) as a trigger for user activity (to reset idle timeout). Note that this is only from input changes in a form field, it will not consider using tab key to move focus.
getsentry · Mar 7, 2023 · 7ab581b · 7ab581b
1 parent 0e09695
commit 7ab581b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts b/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts
@@ -12,7 +12,7 @@ export function addBreadcrumbEvent(replay: ReplayContainer, breadcrumb: Breadcru
     return;
   }
 
-  if (breadcrumb.category === 'ui.click') {
+  if (['ui.click', 'ui.input'].includes(breadcrumb.category as string)) {
     replay.triggerUserActivity();
   } else {
     replay.checkAndHandleExpiredSession();

diff --git a/packages/replay/test/integration/sendReplayEvent.test.ts b/packages/replay/test/integration/sendReplayEvent.test.ts
@@ -129,6 +129,26 @@ describe('Integration | sendReplayEvent', () => {
     expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP + ELAPSED);
   });
 
+  it('update last activity when user uses keyboard input', async () => {
+    expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP);
+
+    domHandler({
+      name: 'input',
+    });
+
+    expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP);
+
+    // Pretend 5 seconds have passed
+    const ELAPSED = 5000;
+    jest.advanceTimersByTime(ELAPSED);
+
+    domHandler({
+      name: 'input',
+    });
+
+    expect(replay.session?.lastActivity).toBe(BASE_TIMESTAMP + ELAPSED);
+  });
+
   it('uploads a replay event if 5 seconds have elapsed since the last replay event occurred', async () => {
     const TEST_EVENT = { data: {}, timestamp: BASE_TIMESTAMP, type: 3 };
     mockRecord._emitter(TEST_EVENT);