Start recording full resource timing

[linear]

also would be cool to use the PerformanceObserver API instead of polling for resources

[linear]

HIG-4639 Start recording full resource timing

[greptile-apps]

To implement full resource timing recording, follow these steps:

1. Modify Network Listener Utilities (/sdk/client/src/listeners/network-listener/utils/utils.ts):

   • Update matchPerformanceTimingsWithRequestResponsePair to ensure it captures and associates all relevant performance timing details with each network request.

2. Update First Load Listeners (/sdk/client/src/listeners/first-load-listeners.tsx):

   • In the FirstLoadListeners class, enhance the setupNetworkListener method to include capturing full resource timing information.

3. Integrate with ResourcesContext (/frontend/src/pages/Player/ResourcesContext/ResourcesContext.tsx):

   • Ensure the useResources hook processes and includes the full resource timing data in its state, making it available to the consuming components.

4. Display in UI (/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx):

   • Adjust the NetworkResourcePanel, NetworkResourceDetails, and WebSocketDetails components to display the full resource timing information.

These steps target specific enhancements in the codebase to capture and display full resource timing, leveraging existing structures for network resource handling.

References

/frontend/src/pages/Player/ResourcesContext/ResourcesContext.tsx
/sdk/client/src/listeners/network-listener/utils/utils.ts
/frontend/src/pages/Player/RightPlayerPanel/components/NetworkResourcePanel/NetworkResourcePanel.tsx
/sdk/client/src/listeners/first-load-listeners.tsx

Ask Greptile