Hot reloading of traces run into streaming issues on some browsers #18

Issue Identified

When utilising the recommended debug loop of importing traces onto https://ui.perfetto.dev/ I noticed that doing so via the webUI provided by watch_trace.html by running python watch_trace.py actually throws BrokenPipeError: [Errno 32] Broken pipe when /trace.json is fetched via await fetch(traceUrl);.

Steps to reproduce

Issue reproduced on Chrome Version 143.0.7499.193

1. Execute python perf_takehome.py Tests.test_kernel_trace to generate a local trace.json
2. Run python watch_trace.py and wait for a tab of http://localhost:8000/ to open
3. Select /trace.json and press "Open Perfetto"
4. Perfetto tab will not open, and BrokenPipeError: [Errno 32] Broken pipe error should appear in your python terminal

Solution proposal

Investigating further, when calling /trace.json directly in the browser actually works fine, when checking the Javascript code responsible for this we see that blob is populated via

const resp = await fetch(traceUrl);
const blob = await resp.blob();

This raises issues in some browsers as our absence of a Content-Length header (which is fine for streaming) is actually causing the browser to abort the stream if the /trace.json is big enough.

To fix this for those browsers, the fetching logic in Javascript can be modified to populate chunks with a reader as they come and then populated into a chunk manually.

const resp = await fetch(traceUrl);
const reader = resp.body.getReader();
const chunks = [];

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  chunks.push(value);
}
const blob = new Blob(chunks);

Applying this change allows the request to succeed when called within the Javascript in the tab served by python watch_trace.py