Instrumentation for capturing resource loads after load event

[mhennoch]

Currently document-load instrumentation captures resources(images, scripts etc. ) when load event fires. Everything happening after that moment is not captured. One example where this could be useful is pages with infinite scrolling eg. twitter where images etc. are loaded as you scroll.

Here is a simplified version of what we internally use at the moment:

window.addEventListener('load', () => {
    this.observer = new PerformanceObserver((list) => {
          list.getEntries().forEach(entry => {
              this._createSpan(entry);
          });
      });
      this.observer.observe({ entryTypes: ['resource'] });
});

The idea is simple but there are some gotchas: making sure not to capture same resource twice(once on page load and once in this), configuration eg. which resource types are captured, every span is in a different trace as we won't have a parent, testing this is quite tricky etc.

We would ideally like to have this upstreamed either as a separate instrumentation or part of something else eg. document-load.
Thoughts?

[obecny]

yes - create new plugin, don't try to squeeze too many edge cases into this plugin. The plugin name is document load and I think it does exactly what the name stands for.