feat: react scan #445
feat: react scan #445
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Playwright test results
Details
Failed testsCommon persona - mobile › tests/aila-chat/full-romans.mobile.test.ts › Full aila flow with Romans fixture Flaky testsNo persona › tests/modifiy-lesson.test.ts › Modify a lesson plan › Modify a lesson resource Skipped testsNo persona › tests/auth.test.ts › authenticate through Clerk UI |
| (a, b) => b.renderCount - a.renderCount, | ||
| ); | ||
|
|
||
| console.table(sortedReports); |
There was a problem hiding this comment.
Do we need to add a table method on the logger? This will probably give us an unexpected use of console linting warning?
| }; | ||
| }); | ||
| await page.addInitScript(() => { | ||
| console.log("Window object:", typeof window); |
There was a problem hiding this comment.
Should this be using the logger?
There was a problem hiding this comment.
Was having issues with the test so this was for debugging, i've removed the test now for now. It's not working in the preview builds unfortunately.
| window.process.env.NEXT_PUBLIC_ENABLE_RENDER_SCAN = "true"; | ||
| } | ||
|
|
||
| // console.log("Window process:", window.process); |
packages/logger/index.ts
Outdated
| @@ -31,7 +31,7 @@ type ChildKey = | |||
| | "aila:stream" | |||
| | "aila:rag" | |||
| | "aila:testing" | |||
| | "aila:chat" | |||
| | "aila:chat-performance" | |||
There was a problem hiding this comment.
aila is for the aila package. Maybe you want performance, chat:performance or ui:performance?
package.json
Outdated
| "dev": "FORCE_COLOR=1 turbo dev --parallel --ui=stream --log-prefix=none --filter=!@oakai/db", | ||
| "dev:react-scan": "NEXT_PUBLIC_ENABLE_RENDER_SCAN=true turbo dev --parallel --ui=stream --log-prefix=none --filter=!@oakai/db", |
There was a problem hiding this comment.
Could this be something along the lines of NEXT_PUBLIC_ENABLE_RENDER_SCAN=true pnpm dev?
| .filter(([componentName]) => { | ||
| // Exclude styled components and other library-generated components | ||
| const isCustomComponent = | ||
| // Check if name exists and doesn't start with known library prefixes | ||
| componentName && | ||
| !componentName.startsWith("Styled") && | ||
| !componentName.includes("styled") && | ||
| !componentName.startsWith("_") && | ||
| !componentName.includes("$") && | ||
| componentName !== "div" && | ||
| componentName !== "span"; | ||
|
|
||
| return isCustomComponent; | ||
| }) | ||
| .map(transformReport); |
There was a problem hiding this comment.
This is a good candidate for a function to hide these stringy details out of the way and make the hook easier to follow
|
|
🎉 This PR is included in version 1.20.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
Introduced react-scan for performance monitoring
Added useReactScan hooks that can be dropped into component to track render of all or passed in component. Will console table of all components or log of individual component.
Integrated an example Playwright tests to validate unnecessary renders. (unfortunately only works locally , so have removed for now)
dev:react-scan: Enables React Scan for local performance monitoring.dev:react-scan-monitor: Tracks performance in the React Scan dashboard.For dashboard access, ask me for login credentials.
React Scan dashboard URL: React Scan Dashboard
https://github.com/aidenybai/react-scan
How to test
Run
dev:react-scanand go to lesson chatRun
dev:react-scan-monitorand interact with the site, go to React Scan Dashboard to see render reportScreenshots
react-scan monitoring dashboard
logs from useReactScan
react-scan overlay with number of renders
Checklist