Skip to content

Commit 36cab27

Browse files
author
Brian Vaughn
authored
DevTools: Improved "native" component stacks (#18656)
* DevTools console override handles new component stack format DevTools does not attempt to mimic the default browser console format for its component stacks but it does properly detect the new format for Chrome, Firefox, and Safari.
1 parent 940f48b commit 36cab27

File tree

17 files changed

+630
-223
lines changed

17 files changed

+630
-223
lines changed

‎packages/react-devtools-core/webpack.backend.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ module.exports = {
4343
plugins: [
4444
new DefinePlugin({
4545
__DEV__: true,
46+
__PROFILE__: false,
47+
__EXPERIMENTAL__: true,
4648
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
4749
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
4850
}),

‎packages/react-devtools-core/webpack.standalone.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ module.exports = {
4848
plugins: [
4949
new DefinePlugin({
5050
__DEV__: false,
51+
__PROFILE__: false,
52+
__EXPERIMENTAL__: true,
5153
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
5254
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
5355
'process.env.NODE_ENV': `"${NODE_ENV}"`,

‎packages/react-devtools-extensions/webpack.backend.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ module.exports = {
3838
plugins: [
3939
new DefinePlugin({
4040
__DEV__: true,
41+
__PROFILE__: false,
42+
__EXPERIMENTAL__: true,
4143
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
4244
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
4345
}),

‎packages/react-devtools-extensions/webpack.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ module.exports = {
4343
plugins: [
4444
new DefinePlugin({
4545
__DEV__: false,
46+
__PROFILE__: false,
47+
__EXPERIMENTAL__: true,
4648
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
4749
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
4850
'process.env.NODE_ENV': `"${NODE_ENV}"`,

‎packages/react-devtools-inline/webpack.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ module.exports = {
3939
plugins: [
4040
new DefinePlugin({
4141
__DEV__,
42+
__PROFILE__: false,
43+
__EXPERIMENTAL__: true,
4244
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
4345
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
4446
'process.env.NODE_ENV': `"${NODE_ENV}"`,

‎packages/react-devtools-shared/src/__tests__/console-test.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('console', () => {
114114
});
115115

116116
it('should not append multiple stacks', () => {
117-
const Child = () => {
117+
const Child = ({children}) => {
118118
fakeConsole.warn('warn\n in Child (at fake.js:123)');
119119
fakeConsole.error('error', '\n in Child (at fake.js:123)');
120120
return null;
@@ -135,12 +135,12 @@ describe('console', () => {
135135

136136
it('should append component stacks to errors and warnings logged during render', () => {
137137
const Intermediate = ({children}) => children;
138-
const Parent = () => (
138+
const Parent = ({children}) => (
139139
<Intermediate>
140140
<Child />
141141
</Intermediate>
142142
);
143-
const Child = () => {
143+
const Child = ({children}) => {
144144
fakeConsole.error('error');
145145
fakeConsole.log('log');
146146
fakeConsole.warn('warn');
@@ -156,24 +156,24 @@ describe('console', () => {
156156
expect(mockWarn.mock.calls[0]).toHaveLength(2);
157157
expect(mockWarn.mock.calls[0][0]).toBe('warn');
158158
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
159-
'\n in Child (at **)\n in Parent (at **)',
159+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
160160
);
161161
expect(mockError).toHaveBeenCalledTimes(1);
162162
expect(mockError.mock.calls[0]).toHaveLength(2);
163163
expect(mockError.mock.calls[0][0]).toBe('error');
164164
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
165-
'\n in Child (at **)\n in Parent (at **)',
165+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
166166
);
167167
});
168168

169169
it('should append component stacks to errors and warnings logged from effects', () => {
170170
const Intermediate = ({children}) => children;
171-
const Parent = () => (
171+
const Parent = ({children}) => (
172172
<Intermediate>
173173
<Child />
174174
</Intermediate>
175175
);
176-
const Child = () => {
176+
const Child = ({children}) => {
177177
React.useLayoutEffect(() => {
178178
fakeConsole.error('active error');
179179
fakeConsole.log('active log');
@@ -198,29 +198,29 @@ describe('console', () => {
198198
expect(mockWarn.mock.calls[0]).toHaveLength(2);
199199
expect(mockWarn.mock.calls[0][0]).toBe('active warn');
200200
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
201-
'\n in Child (at **)\n in Parent (at **)',
201+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
202202
);
203203
expect(mockWarn.mock.calls[1]).toHaveLength(2);
204204
expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
205205
expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
206-
'\n in Child (at **)\n in Parent (at **)',
206+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
207207
);
208208
expect(mockError).toHaveBeenCalledTimes(2);
209209
expect(mockError.mock.calls[0]).toHaveLength(2);
210210
expect(mockError.mock.calls[0][0]).toBe('active error');
211211
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
212-
'\n in Child (at **)\n in Parent (at **)',
212+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
213213
);
214214
expect(mockError.mock.calls[1]).toHaveLength(2);
215215
expect(mockError.mock.calls[1][0]).toBe('passive error');
216216
expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
217-
'\n in Child (at **)\n in Parent (at **)',
217+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
218218
);
219219
});
220220

221221
it('should append component stacks to errors and warnings logged from commit hooks', () => {
222222
const Intermediate = ({children}) => children;
223-
const Parent = () => (
223+
const Parent = ({children}) => (
224224
<Intermediate>
225225
<Child />
226226
</Intermediate>
@@ -254,29 +254,29 @@ describe('console', () => {
254254
expect(mockWarn.mock.calls[0]).toHaveLength(2);
255255
expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
256256
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
257-
'\n in Child (at **)\n in Parent (at **)',
257+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
258258
);
259259
expect(mockWarn.mock.calls[1]).toHaveLength(2);
260260
expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
261261
expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
262-
'\n in Child (at **)\n in Parent (at **)',
262+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
263263
);
264264
expect(mockError).toHaveBeenCalledTimes(2);
265265
expect(mockError.mock.calls[0]).toHaveLength(2);
266266
expect(mockError.mock.calls[0][0]).toBe('didMount error');
267267
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
268-
'\n in Child (at **)\n in Parent (at **)',
268+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
269269
);
270270
expect(mockError.mock.calls[1]).toHaveLength(2);
271271
expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
272272
expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
273-
'\n in Child (at **)\n in Parent (at **)',
273+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
274274
);
275275
});
276276

277277
it('should append component stacks to errors and warnings logged from gDSFP', () => {
278278
const Intermediate = ({children}) => children;
279-
const Parent = () => (
279+
const Parent = ({children}) => (
280280
<Intermediate>
281281
<Child />
282282
</Intermediate>
@@ -303,18 +303,18 @@ describe('console', () => {
303303
expect(mockWarn.mock.calls[0]).toHaveLength(2);
304304
expect(mockWarn.mock.calls[0][0]).toBe('warn');
305305
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
306-
'\n in Child (at **)\n in Parent (at **)',
306+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
307307
);
308308
expect(mockError).toHaveBeenCalledTimes(1);
309309
expect(mockError.mock.calls[0]).toHaveLength(2);
310310
expect(mockError.mock.calls[0][0]).toBe('error');
311311
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
312-
'\n in Child (at **)\n in Parent (at **)',
312+
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
313313
);
314314
});
315315

316316
it('should append stacks after being uninstalled and reinstalled', () => {
317-
const Child = () => {
317+
const Child = ({children}) => {
318318
fakeConsole.warn('warn');
319319
fakeConsole.error('error');
320320
return null;

0 commit comments

Comments
 (0)