pw_web: Limit LogViewer redraws to 100ms
Only call requestUpdate once every 100ms at most. The old behavior had
the log viewer being redrawn after every new log message. This was
causing the browser to crash when lots of logs arrived simultaneously.
Change-Id: I48afa731044f51d1d8466807039bb2440beaabdb
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/167852
Commit-Queue: Auto-Submit <auto-submit@pigweed-service-accounts.iam.gserviceaccount.com>
Pigweed-Auto-Submit: Anthony DiGirolamo <tonymd@google.com>
Presubmit-Verified: CQ Bot Account <pigweed-scoped@luci-project-accounts.iam.gserviceaccount.com>
Reviewed-by: Asad Memon <asadmemon@google.com>
diff --git a/pw_web/log-viewer/src/createLogViewer.ts b/pw_web/log-viewer/src/createLogViewer.ts
index 9219808..d7f6060 100644
--- a/pw_web/log-viewer/src/createLogViewer.ts
+++ b/pw_web/log-viewer/src/createLogViewer.ts
@@ -34,12 +34,19 @@
const logViewer = new RootComponent(state);
const logs: LogEntry[] = [];
root.appendChild(logViewer);
+ let lastUpdateTimeoutId: number = 0;
// Define an event listener for the 'logEntry' event
const logEntryListener = (logEntry: LogEntry) => {
logs.push(logEntry);
logViewer.logs = logs;
- logViewer.requestUpdate('logs', []);
+ if (lastUpdateTimeoutId) {
+ clearTimeout(lastUpdateTimeoutId);
+ }
+ // Call requestUpdate at most once every 100 milliseconds.
+ lastUpdateTimeoutId = setTimeout(() => {
+ logViewer.requestUpdate('logs', []);
+ }, 100);
};
// Add the event listener to the LogSource instance
