From 406766878452cbdec193edf18b3a0bfe19786d03 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 6 Mar 2023 19:27:53 -0500 Subject: [PATCH 1/2] feat(replay): Consider user input in form field as "user activity" 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. --- packages/replay/src/coreHandlers/addBreadcrumbEvent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts b/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts index 8022e8a549d2..a5da67112dfd 100644 --- 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 || '')) { replay.triggerUserActivity(); } else { replay.checkAndHandleExpiredSession(); From 9539765f27f175c4d3b1a88bf81807caf6207395 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 7 Mar 2023 08:31:57 -0500 Subject: [PATCH 2/2] CR + add unit test --- .../src/coreHandlers/addBreadcrumbEvent.ts | 2 +- .../test/integration/sendReplayEvent.test.ts | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts b/packages/replay/src/coreHandlers/addBreadcrumbEvent.ts index a5da67112dfd..70fe932910a6 100644 --- 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 (['ui.click', 'ui.input'].includes(breadcrumb.category || '')) { + 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 index 4f17644a241e..356cfb33630c 100644 --- 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);