Improve display of filenames in component stack #12059

billyjanitsch · 2018-01-20T02:32:46Z

Fixes #12058, fixes #11519, and supercedes #11523.

FWIW, as a user, I really like the idea of only stripping the common head, but I understand that you want to start simple. :)

Relying on CI to run the test suite for now -- I tried to install Yarn but it clobbered my fnm installation. 😢

gaearon · 2018-01-20T13:13:20Z

packages/shared/describeComponentFrame.js

@@ -17,7 +17,7 @@ export default function(
    (name || 'Unknown') +
    (source
      ? ' (at ' +
-        source.fileName.replace(/^.*[\\\/]/, '') +
+        source.fileName.match(/[^\\\/]*([\\\/]index\.[^\\\/]+)?$/)[0] +


Could you add a comment with different things it’s supposed to match?

gaearon · 2018-01-20T20:10:18Z

Can you add some tests ensuring this works? Maybe you could manually create element objects with __source and then use some warning to test them on.

billyjanitsch · 2018-01-26T01:39:24Z

Sorry for the delay @gaearon. I'll come back to this and add some tests as soon as I'm able to get a Yarn env set up.

(If someone else wants to tackle this first, feel free to co-opt this PR!)

gaearon · 2018-02-05T10:40:49Z

Ping :-)

billyjanitsch · 2018-02-07T04:16:31Z

Sorry, I've been traveling and don't want to mess with my env again until I have a block of spare time. Np if you want to close this until I come back to it.

raunofreiberg · 2018-02-27T20:09:38Z

@billyjanitsch, I've created a working test case for your change - how would you like me to contribute to this PR :)? Create a PR to your forked repo or..?

billyjanitsch · 2018-02-27T21:19:33Z

Thanks @raunofreiberg, much appreciated! I gave you push access to my fork so you can update the PR directly, if you'd like.

raunofreiberg · 2018-02-27T23:21:54Z

Thanks @billyjanitsch. I've updated your PR, although the Danger tests seem to be failing again despite the #12295 fix.

@gaearon I couldn't find a decent way to use the toWarnDev API in order to test the warning stack trace, since the normalizeCodeLocInfo func replaces the whole trace with asterisks. For now, I used the spyOnDev method instead, which works. Although, any suggestions as to how would one approach this in another manner using the toWarnDev API? I thought about modifying the func itself to provide the full stack trace on some condition, but that seemed hacky and I'd rather get your 2 cents on it.

billyjanitsch · 2018-02-28T01:42:44Z

The tests are probably failing because my fork is based on an old master. Let me try rebasing.

Update: 🎉

raunofreiberg · 2018-03-13T12:56:15Z

Ping @gaearon 😄

TimNZ · 2018-05-07T20:46:01Z

Ping everyone 😉

gaearon · 2018-05-07T22:00:15Z

The only thing that holds me back from merging is I'm not confident this regex always works. :-)
Can you walk me through it?

gaearon · 2018-08-09T02:32:00Z

I didn't quite trust this regex so I rewrote with more comprehensive tests. Thank you for starting this!

pull-bot · 2018-08-09T02:40:11Z

ReactDOM: size: 🔺+0.1%, gzip: 🔺+0.2%

Details of bundled changes.

Comparing: fa824d0...69f7c41

react

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react.development.js	+1.0%	+1.2%	58.04 KB	58.6 KB	16.21 KB	16.42 KB	UMD_DEV
react.development.js	+1.1%	+1.4%	52.23 KB	52.79 KB	14.39 KB	14.59 KB	NODE_DEV
React-dev.js	+1.0%	+1.3%	50.06 KB	50.54 KB	13.8 KB	13.98 KB	FB_WWW_DEV

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.development.js	+0.1%	+0.1%	643 KB	643.56 KB	151 KB	151.19 KB	UMD_DEV
react-dom.production.min.js	🔺+0.1%	🔺+0.2%	96.27 KB	96.36 KB	31.21 KB	31.26 KB	UMD_PROD
react-dom.development.js	+0.1%	+0.1%	639.14 KB	639.7 KB	149.83 KB	150.02 KB	NODE_DEV
react-dom.production.min.js	🔺+0.1%	🔺+0.2%	96.26 KB	96.35 KB	30.74 KB	30.81 KB	NODE_PROD
react-dom-server.browser.development.js	+0.5%	+0.6%	102.25 KB	102.81 KB	27.24 KB	27.41 KB	UMD_DEV
react-dom-server.browser.development.js	+0.6%	+0.6%	98.38 KB	98.94 KB	26.3 KB	26.46 KB	NODE_DEV
react-dom-server.node.development.js	+0.6%	+0.6%	100.3 KB	100.86 KB	26.83 KB	26.99 KB	NODE_DEV
ReactDOM-dev.js	+0.1%	+0.1%	646.35 KB	646.83 KB	148.13 KB	148.31 KB	FB_WWW_DEV
ReactDOM-prod.js	🔺+0.1%	🔺+0.2%	278.1 KB	278.41 KB	52.2 KB	52.28 KB	FB_WWW_PROD
ReactDOMServer-dev.js	+0.5%	+0.6%	99.49 KB	99.98 KB	26 KB	26.16 KB	FB_WWW_DEV
react-dom.profiling.min.js	+0.1%	+0.2%	97.39 KB	97.49 KB	31.14 KB	31.2 KB	NODE_PROFILING
ReactDOM-profiling.js	+0.1%	+0.2%	281.39 KB	281.7 KB	52.92 KB	53.01 KB	FB_WWW_PROFILING

react-art

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-art.development.js	+0.1%	+0.2%	435.36 KB	435.92 KB	98.65 KB	98.83 KB	UMD_DEV
react-art.production.min.js	🔺+0.1%	🔺+0.2%	85.17 KB	85.27 KB	26.42 KB	26.47 KB	UMD_PROD
react-art.development.js	+0.2%	+0.2%	367.88 KB	368.44 KB	81.58 KB	81.76 KB	NODE_DEV
react-art.production.min.js	🔺+0.2%	🔺+0.3%	50.16 KB	50.26 KB	15.79 KB	15.85 KB	NODE_PROD
ReactART-dev.js	+0.1%	+0.2%	358.35 KB	358.84 KB	76.45 KB	76.61 KB	FB_WWW_DEV
ReactART-prod.js	🔺+0.2%	🔺+0.3%	152.95 KB	153.26 KB	26.36 KB	26.45 KB	FB_WWW_PROD

react-test-renderer

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-test-renderer.development.js	+0.2%	+0.2%	363.77 KB	364.33 KB	79.99 KB	80.17 KB	UMD_DEV
react-test-renderer.production.min.js	🔺+0.2%	🔺+0.3%	49.03 KB	49.13 KB	15.16 KB	15.21 KB	UMD_PROD
react-test-renderer.development.js	+0.2%	+0.2%	359.9 KB	360.46 KB	79.01 KB	79.2 KB	NODE_DEV
react-test-renderer.production.min.js	🔺+0.2%	🔺+0.4%	48.74 KB	48.84 KB	15.01 KB	15.07 KB	NODE_PROD
react-test-renderer-shallow.development.js	+2.4%	+2.9%	23.23 KB	23.79 KB	6.29 KB	6.47 KB	UMD_DEV
react-test-renderer-shallow.development.js	+3.0%	+3.5%	18.42 KB	18.98 KB	5.11 KB	5.28 KB	NODE_DEV
react-test-renderer-shallow.production.min.js	🔺+1.2%	🔺+2.0%	7.77 KB	7.87 KB	2.56 KB	2.61 KB	NODE_PROD
ReactTestRenderer-dev.js	+0.1%	+0.2%	365.01 KB	365.5 KB	77.94 KB	78.11 KB	FB_WWW_DEV
ReactShallowRenderer-dev.js	+2.9%	+3.7%	16.91 KB	17.4 KB	4.42 KB	4.58 KB	FB_WWW_DEV

react-reconciler

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-reconciler.development.js	+0.2%	+0.2%	348.89 KB	349.45 KB	75.62 KB	75.8 KB	NODE_DEV
react-reconciler.production.min.js	🔺+0.2%	🔺+0.3%	47.71 KB	47.81 KB	14.47 KB	14.52 KB	NODE_PROD
react-reconciler-persistent.development.js	+0.2%	+0.3%	347.51 KB	348.07 KB	75.06 KB	75.25 KB	NODE_DEV
react-reconciler-persistent.production.min.js	🔺+0.2%	🔺+0.3%	47.72 KB	47.82 KB	14.47 KB	14.52 KB	NODE_PROD

react-native-renderer

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
ReactNativeRenderer-dev.js	+0.1%	+0.2%	483.18 KB	483.67 KB	106.8 KB	106.98 KB	RN_FB_DEV
ReactNativeRenderer-prod.js	🔺+0.1%	🔺+0.2%	214.2 KB	214.51 KB	37.54 KB	37.61 KB	RN_FB_PROD
ReactNativeRenderer-dev.js	+0.1%	+0.2%	482.92 KB	483.4 KB	106.74 KB	106.92 KB	RN_OSS_DEV
ReactNativeRenderer-prod.js	🔺+0.2%	🔺+0.2%	204.24 KB	204.56 KB	35.92 KB	36 KB	RN_OSS_PROD
ReactFabric-dev.js	+0.1%	+0.2%	473.39 KB	473.88 KB	104.36 KB	104.54 KB	RN_FB_DEV
ReactFabric-prod.js	🔺+0.2%	🔺+0.2%	195.36 KB	195.67 KB	34.36 KB	34.44 KB	RN_FB_PROD
ReactFabric-dev.js	+0.1%	+0.2%	473.43 KB	473.91 KB	104.38 KB	104.56 KB	RN_OSS_DEV
ReactFabric-prod.js	🔺+0.2%	🔺+0.2%	195.39 KB	195.71 KB	34.37 KB	34.46 KB	RN_OSS_PROD
ReactNativeRenderer-profiling.js	+0.2%	+0.2%	207.75 KB	208.06 KB	36.62 KB	36.7 KB	RN_OSS_PROFILING
ReactFabric-profiling.js	+0.2%	+0.2%	198.41 KB	198.72 KB	35 KB	35.07 KB	RN_OSS_PROFILING
ReactNativeRenderer-profiling.js	+0.1%	+0.2%	217.67 KB	217.98 KB	38.24 KB	38.31 KB	RN_FB_PROFILING
ReactFabric-profiling.js	+0.2%	+0.2%	198.37 KB	198.68 KB	34.98 KB	35.05 KB	RN_FB_PROFILING

Generated by 🚫 dangerJS

gaearon · 2018-08-09T02:42:34Z

Um apparently this is PROD code path too? I forgot. I'll wrap this in a DEV block since it's non-critical.

gaearon · 2018-08-09T02:45:18Z

d59b993

facebook-github-bot added the CLA Signed label Jan 20, 2018

gaearon reviewed Jan 20, 2018

View reviewed changes

billyjanitsch mentioned this pull request May 4, 2018

[plugin-transform-react-jsx-source] Minor feature request: display full file paths instead of file names babel/babel#7846

Closed

billyjanitsch and others added 6 commits August 9, 2018 02:28

Improve display of filenames in component stack

ba60f9e

Add explanatory comment

1add363

tests: add tests for component stack trace displaying

d4be46a

Tweak test

a60975b

Rewrite test and revert implementation

86d2afe

Extract a variable

287bad9

Rewrite implementation

69f7c41

gaearon merged commit 54d86eb into facebook:master Aug 9, 2018

billyjanitsch deleted the improve-component-stack branch August 9, 2018 15:27

gaearon mentioned this pull request Sep 5, 2018

Changelog for 16.5.0 #13571

Merged

This was referenced Sep 7, 2018

Update react-dom in /packages/oc-template-react from 16.4.0 to 16.5.0 opencomponents/oc-template-react#294

Closed

Update react in /packages/oc-template-react from 16.4.0 to 16.5.0 opencomponents/oc-template-react#295

Closed

ljharb mentioned this pull request Sep 11, 2018

Complete React 16 support enzymejs/enzyme#1553

Open

41 tasks

dependencies bot mentioned this pull request Oct 1, 2018

Update react-dom in /modules/frontend from 16.3.0 to 16.5.2 project-accelerate/accelerate#277

Open

This was referenced Nov 1, 2018

Update react-dom in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#253

Closed

Update react in / from 16.2.0 to 16.6.0 leonardofaria/leozera-ui#254

Closed

This was referenced Dec 1, 2018

Update react-test-renderer in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#312

Open

Update react in /modules/frontend from 16.3.0 to 16.6.3 project-accelerate/accelerate#313

Open

This was referenced Sep 5, 2024

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#65

Open

[Snyk] Fix for 104 vulnerabilities Omrisnyk/lock-walker#66

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve display of filenames in component stack #12059

Improve display of filenames in component stack #12059

billyjanitsch commented Jan 20, 2018 •

edited

Loading

gaearon Jan 20, 2018

billyjanitsch Jan 20, 2018

gaearon commented Jan 20, 2018

billyjanitsch commented Jan 26, 2018

gaearon commented Feb 5, 2018

billyjanitsch commented Feb 7, 2018

raunofreiberg commented Feb 27, 2018 •

edited

Loading

billyjanitsch commented Feb 27, 2018

raunofreiberg commented Feb 27, 2018 •

edited

Loading

billyjanitsch commented Feb 28, 2018 •

edited

Loading

raunofreiberg commented Mar 13, 2018

TimNZ commented May 7, 2018

gaearon commented May 7, 2018

gaearon commented Aug 9, 2018

pull-bot commented Aug 9, 2018 •

edited

Loading

react

react-dom

react-art

react-test-renderer

react-reconciler

react-native-renderer

gaearon commented Aug 9, 2018

gaearon commented Aug 9, 2018

Improve display of filenames in component stack #12059

Improve display of filenames in component stack #12059

Conversation

billyjanitsch commented Jan 20, 2018 • edited Loading

gaearon Jan 20, 2018

Choose a reason for hiding this comment

billyjanitsch Jan 20, 2018

Choose a reason for hiding this comment

gaearon commented Jan 20, 2018

billyjanitsch commented Jan 26, 2018

gaearon commented Feb 5, 2018

billyjanitsch commented Feb 7, 2018

raunofreiberg commented Feb 27, 2018 • edited Loading

billyjanitsch commented Feb 27, 2018

raunofreiberg commented Feb 27, 2018 • edited Loading

billyjanitsch commented Feb 28, 2018 • edited Loading

raunofreiberg commented Mar 13, 2018

TimNZ commented May 7, 2018

gaearon commented May 7, 2018

gaearon commented Aug 9, 2018

pull-bot commented Aug 9, 2018 • edited Loading

react

react-dom

react-art

react-test-renderer

react-reconciler

react-native-renderer

gaearon commented Aug 9, 2018

gaearon commented Aug 9, 2018

billyjanitsch commented Jan 20, 2018 •

edited

Loading

raunofreiberg commented Feb 27, 2018 •

edited

Loading

raunofreiberg commented Feb 27, 2018 •

edited

Loading

billyjanitsch commented Feb 28, 2018 •

edited

Loading

pull-bot commented Aug 9, 2018 •

edited

Loading