Summary:
This diff adds handling for syntax errors.
## Strategy
To do this we introduce a new log level type syntax, giving us these levels with semantics:
- `warn` - console warns, show collapsed, dismissible
- `error` - console errors, show collapsed, dismissible
- `fatal` - thrown exceptions, show expanded, not dismissible
- `syntax` - thrown exceptions for invalid syntax, show expanded, not dismissible
Syntax errors shows expanded, covers all other errors, and are only dismissible when the syntax error is fixed and updated with Fast Refresh. Once the syntax error is fixed, it reveals any previously covered fatals, errors, or warnings behind it
In many ways, this makes syntax errors the highest level error.
## Visuals
Syntax errors also have their own display formatting. Stack traces for syntax errors don't make sense, so we don't show them. Instead, we show the syntax error message and a code frame for the error.
The code frame is also updated so that is doesn't wrap and is horizontally scrollable, making it easier to read.
## Detecting syntax errors
To detect syntax errors we've updated `LogBoxData.addException` to call the parse function `parseLogBoxException`. This method will perform a regex on the error message to detect:
- file name
- location
- error message
- codeframe
If this regex fails for any reason to find all four parts, we'll fall back to a fatal. Over time we'll update this regex to be more robust and handle more cases we've missed.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18278862
fbshipit-source-id: 59069aba38a27c44787e5248b2973c3a345c4a0a
Summary:
This diff adds handling to fatal errors such as thrown exceptions by popping them full screen and not allowing the user to dismiss them. They say that they're "Fatal Errors" and explain that "Fatal errors require a reload".
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18257185
fbshipit-source-id: ca051027b19c3cd2410ae59764d7b98a78f08dca
Summary:
This diff adds optimistic loading for symbolicated stack traces by so that we (almost) never show a loading state for stack traces. Because of this, we also remove the "Stack Trace" status except when it is loading or failed. Also refactored the related components to hooks 🎣
Changelog: [Internal]
Reviewed By: mmmulani
Differential Revision: D18110403
fbshipit-source-id: a93b0a63e1c9490fea73ca6ec7c5707670bdea53
Summary:
This diff adds a level to LogBox logs so that we can store and display errors in later diffs
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18091101
fbshipit-source-id: 21661d28a7945bdcb56702e2a03ab3612c11fe35
Summary:
This diff improves LogBox performance by not storing and updating logs that are ignored.
Previous we stored all logs, including ignored, as a set. This was so that later, when we show a list of all logs, we would be able to show the ignored logs as well if toggled on. We stored the logs as:
```
const logs = new Set([
{
message: "Not ignored",
ignored: false,
},
{
message: "Ignored",
ignored: true,
},
// 100s more ignored logs
]);
```
But it turns out, we can have hundreds of ignored logs within seconds in some parts of the app. This means we we're re-rendering the LogBoxContainer hundreds of times with a filter on this set to filter out the ignored logs, just to change none of the content.
Now we store as:
```
const logs = new Set([
{
message: "Not ignored",
},
]);
```
Later, when we want to show ignored logs, we'll store these separately.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18055799
fbshipit-source-id: f5e21f66bb4ab6137d5d3908e8c03e119e3805d5
Summary:
# Overview
This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in.
Changelog: [Internal]
## Changes
To init LogBox, we've taken the core of YellowBox and rewritten it entirely.
Differences from Yellowbox include:
- Data model re-written
- More performant
- Allows a future listing of logs in order
- Allows a future toggle to show ignored logs
- Moves category into a property
- Groups by the same sequential message (as chrome does) instead of by category
- Does not store dupes of the same messages, only a count
- UI revamp
- Color and design refresh
- Does not spam UI with logs
- Only shows the most recent log
- Dismiss all button is always in one place
- Allows navigating through all of the warnings in the list, not just ones in the same category
- Collapses message to 5 lines (tap to expand)
- Collapses unrelated stack frames (tap to expand)
- Moves React stack to it's own section
- Formats React Stack like a stack frame
- Collapses any React frames over 3 deep (tap to expand)
- Adds a "Meta" information (to be expanded on later)
- De-emphasizes the source map indicator
- Better Engineering
- Rewrote almost all components to hooks (will follow up with the rest)
- Added more tests for Data files
- Added testes for UI components (previously there were none)
- Refactored some imperative render code to declarative
## Known Problems
- The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log).
- The way we're doing symbolication and navigation is slow. We will follow up with perf improvements
- The React Stack logic is too simple and missed cases
- We need to get properly scaled images for the close button
## What's next
Next up we'll be:
- Move over Moti's improvements to filtering and YellowBox changes since I started this
- Adding in Errors, and not using the native redbox when LogBox is available
- Adding in a list of all errors and a way to navigate to it
- Adding in Logs, so users can see console.log in the app
- Make React stack frames clickable
- And many more
Reviewed By: cpojer
Differential Revision: D17965726
fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
Rick Hanlon