feat(infra) - Add logging for slow rendering

[shishu314]

TLDR

Increment counter for slow render metrics when rendering is more than 200ms

Dive Deeper

I'm unable to mock and test out the function. We have render mocked out, and as a result we do not have any access to the internal callback. Even if we did we don't have any ways to mock it out so I am not sure how to test this.

Reviewer Test Plan

Add a breakpoint into the onRender to see whether or not it's triggered.

Testing Matrix

	🍏	🪟	🐧
npm run	x	❓	❓
npx	x	❓	❓
Docker	❓	❓	❓
Podman	❓	-	-
Seatbelt	❓	-	-

Linked issues / bugs

Fixes #10600

[gemini-code-assist]

Summary of Changes

Hello @shishu314, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the application's infrastructure by integrating performance monitoring for UI rendering. It introduces a mechanism to detect and log slow-rendering UI components, specifically those taking over 200 milliseconds, which will help in identifying and addressing potential performance bottlenecks to improve user experience.

Highlights

• New Telemetry Metric: Introduced a new telemetry metric, SLOW_RENDER_COUNT, to track instances where UI components take longer than 200ms to render.
• UI Performance Monitoring: Implemented logic within the HistoryItemDisplay component to measure its render duration and increment the SLOW_RENDER_COUNT if the rendering time exceeds the defined threshold of 200ms.
• Comprehensive Testing: Added new unit tests for both the HistoryItemDisplay component and the core telemetry module to ensure the recordSlowRender function correctly logs slow renders and ignores fast ones, and that the metric is only recorded when telemetry is initialized.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new telemetry metric to log slow component renders, which is a valuable addition for performance monitoring. The implementation across the telemetry and metrics files is well-structured and includes corresponding tests. However, I've identified a critical logic issue in the React component where this metric is used. The useEffect hook is configured in a way that will lead to incorrect render time calculations and false-positive reports upon re-renders. I've provided a suggestion to correct this behavior.

[github-actions]

Size Change: +186 B (0%)

Total Size: 20.3 MB

ℹ️ View Unchanged

Filename	Size	Change
./bundle/gemini.js	20.3 MB	+186 B (0%)
./bundle/sandbox-macos-permissive-closed.sb	1.03 kB	0 B
./bundle/sandbox-macos-permissive-open.sb	890 B	0 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB	0 B
./bundle/sandbox-macos-restrictive-closed.sb	3.29 kB	0 B
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB	0 B
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB	0 B

_{compressed-size-action}

[jacob314]