Skip to content

Commit

Permalink
DevTools: Improved "native" component stacks (#18656)
Browse files Browse the repository at this point in the history 
* 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.
  • Loading branch information
Brian Vaughn committed Apr 21, 2020
1 parent 940f48b commit 36cab27
Show file tree
Hide file tree
Showing 17 changed files with 630 additions and 223 deletions.
2 changes: 2 additions & 0 deletions packages/react-devtools-core/webpack.backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ module.exports = {
plugins: [
new DefinePlugin({
__DEV__: true,
__PROFILE__: false,
__EXPERIMENTAL__: true,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
}),
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-core/webpack.standalone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ module.exports = {
plugins: [
new DefinePlugin({
__DEV__: false,
__PROFILE__: false,
__EXPERIMENTAL__: true,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
'process.env.NODE_ENV': `"${NODE_ENV}"`,
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-extensions/webpack.backend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ module.exports = {
plugins: [
new DefinePlugin({
__DEV__: true,
__PROFILE__: false,
__EXPERIMENTAL__: true,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
}),
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-extensions/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ module.exports = {
plugins: [
new DefinePlugin({
__DEV__: false,
__PROFILE__: false,
__EXPERIMENTAL__: true,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
'process.env.NODE_ENV': `"${NODE_ENV}"`,
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-inline/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ module.exports = {
plugins: [
new DefinePlugin({
__DEV__,
__PROFILE__: false,
__EXPERIMENTAL__: true,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
'process.env.NODE_ENV': `"${NODE_ENV}"`,
Expand Down
40 changes: 20 additions & 20 deletions packages/react-devtools-shared/src/__tests__/console-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ describe('console', () => {
});

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

it('should append component stacks to errors and warnings logged during render', () => {
const Intermediate = ({children}) => children;
const Parent = () => (
const Parent = ({children}) => (
<Intermediate>
<Child />
</Intermediate>
);
const Child = () => {
const Child = ({children}) => {
fakeConsole.error('error');
fakeConsole.log('log');
fakeConsole.warn('warn');
Expand All @@ -156,24 +156,24 @@ describe('console', () => {
expect(mockWarn.mock.calls[0]).toHaveLength(2);
expect(mockWarn.mock.calls[0][0]).toBe('warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError).toHaveBeenCalledTimes(1);
expect(mockError.mock.calls[0]).toHaveLength(2);
expect(mockError.mock.calls[0][0]).toBe('error');
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
});

it('should append component stacks to errors and warnings logged from effects', () => {
const Intermediate = ({children}) => children;
const Parent = () => (
const Parent = ({children}) => (
<Intermediate>
<Child />
</Intermediate>
);
const Child = () => {
const Child = ({children}) => {
React.useLayoutEffect(() => {
fakeConsole.error('active error');
fakeConsole.log('active log');
Expand All @@ -198,29 +198,29 @@ describe('console', () => {
expect(mockWarn.mock.calls[0]).toHaveLength(2);
expect(mockWarn.mock.calls[0][0]).toBe('active warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockWarn.mock.calls[1]).toHaveLength(2);
expect(mockWarn.mock.calls[1][0]).toBe('passive warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError).toHaveBeenCalledTimes(2);
expect(mockError.mock.calls[0]).toHaveLength(2);
expect(mockError.mock.calls[0][0]).toBe('active error');
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError.mock.calls[1]).toHaveLength(2);
expect(mockError.mock.calls[1][0]).toBe('passive error');
expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
});

it('should append component stacks to errors and warnings logged from commit hooks', () => {
const Intermediate = ({children}) => children;
const Parent = () => (
const Parent = ({children}) => (
<Intermediate>
<Child />
</Intermediate>
Expand Down Expand Up @@ -254,29 +254,29 @@ describe('console', () => {
expect(mockWarn.mock.calls[0]).toHaveLength(2);
expect(mockWarn.mock.calls[0][0]).toBe('didMount warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockWarn.mock.calls[1]).toHaveLength(2);
expect(mockWarn.mock.calls[1][0]).toBe('didUpdate warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError).toHaveBeenCalledTimes(2);
expect(mockError.mock.calls[0]).toHaveLength(2);
expect(mockError.mock.calls[0][0]).toBe('didMount error');
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError.mock.calls[1]).toHaveLength(2);
expect(mockError.mock.calls[1][0]).toBe('didUpdate error');
expect(normalizeCodeLocInfo(mockError.mock.calls[1][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
});

it('should append component stacks to errors and warnings logged from gDSFP', () => {
const Intermediate = ({children}) => children;
const Parent = () => (
const Parent = ({children}) => (
<Intermediate>
<Child />
</Intermediate>
Expand All @@ -303,18 +303,18 @@ describe('console', () => {
expect(mockWarn.mock.calls[0]).toHaveLength(2);
expect(mockWarn.mock.calls[0][0]).toBe('warn');
expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
expect(mockError).toHaveBeenCalledTimes(1);
expect(mockError.mock.calls[0]).toHaveLength(2);
expect(mockError.mock.calls[0][0]).toBe('error');
expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toBe(
'\n in Child (at **)\n in Parent (at **)',
'\n in Child (at **)\n in Intermediate (at **)\n in Parent (at **)',
);
});

it('should append stacks after being uninstalled and reinstalled', () => {
const Child = () => {
const Child = ({children}) => {
fakeConsole.warn('warn');
fakeConsole.error('error');
return null;
Expand Down

0 comments on commit 36cab27

Please sign in to comment.