fix: page view events lost due to cached session storage (#41)

zhu-xiaowei · web-flow · commit f07f26ce3b2e · 2024-02-22T16:24:54.000+08:00
diff --git a/src/browser/BrowserInfo.ts b/src/browser/BrowserInfo.ts
@@ -78,4 +78,17 @@ export class BrowserInfo {
 		if (!BrowserInfo.isBrowser()) return '';
 		return window.document.title ?? '';
 	}
+
+	static isFromReload() {
+		if (performance && performance.getEntriesByType) {
+			const performanceEntries = performance.getEntriesByType('navigation');
+			if (performanceEntries && performanceEntries.length > 0) {
+				const type = (performanceEntries[0] as any)['type'];
+				return type === 'reload';
+			}
+		} else {
+			logger.warn('unsupported web environment for performance');
+		}
+		return false;
+	}
 }
diff --git a/src/tracker/PageViewTracker.ts b/src/tracker/PageViewTracker.ts
@@ -11,16 +11,13 @@
  *  and limitations under the License.
  */
 
-import { Logger } from '@aws-amplify/core';
 import { BaseTracker } from './BaseTracker';
 import { BrowserInfo } from '../browser';
 import { ClickstreamContext, ClickstreamProvider, Event } from '../provider';
 import { PageType } from '../types';
 import { MethodEmbed } from '../util/MethodEmbed';
 import { StorageUtil } from '../util/StorageUtil';
 
