Commit Graph

29 Commits

Author SHA1 Message Date
Rick Hanlon 7ad862eaba LogBox - Press to open code frame file
Summary:
This diff adds the ability to press the file name of a code frame to open the file in your editor.

Note: I re-worked the frame location to extract the frame row and column at parse time so that we don't need to do any clowny regexes down stream.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18358283

fbshipit-source-id: 705e07d229c66ecfd225a8fb65ef2f78b5034c9c
2019-11-07 09:11:59 -08:00
Rick Hanlon 83401adeae LogBox - Add platform and dim text in meta
Summary:
This diff adds more information to the meta area so it doesn't look so empty and dims the text so it doesn't jump out so much.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18360434

fbshipit-source-id: d460ffd59ef032d89879f88e309ac81e6d862c30
2019-11-07 08:48:05 -08:00
Rick Hanlon f1a11b6ce4 LogBox - Rename and re-order dismiss/minimize buttons
Summary:
Based on feedback "minimize" wasn't clear and "close" is more common so it should be on the right

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18353907

fbshipit-source-id: bccfc9be6c225a9adb31ef11d6a91330a7d4e008
2019-11-07 06:32:01 -08:00
Rick Hanlon 8901a0b863 LogBox - Better shadow for fatal button
Summary:
This diff lowers the intensity of the shadow on the fatal button based on user feedback that it's weird.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18353498

fbshipit-source-id: 9133aae02e5609e181a55289f349ea6a9e9fdaf6
2019-11-07 06:32:01 -08:00
Rick Hanlon 118e4d2c04 LogBox - Dim collapsed frames
Summary:
It's nice to be able to still see which stack frames are collapsed even when they're expanded.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18352700

fbshipit-source-id: f76086574677ea58c6b19b3300597681a17a96ae
2019-11-07 06:32:01 -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 e223454fbf LogBox - Remove extra padding to bottom of scroll container
Summary:
Fixes the comical level of padding at the end of the scroll container.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18351352

fbshipit-source-id: 5482fb81d0e385f0ce36530491b407c03ad87f3e
2019-11-06 13:56:10 -08:00
Rick Hanlon 38b3cbcca9 LogBox - Update press backfround for inspector footers
Summary:
Previously the background for the LogBox inspector footer buttons bleed into the background behind them. This change gives them more distinct on press backgrounds.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18337437

fbshipit-source-id: c0cefd4464d94dc23316208135a9bf922fb510cb
2019-11-06 10:17:47 -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 059e54a6e3 LogBox - hide only non-fatal errors for disableLogBox
Summary:
This diff updates the handling for `console.disableLogBox` so that:

- It does not disable fatals and syntax errors
- When there is a fatal or syntax error, the hidden logs are still shown and browsable

Changelog: [Internal]

Differential Revision: D18339684

fbshipit-source-id: 906122cc19ce50b3a21a42ae455206796953bcf3
2019-11-06 10:12:01 -08:00
Rick Hanlon 1fb815ed43 LogBox - hotfix for opening logs
Summary:
`fatalIndex` is never null, we switched it to go to -1 when it's not set

Changelog: [Internal}

Reviewed By: cpojer

Differential Revision: D18324666

fbshipit-source-id: 04d4cca9923af2a91ceec03f8314dead4681e526
2019-11-05 07:14:27 -08:00
Tim Yung 66e72bb4e0 Animated: Forward Ref to Component
Summary:
Changes `createAnimatedComponent` so that a `ref` assigned to an Animated component will now be forwarded to the internal component. Previously, a ref to the internal component was accessed using the `getNode` method. The `getNode` method is now deprecated and will return the same `ref` but show a deprecation error.

Changelog:
[General] [Changed] - Refs on an Animated component are now the internal component. The `getNode` call has been deprecated.

Reviewed By: TheSavior

Differential Revision: D18290474

fbshipit-source-id: 5849809583a17624a89071db8be1282a12caedf3
2019-11-03 18:02:00 -08:00
Rick Hanlon 5a943ec235 LogBox - Fix for buttons forcing refresh on fatals
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
2019-11-01 21:42:42 -07:00
Rick Hanlon 0825c2b2e7 LogBox - Add syntax error handling
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
2019-11-01 16:08:49 -07:00
Rick Hanlon eefece4be6 Hide stack frames when they're empty
Summary:
In the next diff we'll introduce syntax errors, which we don't show stackframes for since they don't make sense. This diff removes the Stack Frame section when there are no stack frames available.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D18278831

fbshipit-source-id: 0a6ad5c3b7fed76123b6ad3ccfc8f3f0b044bda2
2019-11-01 16:08:49 -07:00
Rick Hanlon f6b1fa3197 Add fatal handling
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
2019-11-01 16:08:48 -07:00
Rick Hanlon 1807a6afee LogBox - Dismiss errors and warnings independently
Summary:
This diff makes the warning and error notifications independently dismissible

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18218937

fbshipit-source-id: 198b18d7f177fcb59506a4adfed5b1ce0a331aba
2019-10-31 16:26:43 -07:00
Rick Hanlon b2bafa06fa LogBox - Better error support
Summary:
This diff adds support for thrown exceptions to redboxes, and hides the native redbox when we show an error in LogBox.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18212064

fbshipit-source-id: 92031d554968bcb079f81568673ae85697c8f5ad
2019-10-31 16:26:43 -07: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 8cfa379503 LogBox - Update header to cycle around to begining
Summary:
This diff updates the header pagination logic so that it circles around to the beginning/end when reaching either end of the log list in the LogBox inspector.

It also changes the header message for a single log from "Logs" to "Log 1 of 1"

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18091621

fbshipit-source-id: 4d7e5e2cb0eb1a1ed09ca8ad318e6715d674648f
2019-10-28 10:10:55 -07:00
Rick Hanlon 3c525d5b17 LogBox - Display errors for notifications and inspector
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
2019-10-28 10:10:55 -07:00
Rick Hanlon c5aa26da41 Add log level to support errors
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
2019-10-28 10:10:54 -07:00
Rick Hanlon cc056907cf Clean up API for LogBoxLogParser
Summary:
This diff cleans up two functions from:

```
LogBoxLogData.add({args: ['A']});
LogBoxLogParser({args: ['A']});
```

to:

```
LogBoxLogData.add(['A']);
LogBoxLogParser.parseLog(['A']);
```

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18056462

fbshipit-source-id: be6108069fc24b1f25d1382ad31c314183c793f8
2019-10-22 14:13:20 -07:00
Rick Hanlon 41b0d0a672 LogBox - Clean up and test message substitutions
Summary:
This diff cleans up some of the message substitution logic and adds unit tests

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18056241

fbshipit-source-id: 6173961c049071ab8aeff6cd273bd3590ee21e60
2019-10-22 14:13:19 -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 fb8e6610e5 LogBox - remove ignored logs as perf improvement
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
2019-10-22 14:13:18 -07:00
Rick Hanlon b08d972084 Add UI tests for LogBox
Summary:
Adds tests for `LogBox/UI`

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D17965863

fbshipit-source-id: ffb8c669cf5b1a9fa537f725523db80d3bc4fc77
2019-10-21 21:08:03 -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