Summary:
Have ScrollView use forwardRef so that the host component methods like `measure` and `measureLayout` are available without having to call `getNativeScrollRef`. Instead, you can use `<ScrollView ref={myRef} />` and directly call all methods of ScrollView and host components on `myRef`.
Previous usage:
```
const myRef = React.createRef<React.ElementRef<typeof ScrollView>>();
<ScrollView ref={myRef} />
const innerViewRef = myRef.current.getNativeScrollRef();
innerViewRef.measure();
```
New usage:
```
const myRef = React.createRef<React.ElementRef<typeof View>>();
<ScrollView ref={myRef} />
// now, myRef.current can be used directly as the ref
myRef.current.measure();
myRef.current.measureLayout();
// Additionally, myRef still has access to ScrollView methods
myRef.current.scrollTo(...);
```
Changes:
* Added deprecation warnings to ScrollView methods `getNativeScrollRef`, `getScrollableNode`, and `getScrollResponder`
* Added the forwardRef call to create `ForwardedScrollView` - this takes in `ref` and passes it into the class ScrollView as `scrollViewRef`.
* Forwarded the ref to the native scroll view using `setAndForwardRef`.
* Added statics onto `ForwardedScrollView` so that `ScrollView.Context` can still be accessed.
* Added type `ScrollViewImperativeMethods`, which lists the public methods of ScrollView.
* Converted all public methods of ScrollView to arrow functions. This is because they need to be bound to the forwarded ref.
* Bound all public methods of ScrollView to the forwarded ref in the `setAndForwardRef` call.
* Flow typed the final output (ForwardedScrollView) as an abstract component that takes in the props of the `ScrollView` class, and has all methods of both the inner host component (`measure`, `measureLayout`, etc) and the public methods (`scrollTo`, etc).
Changes to mockScrollView:
* Changed mockScrollView to be able to mock the function component instead of a class component
* Updated necessary tests
Changelog:
[General] [Changed] - Make ScrollView use forwardRef
Reviewed By: TheSavior
Differential Revision: D19304480
fbshipit-source-id: 6c359897526d9d5ac6bc6ab6d5f9d82bfc0d8af4
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html
Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.
Reviewed By: zertosh
Differential Revision: D20636268
fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
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:
Moves the LogBox images from base64 data to files since base64 is not supported everywhere.
Changelog: [Internal]
Reviewed By: fkgozali
Differential Revision: D19879323
fbshipit-source-id: 2dc03eebfc712ed863ed76322e133fcad5b00bb4
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:
## Overview
This diff adds handling for syntax errors created using `buildCodeFrameError` which have a slightly different format than syntax errors thrown during transforms.
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D18658502
fbshipit-source-id: 0836f2c16cdd57c10ed1e03dc7345d8e1ccf53f3
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 adds syntax highlighting to LogBox CodeFrames. It works by turning Ansi codes into "JSON" (it's actually just a JS object but the third-party API uses JSON as terminology) and then turning that into `<Text>` elements.
The syntax theme is called Afterglow and I took it from https://iterm2colorschemes.com/. Happy for anyone who wants to further tweak it! I installed this into iTerm and extracted the colors from there as it has a color picker and the labels directly map to the color classes exposed by the `anser` package.
Changelog: [Internal]
(Note: this ignores all push blocking failures!)
Reviewed By: rickhanlonii
Differential Revision: D18618897
fbshipit-source-id: 64815619fc482e08b5671f492dabda8c8c0ceca5
Summary:
LogBox tends to take a bit of time to open after tapping a log banner. This is very noticeable on Android where it takes multiple seconds.
When looking at React DevTools, the Stack Frame code can be responsible for two thirds of total LogBox rendering time. With this diff, the time is reduced from about 46ms to 25ms, and the total time spent rendering LogBox is reduced by one third.
This diff makes a few micro-optimizations but primarily it gets rid of an unnecessary View and collapses multiple text components into a single one as they are all rendered the same. Note that this also fixes an issue in the case where a line number may be missing but a column was provided. While I can't think of a case where that would actually happen, previously it would print the column (which could be mistaken for the lineNumber in that case) but now it prints the column only if the line Number is also present.
Changelog: [Internal]
Reviewed By: rickhanlonii
Differential Revision: D18613899
fbshipit-source-id: 5c6a3b65b749d5f95058b34ded6cc12531d91c38
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 makes number of improvements to stack frames:
- Adds padding around stack frame pressables
- Fixed wrapping for the closing bracket on component stacks
- Adds passing around "see more" buttons
- Fixed the count for "Show x more frames" when it's 0 and otherwise
- Add more cases for the count text
- Switches button back to minimize (snuck this in here)
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18495331
fbshipit-source-id: 8b9efa88c4205b23e734893d8db6deccce88344c
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:
This diff adds `isRenderError` to the Log data, and refactors the LogBoxLog object to accept an object in the constructor instead of adding the 7th argument. No visual updates as those are in the next diff.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18466192
fbshipit-source-id: e38ef9032b8074abbc7b40cbe7a84d45285944c4
Summary:
This diff makes minor style improvements and refactors to stack frame displays, primarily:
- Adding brackets around react components
- Uses a monospace font for the code
- Changing section titles to "Components" and "Call stack"
- Refactors the section headers to a single component and reduces the text size of headings
- Removes the query string from unsymbolicated stacks
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18433487
fbshipit-source-id: 7914b5810a4303e9a0d52def92e524b9e72f79ed
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:
Code frame columns are returned 0 based but displayed in editors 1 based, this diff bumps the column we display by one to match.
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18426163
fbshipit-source-id: 2c6aefb6fe7ce161cd768b6748b7739d486ed438
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
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
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
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
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
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
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
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
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
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:
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
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 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
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:
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 cleans up some of the message substitution logic and adds unit tests
Changelog: [Internal]
Reviewed By: cpojer
Differential Revision: D18056241
fbshipit-source-id: 6173961c049071ab8aeff6cd273bd3590ee21e60
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
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
Kacie Bawiec
Michael Bolin
Rick Hanlon
Eli White
Christoph Nakazawa
Tim Yung