-const logger = new Logger('PageViewTracker');
-
 export class PageViewTracker extends BaseTracker {
 	provider: ClickstreamProvider;
 	context: ClickstreamContext;
@@ -36,22 +33,22 @@ export class PageViewTracker extends BaseTracker {
 		if (this.context.configuration.pageType === PageType.SPA) {
 			this.trackPageViewForSPA();
 		} else {
-			this.onPageChange();
+			if (!BrowserInfo.isFromReload()) {
+				this.onPageChange();
+			}
 		}
 	}
 
 	trackPageViewForSPA() {
 		MethodEmbed.add(history, 'pushState', this.onPageChange);
 		MethodEmbed.add(history, 'replaceState', this.onPageChange);
 		window.addEventListener('popstate', this.onPageChange);
-		this.onPageChange();
+		if (!BrowserInfo.isFromReload()) {
+			this.onPageChange();
+		}
 	}
 
 	onPageChange() {
-		if (!window.sessionStorage) {
-			logger.warn('unsupported web environment for sessionStorage');
-			return;
-		}
 		if (this.context.configuration.isTrackPageViewEvents) {
 			const previousPageUrl = StorageUtil.getPreviousPageUrl();
 			const previousPageTitle = StorageUtil.getPreviousPageTitle();
diff --git a/src/tracker/SessionTracker.ts b/src/tracker/SessionTracker.ts
@@ -15,7 +15,6 @@ import { BaseTracker } from './BaseTracker';
 import { Session } from './Session';
 import { BrowserInfo } from '../browser';
 import { Event } from '../provider';
-import { PageType } from '../types';
 import { StorageUtil } from '../util/StorageUtil';
 
 const logger = new Logger('SessionTracker');
@@ -53,6 +52,7 @@ export class SessionTracker extends BaseTracker {
 
 	handleInit() {
 		this.session = Session.getCurrentSession(this.context);
+		StorageUtil.clearPageInfo();
 		if (StorageUtil.getIsFirstOpen()) {
 			this.provider.record({
 				name: Event.PresetEvent.FIRST_OPEN,
@@ -71,8 +71,8 @@ export class SessionTracker extends BaseTracker {
 			pageViewTracker.setIsEntrances();
 			this.provider.record({ name: Event.PresetEvent.SESSION_START });
 		}
-		if (isFirstTime && this.isMultiPageApp() && this.isFromCurrentHost())
-			return;
+		if (isFirstTime && this.isFromCurrentHost()) return;
+		if (isFirstTime && BrowserInfo.isFromReload()) return;
 		this.provider.record({
 			name: Event.PresetEvent.APP_START,
 			attributes: {
@@ -85,10 +85,6 @@ export class SessionTracker extends BaseTracker {
 		return window.location.host === this.context.browserInfo.latestReferrerHost;
 	}
 
-	isMultiPageApp() {
-		return this.context.configuration.pageType === PageType.multiPageApp;
-	}
-
 	onPageHide() {
 		logger.debug('page hide');
 		this.storeSession();
diff --git a/src/types/Analytics.ts b/src/types/Analytics.ts
@@ -72,6 +72,7 @@ export interface Item {
 	category3?: string;
 	category4?: string;
 	category5?: string;
+
 	[key: string]: string | number | boolean | null;
 }
 
diff --git a/src/util/StorageUtil.ts b/src/util/StorageUtil.ts
@@ -255,20 +255,25 @@ export class StorageUtil {
 		localStorage.setItem(StorageUtil.isFirstOpenKey, '0');
 	}
 
+	static clearPageInfo() {
+		localStorage.setItem(StorageUtil.previousPageUrlKey, '');
+		localStorage.setItem(StorageUtil.previousPageTitleKey, '');
+	}
+
 	static getPreviousPageUrl(): string {
-		return sessionStorage.getItem(StorageUtil.previousPageUrlKey) ?? '';
+		return localStorage.getItem(StorageUtil.previousPageUrlKey) ?? '';
 	}
 
 	static savePreviousPageUrl(url: string) {
-		sessionStorage.setItem(StorageUtil.previousPageUrlKey, url);
+		localStorage.setItem(StorageUtil.previousPageUrlKey, url);
 	}
 
 	static getPreviousPageTitle(): string {
-		return sessionStorage.getItem(StorageUtil.previousPageTitleKey) ?? '';
+		return localStorage.getItem(StorageUtil.previousPageTitleKey) ?? '';
 	}
 
 	static savePreviousPageTitle(title: string) {
-		sessionStorage.setItem(StorageUtil.previousPageTitleKey, title);
+		localStorage.setItem(StorageUtil.previousPageTitleKey, title);
 	}
 
 	static getPreviousPageStartTime(): number {
diff --git a/test/browser/BrowserInfo.test.ts b/test/browser/BrowserInfo.test.ts
@@ -10,6 +10,8 @@
  *  OR CONDITIONS OF ANY KIND, express or implied. See the License for the specific language governing permissions
  *  and limitations under the License.
  */
+import { setPerformanceEntries } from './BrowserUtil';
+import { MockObserver } from './MockObserver';
 import { BrowserInfo } from '../../src/browser';
 
 describe('BrowserInfo test', () => {
@@ -93,4 +95,20 @@ describe('BrowserInfo test', () => {
 		const isFirefox = BrowserInfo.isFirefox();
 		expect(isFirefox).toBeFalsy();
 	});
+
+	test('test unsupported web environment for performance', () => {
+		expect(BrowserInfo.isFromReload()).toBeFalsy();
+	});
+
+	test('test web page from reload', () => {
+		(global as any).PerformanceObserver = MockObserver;
+		setPerformanceEntries();
+		expect(BrowserInfo.isFromReload()).toBeFalsy();
+	});
+
+	test('test web page not from reload', () => {
+		(global as any).PerformanceObserver = MockObserver;
+		setPerformanceEntries(true, true);
+		expect(BrowserInfo.isFromReload()).toBeTruthy();
+	});
 });
diff --git a/test/browser/BrowserUtil.ts b/test/browser/BrowserUtil.ts
@@ -17,14 +17,18 @@ export function setUpBrowserPerformance() {
 	setPerformanceEntries(false);
 }
 
-export function setPerformanceEntries(isLoaded = true) {
+export function setPerformanceEntries(isLoaded = true, isReload = false) {
 	Object.defineProperty(window, 'performance', {
 		writable: true,
 		value: {
 			getEntriesByType: jest
 				.fn()
 				.mockImplementation(
-					isLoaded ? getEntriesByType : getEntriesByTypeUnload
+					isLoaded
+						? isReload
+							? getEntriesByTypeForReload
+							: getEntriesByType
+						: getEntriesByTypeUnload
 				),
 		},
 	});
@@ -78,14 +82,22 @@ function getEntriesByType(): PerformanceEntryList {
 			domComplete: 3440.4000000059605,
 			loadEventStart: 3444.2000000178814,
 			loadEventEnd: 3444.4000000059605,
-			type: 'reload',
+			type: 'navigate',
 			redirectCount: 0,
 			activationStart: 0,
 			criticalCHRestart: 0,
 		},
 	]);
 }
 
+function getEntriesByTypeForReload(): PerformanceEntryList {
+	return <PerformanceEntry[]>(<unknown>[
+		{
+			type: 'reload',
+		},
+	]);
+}
+
 function getEntriesByTypeUnload(): PerformanceEntryList {
 	return <PerformanceEntry[]>(<unknown>[
 		{
diff --git a/test/tracker/ClickTracker.test.ts b/test/tracker/ClickTracker.test.ts
@@ -28,7 +28,6 @@ describe('ClickTracker test', () => {
 	let recordMethodMock: any;
 
 	beforeEach(() => {
-		sessionStorage.clear();
 		localStorage.clear();
 		provider = new ClickstreamProvider();
 		Object.assign(provider.configuration, {
diff --git a/test/tracker/PageLoadTracker.test.ts b/test/tracker/PageLoadTracker.test.ts
@@ -29,7 +29,6 @@ describe('PageLoadTracker test', () => {
 	let recordMethodMock: any;
 
 	beforeEach(() => {
-		sessionStorage.clear();
 		localStorage.clear();
 		provider = new ClickstreamProvider();
 		Object.assign(provider.configuration, {
diff --git a/test/tracker/PageViewTracker.test.ts b/test/tracker/PageViewTracker.test.ts
@@ -28,6 +28,8 @@ import {
 import { PageViewTracker, Session, SessionTracker } from '../../src/tracker';
 import { MethodEmbed } from '../../src/util/MethodEmbed';
 import { StorageUtil } from '../../src/util/StorageUtil';
+import { setPerformanceEntries } from "../browser/BrowserUtil";
+import { MockObserver } from "../browser/MockObserver";
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
@@ -45,7 +47,6 @@ describe('PageViewTracker test', () => {
 
 	beforeEach(() => {
 		localStorage.clear();
-		sessionStorage.clear();
 		provider = new ClickstreamProvider();
 
 		Object.assign(provider.configuration, {
@@ -74,6 +75,8 @@ describe('PageViewTracker test', () => {
 			writable: true,
 			value: 'index',
 		});
+		(global as any).PerformanceObserver = MockObserver;
+		setPerformanceEntries()
 	});
 
 	afterEach(() => {
@@ -149,20 +152,6 @@ describe('PageViewTracker test', () => {
 		expect(userEngagementMock).not.toBeCalled();
 	});
 
-	test('test environment is not supported for sessionStorage', () => {
-		const sessionStorage = window.sessionStorage;
-		Object.defineProperty(window, 'sessionStorage', {
-			writable: true,
-			value: undefined,
-		});
-		pageViewTracker.setUp();
-		expect(recordEventMethodMock).not.toBeCalled();
-		Object.defineProperty(window, 'sessionStorage', {
-			writable: true,
-			value: sessionStorage,
-		});
-	});
-
 	test('test two page view in SPA mode', async () => {
 		(context.configuration as any).pageType = PageType.SPA;
 		pageViewTracker.setUp();
diff --git a/test/tracker/ScrollTracker.test.ts b/test/tracker/ScrollTracker.test.ts
@@ -28,7 +28,6 @@ describe('ScrollTracker test', () => {
 
 	beforeEach(() => {
 		localStorage.clear();
-		sessionStorage.clear();
 		provider = new ClickstreamProvider();
 
 		Object.assign(provider.configuration, {
diff --git a/test/tracker/SessionTracker.test.ts b/test/tracker/SessionTracker.test.ts
@@ -29,6 +29,8 @@ import {
 } from '../../src/provider';
 import { PageViewTracker, SessionTracker } from '../../src/tracker';
 import { StorageUtil } from '../../src/util/StorageUtil';
+import { setPerformanceEntries } from '../browser/BrowserUtil';
+import { MockObserver } from '../browser/MockObserver';
 
 describe('SessionTracker test', () => {
 	let provider: ClickstreamProvider;
@@ -57,6 +59,8 @@ describe('SessionTracker test', () => {
 		provider.sessionTracker = sessionTracker;
 		provider.eventRecorder = eventRecorder;
 		provider.pageViewTracker = pageViewTracker;
+		(global as any).PerformanceObserver = MockObserver;
+		setPerformanceEntries();
 	});
 
 	afterEach(() => {
@@ -116,6 +120,31 @@ describe('SessionTracker test', () => {
 		});
 	});
 
+	test('test spa mode not record app start when come from the same host name', () => {
+		Object.assign(provider.configuration, {
+			pageType: PageType.SPA,
+		});
+		context.browserInfo.latestReferrerHost = 'localhost';
+		sessionTracker.setUp();
+		expect(recordMethodMock).not.toBeCalledWith({
+			name: Event.PresetEvent.APP_START,
+			attributes: {
+				[Event.ReservedAttribute.IS_FIRST_TIME]: true,
+			},
+		});
+	});
+
+	test('test not record app start when browser is from reload', () => {
+		setPerformanceEntries(true, true);
+		sessionTracker.setUp();
+		expect(recordMethodMock).not.toBeCalledWith({
+			name: Event.PresetEvent.APP_START,
+			attributes: {
+				[Event.ReservedAttribute.IS_FIRST_TIME]: true,
+			},
+		});
+	});
+
 	test('test setUp for unsupported env', () => {
 		const addEventListenerMock = jest.spyOn(window, 'addEventListener');
 		const addEventListener = (global as any).document.addEventListener;
diff --git a/test/util/StorageUtil.test.ts b/test/util/StorageUtil.test.ts
@@ -179,6 +179,14 @@ describe('StorageUtil test', () => {
 			});
 	});
 
+	test('test clear page information', () => {
+		StorageUtil.savePreviousPageTitle('pageA');
+		StorageUtil.savePreviousPageUrl('https://example.com/pageA');
+		StorageUtil.clearPageInfo();
+		expect(StorageUtil.getPreviousPageTitle()).toBe('');
+		expect(StorageUtil.getPreviousPageUrl()).toBe('');
+	});
+
 	async function saveEvent() {
 		const event = await getTestEvent();
 		return StorageUtil.saveEvent(event);

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,7 @@ export interface Item {`
`72`	`72`	`category3?: string;`
`73`	`73`	`category4?: string;`
`74`	`74`	`category5?: string;`
	`75`	`+`
`75`	`76`	`[key: string]: string \| number \| boolean \| null;`
`76`	`77`	`}`
`77`	`78`
Original file line number	Diff line number	Diff line change
`@@ -255,20 +255,25 @@ export class StorageUtil {`
`255`	`255`	`localStorage.setItem(StorageUtil.isFirstOpenKey, '0');`
`256`	`256`	`}`
`257`	`257`
	`258`	`+ static clearPageInfo() {`
	`259`	`+ localStorage.setItem(StorageUtil.previousPageUrlKey, '');`
	`260`	`+ localStorage.setItem(StorageUtil.previousPageTitleKey, '');`
	`261`	`+ }`
	`262`	`+`
`258`	`263`	`static getPreviousPageUrl(): string {`
`259`		`- return sessionStorage.getItem(StorageUtil.previousPageUrlKey) ?? '';`
	`264`	`+ return localStorage.getItem(StorageUtil.previousPageUrlKey) ?? '';`
`260`	`265`	`}`
`261`	`266`
`262`	`267`	`static savePreviousPageUrl(url: string) {`
`263`		`- sessionStorage.setItem(StorageUtil.previousPageUrlKey, url);`
	`268`	`+ localStorage.setItem(StorageUtil.previousPageUrlKey, url);`
`264`	`269`	`}`
`265`	`270`
`266`	`271`	`static getPreviousPageTitle(): string {`
`267`		`- return sessionStorage.getItem(StorageUtil.previousPageTitleKey) ?? '';`
	`272`	`+ return localStorage.getItem(StorageUtil.previousPageTitleKey) ?? '';`
`268`	`273`	`}`
`269`	`274`
`270`	`275`	`static savePreviousPageTitle(title: string) {`
`271`		`- sessionStorage.setItem(StorageUtil.previousPageTitleKey, title);`
	`276`	`+ localStorage.setItem(StorageUtil.previousPageTitleKey, title);`
`272`	`277`	`}`
`273`	`278`
`274`	`279`	`static getPreviousPageStartTime(): number {`