Skip to content

Commit b04e960

Browse files
brendan-kellambrendan-kellam
authored
debug: add react scan (#1040)
1 parent b0b0c3c commit b04e960

File tree

5 files changed

+152
-23
lines changed

5 files changed

+152
-23
lines changed

‎CONTRIBUTING.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,20 @@ Want to take on an issue? Leave a comment and a maintainer may assign it to you
103103
104104
10. Start searching at `http://localhost:3000`.
105105
106+
## Debugging
107+
108+
### React Scan
109+
110+
[React Scan](https://react-scan.com) highlights components that are re-rendering, which is useful for diagnosing unnecessary renders and performance issues. It only runs in development mode.
111+
112+
To enable it, set the following in your `.env.development.local`:
113+
114+
```sh
115+
DEBUG_ENABLE_REACT_SCAN=true
116+
```
117+
118+
Then restart the dev server. Components that re-render will be highlighted in the browser.
119+
106120
## Pull Request Expectations
107121
108122
### Issue First Policy

‎packages/shared/src/env.server.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@ const options = {
241241
SOURCEBOT_CHAT_MAX_STEP_COUNT: numberSchema.default(100),
242242

243243
DEBUG_WRITE_CHAT_MESSAGES_TO_FILE: booleanSchema.default('false'),
244+
DEBUG_ENABLE_REACT_SCAN: booleanSchema.default('false'),
244245

245246
LANGFUSE_SECRET_KEY: z.string().optional(),
246247

‎packages/web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@
224224
"raw-loader": "^4.0.2",
225225
"react-email": "^5.1.0",
226226
"react-grab": "^0.1.23",
227+
"react-scan": "^0.5.3",
227228
"tailwindcss": "^3.4.1",
228229
"tsx": "^4.19.2",
229230
"typescript": "^5",

‎packages/web/src/app/layout.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,22 @@ export default function RootLayout({
3636
suppressHydrationWarning
3737
>
3838
<head>
39-
{process.env.NODE_ENV === "development" && (
39+
{env.NODE_ENV === "development" && env.DEBUG_ENABLE_REACT_SCAN === 'true' && (
40+
<Script
41+
src="//unpkg.com/react-scan/dist/auto.global.js"
42+
crossOrigin="anonymous"
43+
strategy="beforeInteractive"
44+
/>
45+
)}
46+
47+
{env.NODE_ENV === "development" && (
4048
<Script
4149
src="//unpkg.com/react-grab/dist/index.global.js"
4250
crossOrigin="anonymous"
4351
strategy="beforeInteractive"
4452
/>
4553
)}
46-
{process.env.NODE_ENV === "development" && (
54+
{env.NODE_ENV === "development" && (
4755
<Script
4856
src="//unpkg.com/@react-grab/mcp/dist/client.global.js"
4957
strategy="lazyOnload"

‎yarn.lock‎

Lines changed: 126 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -910,7 +910,7 @@ __metadata:
910910
languageName: node
911911
linkType: hard
912912

913-
"@babel/core@npm:^7.24.4":
913+
"@babel/core@npm:^7.24.4, @babel/core@npm:^7.26.0":
914914
version: 7.29.0
915915
resolution: "@babel/core@npm:7.29.0"
916916
dependencies:
@@ -946,29 +946,29 @@ __metadata:
946946
languageName: node
947947
linkType: hard
948948

949-
"@babel/generator@npm:^7.28.5":
950-
version: 7.28.5
951-
resolution: "@babel/generator@npm:7.28.5"
949+
"@babel/generator@npm:^7.26.2, @babel/generator@npm:^7.29.0":
950+
version: 7.29.1
951+
resolution: "@babel/generator@npm:7.29.1"
952952
dependencies:
953-
"@babel/parser": "npm:^7.28.5"
954-
"@babel/types": "npm:^7.28.5"
953+
"@babel/parser": "npm:^7.29.0"
954+
"@babel/types": "npm:^7.29.0"
955955
"@jridgewell/gen-mapping": "npm:^0.3.12"
956956
"@jridgewell/trace-mapping": "npm:^0.3.28"
957957
jsesc: "npm:^3.0.2"
958-
checksum: 10c0/9f219fe1d5431b6919f1a5c60db8d5d34fe546c0d8f5a8511b32f847569234ffc8032beb9e7404649a143f54e15224ecb53a3d11b6bb85c3203e573d91fca752
958+
checksum: 10c0/349086e6876258ef3fb2823030fee0f6c0eb9c3ebe35fc572e16997f8c030d765f636ddc6299edae63e760ea6658f8ee9a2edfa6d6b24c9a80c917916b973551
959959
languageName: node
960960
linkType: hard
961961

962-
"@babel/generator@npm:^7.29.0":
963-
version: 7.29.1
964-
resolution: "@babel/generator@npm:7.29.1"
962+
"@babel/generator@npm:^7.28.5":
963+
version: 7.28.5
964+
resolution: "@babel/generator@npm:7.28.5"
965965
dependencies:
966-
"@babel/parser": "npm:^7.29.0"
967-
"@babel/types": "npm:^7.29.0"
966+
"@babel/parser": "npm:^7.28.5"
967+
"@babel/types": "npm:^7.28.5"
968968
"@jridgewell/gen-mapping": "npm:^0.3.12"
969969
"@jridgewell/trace-mapping": "npm:^0.3.28"
970970
jsesc: "npm:^3.0.2"
971-
checksum: 10c0/349086e6876258ef3fb2823030fee0f6c0eb9c3ebe35fc572e16997f8c030d765f636ddc6299edae63e760ea6658f8ee9a2edfa6d6b24c9a80c917916b973551
971+
checksum: 10c0/9f219fe1d5431b6919f1a5c60db8d5d34fe546c0d8f5a8511b32f847569234ffc8032beb9e7404649a143f54e15224ecb53a3d11b6bb85c3203e573d91fca752
972972
languageName: node
973973
linkType: hard
974974

@@ -1271,23 +1271,23 @@ __metadata:
12711271
languageName: node
12721272
linkType: hard
12731273

1274-
"@babel/types@npm:^7.27.1, @babel/types@npm:^7.28.5":
1275-
version: 7.28.5
1276-
resolution: "@babel/types@npm:7.28.5"
1274+
"@babel/types@npm:^7.26.0, @babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0":
1275+
version: 7.29.0
1276+
resolution: "@babel/types@npm:7.29.0"
12771277
dependencies:
12781278
"@babel/helper-string-parser": "npm:^7.27.1"
12791279
"@babel/helper-validator-identifier": "npm:^7.28.5"
1280-
checksum: 10c0/a5a483d2100befbf125793640dec26b90b95fd233a94c19573325898a5ce1e52cdfa96e495c7dcc31b5eca5b66ce3e6d4a0f5a4a62daec271455959f208ab08a
1280+
checksum: 10c0/23cc3466e83bcbfab8b9bd0edaafdb5d4efdb88b82b3be6728bbade5ba2f0996f84f63b1c5f7a8c0d67efded28300898a5f930b171bb40b311bca2029c4e9b4f
12811281
languageName: node
12821282
linkType: hard
12831283

1284-
"@babel/types@npm:^7.28.6, @babel/types@npm:^7.29.0":
1285-
version: 7.29.0
1286-
resolution: "@babel/types@npm:7.29.0"
1284+
"@babel/types@npm:^7.27.1, @babel/types@npm:^7.28.5":
1285+
version: 7.28.5
1286+
resolution: "@babel/types@npm:7.28.5"
12871287
dependencies:
12881288
"@babel/helper-string-parser": "npm:^7.27.1"
12891289
"@babel/helper-validator-identifier": "npm:^7.28.5"
1290-
checksum: 10c0/23cc3466e83bcbfab8b9bd0edaafdb5d4efdb88b82b3be6728bbade5ba2f0996f84f63b1c5f7a8c0d67efded28300898a5f930b171bb40b311bca2029c4e9b4f
1290+
checksum: 10c0/a5a483d2100befbf125793640dec26b90b95fd233a94c19573325898a5ce1e52cdfa96e495c7dcc31b5eca5b66ce3e6d4a0f5a4a62daec271455959f208ab08a
12911291
languageName: node
12921292
linkType: hard
12931293

@@ -5344,6 +5344,24 @@ __metadata:
53445344
languageName: node
53455345
linkType: hard
53465346

5347+
"@preact/signals-core@npm:^1.7.0":
5348+
version: 1.14.0
5349+
resolution: "@preact/signals-core@npm:1.14.0"
5350+
checksum: 10c0/b9d39899bd24fae59c8b1a70d940dedb8f952d2e530b3cdc52c79de2df1f096b347fce6a52ed6cfd6f98dfe710741abe9f509ee746789023ff1dbde90152016d
5351+
languageName: node
5352+
linkType: hard
5353+
5354+
"@preact/signals@npm:^1.3.1":
5355+
version: 1.3.4
5356+
resolution: "@preact/signals@npm:1.3.4"
5357+
dependencies:
5358+
"@preact/signals-core": "npm:^1.7.0"
5359+
peerDependencies:
5360+
preact: 10.x
5361+
checksum: 10c0/57f90c1e1d797c1417d7dbeb492eb43b6cdd7a9bb153d66d4e87519d8f3621e3ee0740895a125f5f45eb593b6da9edd5cc501eb6428fbb837497ce8a620a8303
5362+
languageName: node
5363+
linkType: hard
5364+
53475365
"@prisma/client@npm:6.2.1":
53485366
version: 6.2.1
53495367
resolution: "@prisma/client@npm:6.2.1"
@@ -7405,6 +7423,22 @@ __metadata:
74057423
languageName: node
74067424
linkType: hard
74077425

7426+
"@rollup/pluginutils@npm:^5.1.3":
7427+
version: 5.3.0
7428+
resolution: "@rollup/pluginutils@npm:5.3.0"
7429+
dependencies:
7430+
"@types/estree": "npm:^1.0.0"
7431+
estree-walker: "npm:^2.0.2"
7432+
picomatch: "npm:^4.0.2"
7433+
peerDependencies:
7434+
rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
7435+
peerDependenciesMeta:
7436+
rollup:
7437+
optional: true
7438+
checksum: 10c0/001834bf62d7cf5bac424d2617c113f7f7d3b2bf3c1778cbcccb72cdc957b68989f8e7747c782c2b911f1dde8257f56f8ac1e779e29e74e638e3f1e2cac2bcd0
7439+
languageName: node
7440+
linkType: hard
7441+
74087442
"@rollup/rollup-android-arm-eabi@npm:4.59.0":
74097443
version: 4.59.0
74107444
resolution: "@rollup/rollup-android-arm-eabi@npm:4.59.0"
@@ -9035,6 +9069,7 @@ __metadata:
90359069
react-icons: "npm:^5.3.0"
90369070
react-markdown: "npm:^10.1.0"
90379071
react-resizable-panels: "npm:^2.1.1"
9072+
react-scan: "npm:^0.5.3"
90389073
recharts: "npm:^2.15.3"
90399074
rehype-raw: "npm:^7.0.0"
90409075
rehype-sanitize: "npm:^6.0.0"
@@ -9613,6 +9648,15 @@ __metadata:
96139648
languageName: node
96149649
linkType: hard
96159650

9651+
"@types/node@npm:^20.17.9":
9652+
version: 20.19.37
9653+
resolution: "@types/node@npm:20.19.37"
9654+
dependencies:
9655+
undici-types: "npm:~6.21.0"
9656+
checksum: 10c0/8420353aee776ae5c1e9720058949909a0e908fa2af85501e9db2645bb9f9acd7d767890f8aaee34d375e6f8b5f550a9a169e908d2d8cf7d5daf63dce64092a0
9657+
languageName: node
9658+
linkType: hard
9659+
96169660
"@types/nodemailer@npm:^6.4.17":
96179661
version: 6.4.17
96189662
resolution: "@types/nodemailer@npm:6.4.17"
@@ -18838,6 +18882,13 @@ __metadata:
1883818882
languageName: node
1883918883
linkType: hard
1884018884

18885+
"preact@npm:^10.25.1":
18886+
version: 10.29.0
18887+
resolution: "preact@npm:10.29.0"
18888+
checksum: 10c0/d111381e5b48335e3a797a03adb83521cf5e9bdf880570fb2eff4fe9da9c82e6dedcbdf54538b1ed8f60bf813a0df0f4891b03dc32140ad93f8f720a8812dd5c
18889+
languageName: node
18890+
linkType: hard
18891+
1884118892
"preact@npm:^10.28.2":
1884218893
version: 10.28.3
1884318894
resolution: "preact@npm:10.28.3"
@@ -19392,6 +19443,36 @@ __metadata:
1939219443
languageName: node
1939319444
linkType: hard
1939419445

19446+
"react-scan@npm:^0.5.3":
19447+
version: 0.5.3
19448+
resolution: "react-scan@npm:0.5.3"
19449+
dependencies:
19450+
"@babel/core": "npm:^7.26.0"
19451+
"@babel/generator": "npm:^7.26.2"
19452+
"@babel/types": "npm:^7.26.0"
19453+
"@preact/signals": "npm:^1.3.1"
19454+
"@rollup/pluginutils": "npm:^5.1.3"
19455+
"@types/node": "npm:^20.17.9"
19456+
bippy: "npm:^0.5.30"
19457+
commander: "npm:^14.0.0"
19458+
esbuild: "npm:^0.25.0"
19459+
estree-walker: "npm:^3.0.3"
19460+
picocolors: "npm:^1.1.1"
19461+
preact: "npm:^10.25.1"
19462+
prompts: "npm:^2.4.2"
19463+
unplugin: "npm:2.1.0"
19464+
peerDependencies:
19465+
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
19466+
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
19467+
dependenciesMeta:
19468+
unplugin:
19469+
optional: true
19470+
bin:
19471+
react-scan: bin/cli.js
19472+
checksum: 10c0/e0f1743ef5f512c8f7e0a520b700849bf5dcf8d54dac2dbd11e929148bac5ed2ec4a296b6dbb132ab1f0b8792228e77dc29c102d2fde7d15531d1ae9b64b78bc
19473+
languageName: node
19474+
linkType: hard
19475+
1939519476
"react-smooth@npm:^4.0.4":
1939619477
version: 4.0.4
1939719478
resolution: "react-smooth@npm:4.0.4"
@@ -22033,6 +22114,13 @@ __metadata:
2203322114
languageName: node
2203422115
linkType: hard
2203522116

22117+
"undici-types@npm:~6.21.0":
22118+
version: 6.21.0
22119+
resolution: "undici-types@npm:6.21.0"
22120+
checksum: 10c0/c01ed51829b10aa72fc3ce64b747f8e74ae9b60eafa19a7b46ef624403508a54c526ffab06a14a26b3120d055e1104d7abe7c9017e83ced038ea5cf52f8d5e04
22121+
languageName: node
22122+
linkType: hard
22123+
2203622124
"undici-types@npm:~7.16.0":
2203722125
version: 7.16.0
2203822126
resolution: "undici-types@npm:7.16.0"
@@ -22142,6 +22230,16 @@ __metadata:
2214222230
languageName: node
2214322231
linkType: hard
2214422232

22233+
"unplugin@npm:2.1.0":
22234+
version: 2.1.0
22235+
resolution: "unplugin@npm:2.1.0"
22236+
dependencies:
22237+
acorn: "npm:^8.14.0"
22238+
webpack-virtual-modules: "npm:^0.6.2"
22239+
checksum: 10c0/f41d4ee1ccc3d8478afdfb4d5f52ddd34bcd3157ebe5ac804b9c5d0afe1e3d6fad5ef44f7bbf030e8a1c671e145fcc8547be46e21d080bd9729f6e97d86f9fd3
22240+
languageName: node
22241+
linkType: hard
22242+
2214522243
"update-browserslist-db@npm:^1.1.1":
2214622244
version: 1.1.3
2214722245
resolution: "update-browserslist-db@npm:1.1.3"
@@ -22561,6 +22659,13 @@ __metadata:
2256122659
languageName: node
2256222660
linkType: hard
2256322661

22662+
"webpack-virtual-modules@npm:^0.6.2":
22663+
version: 0.6.2
22664+
resolution: "webpack-virtual-modules@npm:0.6.2"
22665+
checksum: 10c0/5ffbddf0e84bf1562ff86cf6fcf039c74edf09d78358a6904a09bbd4484e8bb6812dc385fe14330b715031892dcd8423f7a88278b57c9f5002c84c2860179add
22666+
languageName: node
22667+
linkType: hard
22668+
2256422669
"whatwg-encoding@npm:^3.1.1":
2256522670
version: 3.1.1
2256622671
resolution: "whatwg-encoding@npm:3.1.1"

0 commit comments

Comments
 (0)