dillon1000/react
Commit
Browse files [DevTools] Print component stacks as error objects to get source mapping (#30289)
Before: <img width="844" alt="Screenshot 2024-07-04 at 3 20 34 PM" src="https://github.com/facebook/react/assets/63648/0fd8a53f-538a-4429-a4cf-c22f85a09aa8"> After: <img width="845" alt="Screenshot 2024-07-05 at 6 08 28 PM" src="https://github.com/facebook/react/assets/63648/7b9da13a-fa97-4581-9899-06de6fface65"> Firefox: <img width="1338" alt="Screenshot 2024-07-05 at 6 09 50 PM" src="https://github.com/facebook/react/assets/63648/f2eb9f2a-2251-408f-86d0-b081279ba378"> The first log doesn't get a stack because it's logged before DevTools boots up and connects which is unfortunate. The second log already has a stack printed by React (this is on stable) it gets replaced by our object now. The third and following logs don't have a stack and get one appended. I only turn the stack into an error object if it matches what we would emit from DevTools anyway. Otherwise we assume it's not React. Since I had to change the format slightly to make this work, I first normalize the stack slightly before doing a comparison since it won't be 1:1.
Changed paths11 files
First-parent comparison.eslintrc.js ModifiedM packages/react-devtools-core/webpack.backend.js ModifiedM packages/react-devtools-inline/webpack.config.js ModifiedM packages/react-devtools-shared/src/__tests__/console-test.js ModifiedM packages/react-devtools-shared/src/__tests__/utils.js ModifiedM packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js ModifiedM packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js ModifiedM packages/react-devtools-shared/src/backend/console.js ModifiedM packages/react-devtools-shared/src/constants.js ModifiedM scripts/flow/react-devtools.js ModifiedM scripts/jest/devtools/setupEnv.js ModifiedPatch
Files changed
Rendering syntax-highlighted changes…