Automatically capture asset timing measurements

[AbhiPrasad]

Problem Statement

We already take advantage of the https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API to capture network timing about resources getting loaded in.

We grab info about transfer size here:

sentry-javascript/packages/tracing/src/browser/metrics/index.ts

Lines 330 to 338 in cba9861

	if ('transferSize' in entry) {
	data['Transfer Size'] = entry.transferSize;
	}
	if ('encodedBodySize' in entry) {
	data['Encoded Body Size'] = entry.encodedBodySize;
	}
	if ('decodedBodySize' in entry) {
	data['Decoded Body Size'] = entry.decodedBodySize;
	}

Solution Brainstorm

Like getsentry/sentry#36012, let's comb through all the resource spans and aggregate their timing data into measurements.

This will allow us to draw insights about total assets loaded and how many resource bytes we are loading on a page.

There is an argument here that we can do this automatically in Relay to save bundle size, as we are just looking at the resource.X spans anyway.

[k-fish]

Couple notes:

• If all the fields are 0 you can roughly determine that there is an issue with the timing header, since this information is only provided if the header set. Calculating total transfer would be misleading without including information about the potentially 'missing' asset sizes.
• Relay probably makes more sense since it's just some arithmetic, there shouldn't be additional data to collect.