Summary:
Based on feedback we're updating these titles to be more clear for their source.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D21413486
fbshipit-source-id: c144e7f759a4ff263b7ec80fa643eeb8ffac741b
Summary:
Right now the code frame and stack trace for metro errors are useless. This diff improved these errors by showing the metro code frame for the source of the issue, and stripping the stack trace.
Ideally we could show the metro stack trace as well, but since stack traces are tightly coupled to symbolication (and metro source code does not need symbolicated, nor could it be), this is an acceptable incremental improvement.
Arguably, even showing the code frame is inappropriate and we should show a generic crash screen with reload and report buttons.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D20057353
fbshipit-source-id: 5e999cea14c1cbd2f69737e3992a3e8d159fdf89
Summary:
Update LogBox on iOS to lazily initialize, using a synchronous RCTSurface, behind RCTSharedApplication checks.
This results in faster of LogBox, without keeping around a long lived window in the background, and only used when LogBox is used.
On Android, we still start the react app in the background but we create a dialog when it's shown and then destroy it when it's hidden. Once we have the sync APIs on android we can update it to use the same strategy.
Changelog: [Internal]
Reviewed By: fkgozali
Differential Revision: D18925538
fbshipit-source-id: 1a72c39aa0fc26c8ba657d36c7fa7bc0ae777eb9
Summary:
Apologies for the large diff, it was difficult to break down.
This diff is a major refactor of LogBox that:
- Separates LogBoxNotification and LogBoxInspector
- Moves them each to their own container
- Updates AppContainer to only render the notification
- Updates the native logbox root to render the inspector
- Adds withSubscription HOC to manage subscribing to LogBoxData
- Simplifies LogBox to export an object instead of a component
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18750011
fbshipit-source-id: 639885d29e55e125892d1c2b6bbf2826f27d78db
Summary:
This diff switches LogBox over to use a Modal component so that the log inspector is always full screen.
In order to do that, it needed to add an `internal_excludeLogBox` flag to AppContainer so that it's not recursively rendered as: AppContainer -> LogBox -> Modal -> AppContainer. Not thrilled about the prop but it's necessary for now until this is rendered as it's own root (which we're working on next).
Changelog: [Internal]
Reviewed By: rubennorte
Differential Revision: D18461394
fbshipit-source-id: e1a80dfffbbe6c5467ac6f8d3c445a3280829020
Summary:
This diff makes a few improvements to the call stack / symbolication process:
- Removes button from unsymbolicated stack frames
- Adds a warning message for missing features without symbolication
- Reduces symbolication requests (we were re-requesting stacks when they were pending)
- Speeds up opening unsymbolicated logs (because we were re-requesting them, the components were updating a lot)
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18577288
fbshipit-source-id: 6de322b4755895e2d1599b06100a61e64f7ec023
Summary:
This diff adds a new API `setAppInfo` to add app version and engine to LogBox and changes the way they're displayed so that they're more subtle and visible for screenshots.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18592992
fbshipit-source-id: 1c57b21fa9dca93029ffc92acf1287f3ee247f4d
Summary:
Feedback from multiple people has been that the "see more" is hard to discover and that it should be at the bottom left, so this diff moves it there.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18487041
fbshipit-source-id: 1543c54e1de5fa16fa5b2e427812b6e72977bfb2
Summary:
This diff changes LogBox to say "Render Error" instead of "Fatal Error" for errors thrown in render.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18466237
fbshipit-source-id: 737759f3febb937f70698dae5f1b1617e233fc98
Summary:
If the keyboard is open when the inspector pops open, dismiss it.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18468221
fbshipit-source-id: 0d51fa90824ed8bef6a3b6e813013fa3c2a4bbda
Summary:
This diff makes a few changes to how errors and warnings are handled in LogBox:
- Soft errors continue to notify the user collapsed.
- Fatal errors pop up full screen over the content, but are dismissible.
- Syntax errors pop up full screen, and are **not** dismissible.
- Removed the "Reload" button on fatals, and added back the dismiss/close.
- Removed all buttons from syntax errors so users are encouraged to fix it and safe without reloading.
To do this we needed to:
- Move the selectedLogIndex state out of the component and up to the rest of the log state.
- Change the way popping a log works, it's now done by setting selectedLogIndex at log time instead of deriving it at render time, that means `selectedLogIndex` is now the sole state value for deciding if the log inspector is open or not
- Whenever the state is updated, find a syntax error if it's there, instead of doing this at render time
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18421089
fbshipit-source-id: d2c4937f666f1302ed1a7b1b9c6679b0509136c5
Summary:
Fixes an issue in LogBox that allowed users to try to dismiss warnings/errors when there was a fatal or syntax error up.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18285678
fbshipit-source-id: 9d137fab63405c28b2bfa94a35c11c2f63b6d085
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 and displays errors in LogBox. We will now toast both warnings and errors, open errors for inspection, and allow paginating through errors and warnings.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18091519
fbshipit-source-id: c155969dc505de5cfb0e95bb5a8221b9f8cfe4f7
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
Eli White