fix: add prerender offset to tti events (#662)

Author: ishajos

app/index.html

@@ -114,6 +114,42 @@
         <button id="recordPageView" onclick="recordPageView()">
             Record Page View
         </button>
+        <hr />
+        <button id="prerenderedNav" onclick="navigatePrerendered()">
+            Navigate with Prerendering
+        </button>
+        <button id="standardNav" onclick="navigateStandard()">
+            Navigate without Prerendering
+        </button>
+
+        <script>
+            function navigatePrerendered() {
+                const speculationRules = document.createElement('script');
+                speculationRules.type = 'speculationrules';
+
+                // Define the prerender rule for index.html
+                const rules = {
+                    prerender: [
+                        {
+                            source: 'list',
+                            urls: ['./time_to_interactive_event.html']
+                        }
+                    ]
+                };
+
+                speculationRules.textContent = JSON.stringify(rules);
+                document.head.appendChild(speculationRules);
+
+                setTimeout(() => {
+                    window.location.href = './time_to_interactive_event.html';
+                }, 300);
+            }
+
+            function navigateStandard() {
+                window.location.href = './time_to_interactive_event.html';
+            }
+        </script>
+        <hr />
         <span id="request"></span>
         <span id="response"></span>
         <table>

src/plugins/event-plugins/TTIPlugin.ts

@@ -7,10 +7,15 @@ export const TTI_EVENT_PLUGIN_ID = 'time-to-interactive';
 
 export class TTIPlugin extends InternalPlugin {
     protected fpsEnabled;
+    private prerenderedPageLoad;
+    private normalPageLoad;
 
     constructor(fpsMeasurementEnabled = false) {
         super(TTI_EVENT_PLUGIN_ID);
         this.fpsEnabled = fpsMeasurementEnabled;
+        this.prerenderedPageLoad = false;
+        this.normalPageLoad = true;
+        this.checkPrerenderingActivity();
     }
 
     enable(): void {
@@ -26,9 +31,51 @@ export class TTIPlugin extends InternalPlugin {
     }
 
     onload(): void {
-        onTTI(this.handleTTI, { fpsEnabled: this.fpsEnabled });
+        if (this.normalPageLoad || this.prerenderedPageLoad) {
+            this.recordTTIEvent();
+        }
     }
 
+    private recordTTIEvent = (): void => {
+        onTTI(this.handleTTI, { fpsEnabled: this.fpsEnabled });
+    };
+
+    private checkPrerenderingActivity = (): void => {
+        if (
+            typeof document !== 'undefined' &&
+            typeof document.prerendering === 'boolean' &&
+            document.prerendering
+        ) {
+            this.normalPageLoad = false;
+            document.addEventListener('prerenderingchange', () => {
+                this.prerenderedPageLoad = true;
+                this.recordTTIEvent();
+            });
+        }
+
+        if (
+            typeof performance !== 'undefined' &&
+            typeof performance.getEntriesByType === 'function'
+        ) {
+            try {
+                const entries = performance.getEntriesByType('navigation');
+                if (entries && entries.length > 0) {
+                    const navigation = entries[0];
+                    if (
+                        navigation &&
+                        navigation.activationStart &&
+                        navigation.activationStart > 0
+                    ) {
+                        this.prerenderedPageLoad = true;
+                        this.normalPageLoad = false;
+                    }
+                }
+            } catch (e) {
+                console.debug('Error accessing Performance API:', e);
+            }
+        }
+    };
+
     private handleTTI = (metric: TTIMetric): void => {
         const ttiEvent: TimeToInteractiveEvent = {
             version: '1.0.0',

src/plugins/event-plugins/__integ__/TTIPluginPrerender.test.ts

@@ -0,0 +1,114 @@
+import {
+    STATUS_202,
+    REQUEST_BODY,
+    RESPONSE_STATUS
+} from '../../../test-utils/integ-test-utils';
+import { Selector } from 'testcafe';
+import { TIME_TO_INTERACTIVE_EVENT_TYPE } from '../../utils/constant';
+
+const testButton: Selector = Selector(`#testButton`);
+const dispatch: Selector = Selector(`#dispatch`);
+const prerenderButton: Selector = Selector(`#prerenderedNav`);
+const standardNavButton: Selector = Selector(`#standardNav`);
+
+// Add a longer wait time to ensure TTI events are captured
+const TTI_WAIT_TIME = 1000;
+
+fixture('TTI Plugin Prerender Navigation').page(
+    'http://localhost:8080/index.html'
+);
+
+test('prerendered navigation records TTI events', async (t: TestController) => {
+    const browser = t.browser.name;
+    // Skip firefox, till Firefox supports longtasks
+    if (browser === 'Firefox') {
+        return 'Test is skipped';
+    }
+
+    // Click the prerendered navigation button to navigate to index.html
+    await t.click(prerenderButton).wait(1000);
+
+    await t
+        .click(testButton)
+        .wait(100)
+        .click(dispatch)
+        .wait(3000)
+        .click(dispatch)
+        .expect(RESPONSE_STATUS.textContent)
+        .eql(STATUS_202.toString())
+        .expect(REQUEST_BODY.textContent)
+        .contains('BatchId');
+
+    // Check if events were recorded
+    await t
+        .expect(RESPONSE_STATUS.textContent)
+        .eql(STATUS_202.toString())
+        .expect(REQUEST_BODY.textContent)
+        .contains('BatchId');
+
+    // Verify TTI events were recorded
+    const events = JSON.parse(await REQUEST_BODY.textContent).RumEvents.filter(
+        (e) => e.type === TIME_TO_INTERACTIVE_EVENT_TYPE
+    );
+
+    // We should have at least one TTI event
+    await t.expect(events.length).gte(1);
+
+    // Check the TTI event structure
+    if (events.length > 0) {
+        const ttiEvent = JSON.parse(events[0].details);
+        await t.expect(ttiEvent.value).typeOf('number');
+    }
+
+    // Navigate back to the test page for the next test
+    await t.navigateTo('http://localhost:8080/index.html');
+});
+
+test('standard navigation records TTI events', async (t: TestController) => {
+    const browser = t.browser.name;
+    // Skip firefox, till Firefox supports longtasks
+    if (browser === 'Firefox') {
+        return 'Test is skipped';
+    }
+
+    // Click the standard navigation button to navigate to index.html
+    await t.click(standardNavButton).wait(1000);
+
+    // On index.html, wait for TTI to be calculated
+    await t.wait(TTI_WAIT_TIME);
+
+    await t
+        .click(testButton)
+        .wait(100)
+        .click(dispatch)
+        .wait(3000)
+        .click(dispatch)
+        .expect(RESPONSE_STATUS.textContent)
+        .eql(STATUS_202.toString())
+        .expect(REQUEST_BODY.textContent)
+        .contains('BatchId');
+
+    // Check if events were recorded
+    await t
+        .expect(RESPONSE_STATUS.textContent)
+        .eql(STATUS_202.toString())
+        .expect(REQUEST_BODY.textContent)
+        .contains('BatchId');
+
+    // Verify TTI events were recorded
+    const events = JSON.parse(await REQUEST_BODY.textContent).RumEvents.filter(
+        (e) => e.type === TIME_TO_INTERACTIVE_EVENT_TYPE
+    );
+
+    // We should have at least one TTI event
+    await t.expect(events.length).gte(1);
+
+    // Check the TTI event structure
+    if (events.length > 0) {
+        const ttiEvent = JSON.parse(events[0].details);
+        await t.expect(ttiEvent.value).typeOf('number');
+    }
+
+    // Navigate back to the test page for the next test
+    await t.navigateTo('http://localhost:8080/index.html');
+});

src/plugins/event-plugins/__tests__/TTIPlugin.test.ts

@@ -17,14 +17,28 @@ jest.mock('../../../time-to-interactive/TimeToInteractive', () => {
 });
 
 describe('Time to Interactive - Plugin Tests', () => {
+    let originalPerformance: any;
+
     beforeEach(() => {
         // setup
         mockLongTaskPerformanceObserver();
         record.mockClear();
+
+        originalPerformance = global.performance;
+
+        global.performance = {
+            ...originalPerformance,
+            getEntriesByType: jest.fn().mockReturnValue([
+                {
+                    activationStart: 0
+                }
+            ])
+        };
     });
 
     afterEach(() => {
         jest.clearAllMocks();
+        global.performance = originalPerformance;
     });
 
     test('When TTI resolves successfully, an event is recorded by plugin', async () => {
@@ -101,3 +115,108 @@ describe('Time to Interactive - Plugin Tests', () => {
         expect(record).toHaveBeenCalled();
     });
 });
+
+describe('Prerendering Tests', () => {
+    test('Plugin detects document.prerendering is true', async () => {
+        const originalDescriptor = Object.getOwnPropertyDescriptor(
+            document,
+            'prerendering'
+        );
+
+        try {
+            // Define document.prerendering as true
+            Object.defineProperty(document, 'prerendering', {
+                configurable: true,
+                value: true
+            });
+
+            const plugin: TTIPlugin = new TTIPlugin();
+
+            plugin.load(context);
+
+            const prerenderingChangeEvent = new Event('prerenderingchange');
+            document.dispatchEvent(prerenderingChangeEvent);
+
+            expect(plugin).toBeDefined();
+        } finally {
+            if (originalDescriptor) {
+                Object.defineProperty(
+                    document,
+                    'prerendering',
+                    originalDescriptor
+                );
+            } else {
+                delete (document as any).prerendering;
+            }
+        }
+    });
+
+    test('Plugin handles missing Performance API gracefully', async () => {
+        const originalPerformance = global.performance;
+
+        try {
+            global.performance = {
+                ...originalPerformance,
+                getEntriesByType: undefined
+            } as any;
+
+            const plugin: TTIPlugin = new TTIPlugin();
+
+            plugin.load(context);
+
+            expect(plugin).toBeDefined();
+        } finally {
+            global.performance = originalPerformance;
+        }
+    });
+
+    test('Plugin handles Performance API errors gracefully', async () => {
+        // Mock performance.getEntriesByType to throw an error
+        global.performance.getEntriesByType = jest
+            .fn()
+            .mockImplementation(() => {
+                throw new Error('Test error');
+            });
+
+        const plugin: TTIPlugin = new TTIPlugin();
+
+        expect(() => plugin.load(context)).not.toThrow();
+    });
+
+    test('Plugin records TTI event on normal page load', async () => {
+        global.performance.getEntriesByType = jest.fn().mockReturnValue([
+            {
+                activationStart: 0 // Zero value indicates normal page load
+            }
+        ]);
+
+        const plugin: TTIPlugin = new TTIPlugin();
+
+        plugin.load(context);
+
+        await new Promise((resolve) => process.nextTick(resolve));
+
+        expect(record).toHaveBeenCalledWith(TIME_TO_INTERACTIVE_EVENT_TYPE, {
+            value: 201,
+            version: '1.0.0'
+        });
+    });
+
+    test('Plugin records TTI event for prerendered page', async () => {
+        global.performance.getEntriesByType = jest.fn().mockReturnValue([
+            {
+                activationStart: 100 // Non-zero value indicates prerendering
+            }
+        ]);
+
+        const plugin: TTIPlugin = new TTIPlugin();
+
+        plugin.load(context);
+
+        await new Promise((resolve) => process.nextTick(resolve));
+        expect(record).toHaveBeenCalledWith(TIME_TO_INTERACTIVE_EVENT_TYPE, {
+            value: 201,
+            version: '1.0.0'
+        });
+    });
+});