stabilize timing issues

index.html

@@ -37,6 +37,7 @@
     #network-table {
       grid-area: b;
       cursor: pointer;
+      overflow: scroll;
     }
 
     .selected-row {
@@ -83,6 +84,7 @@
       const networkTableBody = document.querySelector('#network-table tbody');
       const networkDetail = document.querySelector('#network-detail');
       const networkDetailEditor = new JSONEditor(networkDetail, {})
+      const networkDetailDelaySeconds = 5;
       let networkBucket = null;
 
       function onNewNetworkData(raw) {
@@ -145,21 +147,24 @@
       });
 
       function networkOnSeek(elapsed) {
-        const records = networkBucket[elapsed] || [];
         const rows = [];
-        console.log(records);
-        for (let recordIdx = 0; recordIdx < records.length; recordIdx++) {
-          const record = records[recordIdx];
-          if (record.requestMethod === "OPTIONS") {
-            continue;
+
+        for (let currentTime = elapsed - networkDetailDelaySeconds; currentTime <= elapsed; currentTime++) {
+          const records = networkBucket[currentTime] || [];
+          for (let recordIdx = 0; recordIdx < records.length; recordIdx++) {
+            const record = records[recordIdx];
+            const contentType = record.responseHeaders["content-type"] || "";
+            if (record.requestMethod === "OPTIONS" || record.requestType != "fetch" || !contentType.toLowerCase().includes("json")) {
+              continue;
+            }
+            rows.push(`
+                <tr data-id="${currentTime}-${recordIdx}">
+                <td>${record.responseStatus}</td>
+                <td>${record.requestMethod}</td>
+                <td>${record.requestUrl}</td>
+              </tr>
+            `)
           }
-          rows.push(`
-              <tr data-id="${elapsed}-${recordIdx}">
-              <td>${record.responseStatus}</td>
-              <td>${record.requestMethod}</td>
-              <td>${record.requestUrl}</td>
-            </tr>
-          `)
         }
         networkTableBody.innerHTML = rows.join("");
       }

index.js

@@ -1,39 +1,56 @@
 'use strict';
 
+const VERSION = '1.0'; // This will determine breaking changes on the record format.
 const puppeteer = require('puppeteer');
 const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');
 const fs = require('fs');
 
-const url = "https://app.dev.bluecrewenv.com/app.html#!/roster";
+if (process.argv.length != 3) {
+  console.error(`Usage: ${process.argv[0]} ${process.argv[1]} <url>`);
+  process.exit(1);
+} 
 
-function asleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
+const url = process.argv[2];
 
 (async () => {
-  const browser = await puppeteer.launch({ headless: false, devtools: false });
+  const browser = await puppeteer.launch({
+    headless: false, devtools: false, defaultViewport: null, args: [
+      "--start-fullscreen",
+    ]
+  });
   const page = await browser.newPage();
-  await page.setViewport({ width: 1366, height: 768});
   const customUA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36';
   const records = [];
 
   await page.setUserAgent(customUA);
 
   page.on('response', async response => {
-    if (response.request().resourceType() != "xhr") {
+    if (response.timing() === null) {
       return;
     }
+    const timestamp = Date.now();
+    const timing = response.timing();
     const requestUrl = response.url();
     const responseHeaders = response.headers();
     const responseStatus = response.status();
     const requestMethod = response.request().method();
+    const requestType = response.request().resourceType();
+    let responseJson;
+    try {
+      responseJson = await response.json();
+    } catch (err) {
+      responseJson = { "error": `invalid json: ${err}` };
+    }
 
     records.push({
-      timestamp: Date.now(),
+      timestamp,
+      timing,
       requestUrl,
       responseHeaders,
       responseStatus,
       requestMethod,
+      requestType,
+      responseJson,
     });
   });
 
@@ -43,24 +60,32 @@ function asleep(ms) {
   console.log(`Going to ${url}`)
   page.goto(url);
 
-  // TODO: Figure out how to close the browser
-  await asleep(10000);
+  await new Promise((resolve) => {
+    page.on("close", () => {
+      resolve();
+    });
+  })
   await recorder.stop();
   console.log("Stopped recorder");
-  // const pages = await browser.pages();
-  // for (let i = 0; i < pages.length; i++) {
-  //   await pages[i].close();
-  // }
-  // await browser.close();
-  // console.log("Closed browser");
 
   const report = {
+    version: VERSION,
     startTimestamp,
-    records: records,
+    records,
   };
 
   const reportJson = JSON.stringify(report, null, 2);
   const reportPath = `report_${startTimestamp.toString()}.json`
   fs.writeFileSync(reportPath, reportJson);
   console.log(`Recorded to ${reportPath}`)
+
+  // HACK:
+  // This should be the correct way to exit. But, it always hangs. For now, use process.exit(0) to cleanup
+  // const pages = await browser.pages();
+  // for (let i = 0; i < pages.length; i++) {
+  //   await pages[i].close();
+  // }
+  // await browser.close();
+  // console.log("Closed browser");
+  process.exit(0);
 })()