Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose DEV-mode warnings in devtools UI #20463

Merged
merged 104 commits into from
Dec 22, 2020
Merged
Show file tree
Hide file tree
Changes from 96 commits
Commits
Show all changes
104 commits
Select commit Hold shift + click to select a range
443831b
STASH incomplete feature (no UI, some TODOs)
eps1lon Dec 11, 2020
1a34269
Add UI
eps1lon Dec 11, 2020
6cc7fdb
Add view for errors/warnings in inspected element
eps1lon Dec 14, 2020
59ddad1
Serialize args
eps1lon Dec 14, 2020
9372221
Ignore component stacks in inline errors view
eps1lon Dec 14, 2020
34500ea
Add icons for warnings and errors
eps1lon Dec 14, 2020
962f08c
Cleanup unused console logs
eps1lon Dec 14, 2020
3104b1e
Fix flow issues
eps1lon Dec 14, 2020
cf3f212
Implement clear(all,byComponent,byErrorOrWarning)
eps1lon Dec 14, 2020
5b3fb89
Expand showcase with error and warn/error mix
eps1lon Dec 14, 2020
d2c8e33
Fix missing color error background message
eps1lon Dec 14, 2020
dc92fef
Highlight elements in tree
eps1lon Dec 14, 2020
1533583
Better spacing for error/warning badges
eps1lon Dec 14, 2020
4b46d94
BROKEN Implement walking through elements with warning/errors
eps1lon Dec 14, 2020
ae89ee8
Remove nullish coalescing which is only used in the scheduling profiler
eps1lon Dec 14, 2020
6e41fc1
Bail out if we have no errors/warnings
eps1lon Dec 14, 2020
8de25ff
Hide inline errors toolbar if there are now errors at all
eps1lon Dec 14, 2020
3560c40
Remove outdated todo
eps1lon Dec 14, 2020
45f7562
Add keys for error/warn messages
eps1lon Dec 14, 2020
1dafc3b
Diff cleanup
eps1lon Dec 14, 2020
e3e95fb
Fix flow errors due to missing type narrowing capabilities
eps1lon Dec 14, 2020
2aafbdf
Match UI of Search
eps1lon Dec 15, 2020
64ad2e2
Match UX of Search
eps1lon Dec 15, 2020
826993e
Resolve todo about args copying
eps1lon Dec 15, 2020
eb9c4ec
Remove excess vertical ruler if no errors are recognized
eps1lon Dec 15, 2020
f0a3ab3
Fix icon alignment of errors/warnings in tree
eps1lon Dec 15, 2020
5b59bbc
Fix warning text color in dark theme
eps1lon Dec 15, 2020
0ef80bc
center icons with text instead of baseline
eps1lon Dec 15, 2020
6192477
Clear errorsAndWarnings when elements are removed
eps1lon Dec 15, 2020
6e57b4d
Tweaked inline element style for warning/error icons
Dec 15, 2020
2df0740
Fixed minor regression in Element styles
Dec 15, 2020
52f0494
Split errors and warnings into separate panels
Dec 15, 2020
d64023c
Implement new message format
eps1lon Dec 16, 2020
1bb99d9
Reflect error/warning updates in tree when cleared
eps1lon Dec 16, 2020
c197030
Fix inspectedElement not updating on error/warnings update
eps1lon Dec 16, 2020
2a3423f
fix minor flow issues
eps1lon Dec 16, 2020
9df59c6
Fix style regressions during rebase
eps1lon Dec 16, 2020
bdf5d0e
Move Stepper UX to end of toolbar
eps1lon Dec 16, 2020
3a37795
Cleanup WIP artifacts
eps1lon Dec 16, 2020
91366be
Add tally of errors/warnings
eps1lon Dec 16, 2020
cc59c71
Remove nullish coalescing
eps1lon Dec 16, 2020
d164fac
Cleaned up CSS colors and made some other small UI tweaks
Dec 16, 2020
860d0e7
Make more room in toolbar
Dec 16, 2020
5cb19ac
Add new debug setting for showing inline warnings and errors
Dec 16, 2020
674e287
Strip component stacks from errors/warnings before passing them to fr…
Dec 16, 2020
0e0b8c7
Fixed a spot I missed with new inline warnings setting
Dec 16, 2020
5073d81
De-dupe warnings and errors and show badge count for duplciate entries
Dec 16, 2020
99de4ff
Fixed dedupe badge text contrast
Dec 16, 2020
095c118
Oops I left a console log statement in
Dec 16, 2020
e8b7dc5
Minor UI tweaks
Dec 16, 2020
3ab78da
Clean up component stack remove in messages
eps1lon Dec 16, 2020
15122d2
Remove WIP artifacts
eps1lon Dec 16, 2020
26cecfa
Fixed bug when calculating total error/warning count
Dec 16, 2020
1f1a161
Merge branch 'devtools-show-warnings-in-tree' of github.com:eps1lon/r…
Dec 16, 2020
caf8678
Use empty string instead of "fixing" the format string
eps1lon Dec 16, 2020
a4f0059
Fix test harness to avoid double logging
Dec 16, 2020
5719f31
Added a few more test cases to the inline error test harness
Dec 16, 2020
92ebd81
Show full message on click
eps1lon Dec 16, 2020
70099e5
Revert 92ebd81
Dec 16, 2020
1b6e292
Show full error/warning text as tooltip on hover
Dec 16, 2020
61bf6a3
inline errors and warnings are not implemented in legacy devtools
eps1lon Dec 16, 2020
46cea44
Added missing key error test
Dec 16, 2020
8b5c8d9
Move batching to backend/console
eps1lon Dec 16, 2020
0146bc3
move filter into forEach
eps1lon Dec 16, 2020
04ffb01
Added some basic tests for inline errors/warnings
Dec 16, 2020
9380545
Add tests for the store
eps1lon Dec 17, 2020
8ff2c7b
Update snapshot due to previous typo fix
eps1lon Dec 17, 2020
5824f48
Remove outdated snapshot
Dec 17, 2020
8fc6249
Refactored error/warning message queueing and bundling
Dec 17, 2020
f0ceff6
Fixed Store tests by updating to inline snapshots
Dec 17, 2020
1c1874c
Prevent siliencing of unexpected console calls in inspectedElementCon…
eps1lon Dec 17, 2020
ef149c9
Actually use generic param
eps1lon Dec 17, 2020
5c892ac
Use inline snapshots
eps1lon Dec 17, 2020
8953cdc
Add tests for clearing errors and warnings
eps1lon Dec 17, 2020
268a25b
Run the minimal amount of timer necessary
eps1lon Dec 17, 2020
6e167a3
Revert "Run the minimal amount of timer necessary"
eps1lon Dec 17, 2020
69410ac
Added tests (and bug fix) for select next/prev error
Dec 17, 2020
6feb404
Fixed an error (but left a TODO for a better future fix)
Dec 17, 2020
da0aad2
Added two (failing) tests that we should fix
Dec 17, 2020
35b16ce
select(Prev|Next)Error -> select(Prev|Next)ErrorOrWarning
eps1lon Dec 18, 2020
af1c54e
Serialize errors and warnings in snapshots
eps1lon Dec 18, 2020
a0a8e06
Use statefulStore serializer in "inline error/warning" tests
eps1lon Dec 18, 2020
5b5d2c5
Fix flow issues
eps1lon Dec 18, 2020
4a87383
Refactored treeContext tests to use inline snapshots and Jest serializer
Dec 18, 2020
781d8b7
Inline warnings/errors should respect component filters
Dec 18, 2020
e69c0b4
Add error/warning counts to serialized store snapshot
Dec 18, 2020
bc788d8
Add failing test for uncommitted renders
eps1lon Dec 18, 2020
22c3f4b
Don't send errors/warnings for suspended or errored subtrees
Dec 18, 2020
b9fa573
Wait to flush errors/warnings until the next commit; it's safer
Dec 18, 2020
4c9bf65
Remove separate 'errorsAndWarnings' event in favor of 'mutations'
Dec 18, 2020
a27fc21
Refactored next/prev index calculation and memoized error/warning count
Dec 18, 2020
83991b1
Serialize warn/error tally above roots
eps1lon Dec 20, 2020
ca5f050
Test multi-root app when testing next/prev error selection
eps1lon Dec 20, 2020
51d3cac
Updated snapshots
Dec 20, 2020
4174fbd
Added multi-root tests for tree context wrapping
Dec 21, 2020
85ed51d
Merged in master
Dec 21, 2020
b79d1d9
Add docs for TREE_OPERATION_REMOVE_ROOT
eps1lon Dec 21, 2020
6f15c87
Misc small things: Updated OVERVIEW, TODO, debug log, and minor forma…
Dec 21, 2020
fa41522
Cleanup after unmounted/never-mounted Fibers that have errors/warning…
Dec 21, 2020
aa5f89d
Auto-refresh inspected element right after cleaning warings/errors
Dec 21, 2020
5d10e41
Auto-refresh inspected element right after cleaning warings/errors
Dec 21, 2020
05a2825
Standalone CSS style fix for warning/error count font size
Dec 22, 2020
7e149e8
Pre-compute and cache the error/warning id-and-index tuples
Dec 22, 2020
5a3ae6c
Small variable naming cleanup in Store
Dec 22, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-devtools-core/src/standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
getAppendComponentStack,
getBreakOnConsoleErrors,
getSavedComponentFilters,
getShowInlineWarningsAndErrors,
} from 'react-devtools-shared/src/utils';
import {Server} from 'ws';
import {join} from 'path';
Expand Down Expand Up @@ -303,6 +304,9 @@ function startServer(
)};
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
getSavedComponentFilters(),
)};
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
getShowInlineWarningsAndErrors(),
)};`;

response.end(
Expand Down
13 changes: 7 additions & 6 deletions packages/react-devtools-extensions/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
getAppendComponentStack,
getBreakOnConsoleErrors,
getSavedComponentFilters,
getShowInlineWarningsAndErrors,
} from 'react-devtools-shared/src/utils';
import {
localStorageGetItem,
Expand All @@ -29,18 +30,18 @@ let panelCreated = false;
// because they are stored in localStorage within the context of the extension.
// Instead it relies on the extension to pass filters through.
function syncSavedPreferences() {
const appendComponentStack = getAppendComponentStack();
const breakOnConsoleErrors = getBreakOnConsoleErrors();
const componentFilters = getSavedComponentFilters();
chrome.devtools.inspectedWindow.eval(
`window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
appendComponentStack,
getAppendComponentStack(),
)};
window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
breakOnConsoleErrors,
getBreakOnConsoleErrors(),
)};
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
componentFilters,
getSavedComponentFilters(),
)};
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
getShowInlineWarningsAndErrors(),
)};`,
);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-devtools-inline/src/backend.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@ function startActivation(contentWindow: window) {
appendComponentStack,
breakOnConsoleErrors,
componentFilters,
showInlineWarningsAndErrors,
} = data;

contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;

// TRICKY
// The backend entry point may be required in the context of an iframe or the parent window.
Expand All @@ -40,6 +42,7 @@ function startActivation(contentWindow: window) {
window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
}

finishActivation(contentWindow);
Expand Down
2 changes: 2 additions & 0 deletions packages/react-devtools-inline/src/frontend.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
getAppendComponentStack,
getBreakOnConsoleErrors,
getSavedComponentFilters,
getShowInlineWarningsAndErrors,
} from 'react-devtools-shared/src/utils';
import {
MESSAGE_TYPE_GET_SAVED_PREFERENCES,
Expand Down Expand Up @@ -41,6 +42,7 @@ export function initialize(
appendComponentStack: getAppendComponentStack(),
breakOnConsoleErrors: getBreakOnConsoleErrors(),
componentFilters: getSavedComponentFilters(),
showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
},
'*',
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,19 @@ Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 7,
"id": 2,
"type": 5,
},
Object {
"displayName": "Parent",
"hocDisplayNames": null,
"id": 9,
"id": 3,
"type": 5,
},
Object {
"displayName": "Child",
"hocDisplayNames": null,
"id": 8,
"id": 4,
"type": 5,
},
]
Expand Down Expand Up @@ -115,7 +115,7 @@ Array [
Object {
"displayName": "Grandparent",
"hocDisplayNames": null,
"id": 5,
"id": 2,
"type": 5,
},
]
Expand Down

This file was deleted.

Loading