How can I programmatically retreive the request timing metrics for api calls going from my app in browser

Question

I basically want all the highlighted information for api calls going from my app after the app has been loaded.

I am aware that there are performance timing apis like https://developer.mozilla.org/en-US/docs/Web/API/Performance using which we get the above mentioned fileds but the issue is this api only give the network requests at/up to page load and cannot poll for subsequent async/ajax calls.

I am wondering if this is a limitation currently or if there exists some other api I can use to retrieve the above mentioned metrics.

Answer 1

Did you look at PerformanceObserver? It observes these performance measurement events and is notified of the new entries too.

You need to:

1. create an instance of the observer, and
2. let the observer know what type of entries you want to observe.

const observer = new PerformanceObserver(list => {
      list.getEntries().forEach(doSomething);
    });

observer.observe({ entryTypes: ["resource"] });

entrytypes is supposed to be an array of the PerformanceEntry.entryType. resource is what you pass for resources.