Commit Graph

8 Commits

Author SHA1 Message Date
Rick Hanlon 390546f6ed Increase hitslop for notification dismiss button
Summary:
This diff increases the hit slop for the close button to dismiss the notifications.

Changelog: [Internal]

Differential Revision: D18438192

fbshipit-source-id: e671ec06c69f52f83c7dda87118ca1d2426e993b
2019-11-11 16:16:03 -08:00
Rick Hanlon fe82f402a9 LogBox - Rework how fatals and syntax errors are handled
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
2019-11-11 16:12:43 -08:00
Rick Hanlon 1c9a792ca4 LogBox - Re-apply badge color fix
Summary:
The previous diff mistakenly landed an old version

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18358917

fbshipit-source-id: 284dd6754c4aea3814e5f45dae6f68ed2c261b6a
2019-11-07 06:17:35 -08:00
Rick Hanlon 40ee0adbc1 LogBox - Center number and darken warning count color
Summary:
Some feedback for logbox is that the count wasn't centered on certain devices (e.g. Nexus 6 but not Pixel 3), and that the white badge count color for warnings was hard to read. This diff fixes both issues.

Changelog: [Internal]

Differential Revision: D18336681

fbshipit-source-id: 8200bcf04dcea9a6bbcaa1555fbab000c78c0a4f
2019-11-06 10:17:47 -08:00
Rick Hanlon 001e8d5a2b LogBox - Don't show substitutions for log notification
Summary:
When messages are collapsed, showing a different style for the string substitutions for interpolated strings is jarring, so let's  show the plaintext instead.

Changelog: [Internal]

Differential Revision: D18335295

fbshipit-source-id: f718469ac3206fd7a934a26495ebf8b1850fb674
2019-11-06 10:17:47 -08:00
Rick Hanlon 8524b6182d LogBox - Optimistically symbolicate
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
2019-10-31 16:26:42 -07:00
Rick Hanlon c55aa1dd8c LogBox - Change count from grouping number to total count
Summary:
Previously we were should the count for the group (similar to how Chrome show the count on logs). This makes it difficult (impossible) to know how many logs are in the console without opening up the inspector.

This diff changes it so that the count shows the total number of warnings in the console instead.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18056028

fbshipit-source-id: c94a446708fb0885962e5c7dde75300cbedbab9b
2019-10-22 14:13:19 -07:00
Rick Hanlon 7d4121da02 Add LogBox for warnings
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
2019-10-21 21:08:02 -07:00