Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48783
## Overview
This is the final boss of the new owner stacks feature. With owner stacks, we don't need to parse message strings to find the component stack for logbox. Instead, we can access the component stack directly with `captureOwnerStack`.
This means we don't need to install the LogBox console.error patch and can greatly simplify the process of handling errors and make it more reliable.
To do this, we rely only on adding LogBox to the ExceptionManager:
- `reactConsoleErrorHandler` -> `LogBox.addConsoleLog`
- `reportException` -> `LogBox.addException`
Changelog:
[General][Fixed] - Remove LogBox patch, de-duplicating errors
## Benefits
As a side effect, this removes a lot of duplicate errors. For example, currently if a component throws, you get 2 errors:
{F1974436906}
After this, there's just the one you expect:
{F1974436908}
## Followups
After this lands and doesn't need reverted for some reason, we can delete a ton of code from logbox for finding and detecting stacks from errors.
Reviewed By: javache
Differential Revision: D68380668
fbshipit-source-id: 68112f1e3992fada4d6aaffdf9bd618ce1834f7b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51653
Changelog: [Internal]
Adds a transform that ensures no types and interfaces named `Props` end up in the generated TypeScript definitions. Those are not descriptive and cause duplicate types in the rollup.
Reviewed By: huntie
Differential Revision: D75508800
fbshipit-source-id: 8d64ec19cbabe57495d6462df9d372ba42cda618
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51524
Links in error suppressions will point to the announcement post in Flow FYI.
Changelog: [Internal]
drop-conflicts
Reviewed By: marcoww6
Differential Revision: D75188177
fbshipit-source-id: 27ea1fbee848e9371e679cf423e30bc9608edea0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51405
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74894042
fbshipit-source-id: 93fbadb32e4a1225836db9d729d7bf502ebddd84
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51403
Prefers using this as a destructured import instead of as a member expression of `React`.
Changelog:
[Internal]
Reviewed By: SamChou19815
Differential Revision: D74891875
fbshipit-source-id: 981e85b5da84950c9e66e8d6b6496019e536711d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51210
Changelog: [internal]
This adds a safety mechanism to Fantom tests to prevent LogBox from swallowing errors.
Now we validate that LogBox isn't installed when running tasks, so we can properly fix error reporting in tests.
Reviewed By: rshest
Differential Revision: D74464749
fbshipit-source-id: ef5e814b14aedbc681a4c7f9f8f60f454b239b6d
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51211
Changelog: [internal]
This modifies the setup for Fantom so:
1. We don't inject "InitializeCore" by default.
2. We define a default environment setup module for Fantom with good defaults (LogBox, etc. disabled).
We also migrate all existing tests to use the new module.
The goal of this is to prevent LogBox from being used in tests so we can properly fix error propagation in the work loop (so they're not intercepted by it).
Reviewed By: rshest
Differential Revision: D69003812
fbshipit-source-id: 00353b5055e3700943a08ea67f698d49e068555b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50730
This is a consolidation of our "dev support" features in the `src/private/` dir.
New grouping:
- `src/private/devsupport/`
- `devmenu/` — The Dev Menu and in-app inspection features (in-app UI)
- `elementinspector/` — The Element Inspector overlay (panel with sub-features), accessed from Dev Menu → Toggle Element Inspector
- `perfmonitor/` — The Perf Monitor overlay, accessed from Dev Menu → Show Perf Monitor
- `rndevtools/` — Modules supporting React Native DevTools (external UI)
`NativeReactDevToolsRuntimeSettingsModule.js` and `NativeReactDevToolsSettingsManager.js` are also moved out of `specs_DEPRECATED/`.
Changelog: [Internal]
Reviewed By: hoxyq
Differential Revision: D73031559
fbshipit-source-id: 952a469f31f4cd05aeed27dc7023552e723ca078
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50260
Changelog: [internal]
Created new directory `react-native/src/private/__tests__/utilities` and moved `ensureInstance` and `isUnreachable` to it.
Reviewed By: yungsters
Differential Revision: D71826787
fbshipit-source-id: 50a50a54ab928c9060282a9f2256ad97dd856ba4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/50035
changelog: [internal]
to make it easier to write JSDocs, let's export functions directly from index.js instead of using proxy object.
Reviewed By: rubennorte
Differential Revision: D71200977
fbshipit-source-id: 0b53c0d3f73577c19253537b9e884459a4920643
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49912
Changelog: [internal]
This migrates all Fantom tests to use package-relative imports from `react-native` instead of relative paths.
Note that a lot of the current deep imports (e.g.: `import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement'`) will not be necessary when we release those APIs as public.
Reviewed By: sammy-SC
Differential Revision: D70779722
fbshipit-source-id: f0d28e00ca9881dc2a3cd151b75327b26711277e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49690
Changelog: [internal]
We're shipping this soon and most tests already using DOM APIs to make assertions, so it's easier if we just "ship" in tests.
Reviewed By: javache, sammy-SC
Differential Revision: D69307129
fbshipit-source-id: 75d0be013703cff7bc2bad5cd16c26bc6471e547
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49534
Moving the U+200E character ensures that it gets the same font style as other fragments in the LogBox inspector. This solves an issue where the line height differential is causing issues on some out-of-tree platforms (e.g., Windows).
## Changelog
[Internal]
Reviewed By: shwanton
Differential Revision: D69857916
fbshipit-source-id: 5bc70dc0282f3ef9e9b2767ab8094e9923638e99
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49338
This doesn't cover all cases, but is a good start.
Where relevant, I call out inline places where there are KPs with LogBox that will be fixed separately.
## Changelog
Changelog: [internal]
Reviewed By: rubennorte
Differential Revision: D69443040
fbshipit-source-id: 7281f30aa705ae812d5b5f5f9ad03b37358de059
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49337
*Note: This diff adds helpers and updates the one test we have. The next diff adds a bunch of tests, see that diff for how these helpers are used to scale to a large number of tests.*
-----
## Overview
Adds helpers for the LogBox e2e test to make it easier to write simple, readable, tests with a healthy level of abstraction over the e2e APIs.
## API
The helpers expose an ability to render a component, and return methods to get the UI state:
```
// Returns the LogBox inspector UI as an object.
getInspectorUI: () => ?InspectorUI,
// Returns the LogBox notification UI as an object.
getNotificationUI: () => ?NotificationUI,
```
These return objects that represent the main text elements in the UI like `title` and `message`.
The helpers also provide methods for interacting with the LogBox UI:
```
// True if the LogBox inspector is open.
isOpen: () => boolean,
// Tap the notification to open the LogBox inspector.
openNotification: () => void,
// Tap to close the notification.
dimissNotification: () => void,
// Tap the minimize button to collapse the LogBox inspector.
mimimizeInspector: () => void,
// Tap the dismiss button to close the LogBox inspector.
dismissInspector: () => void,
// Tap the next button to go to the next log.
nextLog: () => void,
// Tap the previous button to go to the previous log.
previousLog: () => void,
```
## Example test
This allows writing tests like:
```
test('should log error', () => {
const logBox = renderLogBox(<ComponentThatErrors />);
// Should show notification
expect(logBox.isOpen()).toBe(false);
expect(logBox.getNotifciationUI()).toEqual({
count: '!',
message: 'error message',
});
// Tap the notification
logBox.openNotification();
// Should show log
expect(logBox.isOpen()).toBe(true);
expect(logBox.getInspectorUI()).toEqual({
header: 'Log 1 of 1',
title: 'Console Error',
message: 'error message',
stackFrames: [
'ComponentThatErrors'
],
componentStackFrames: [
'<ComponentThatErrors />',
],
isDismissable: true,
});
})
```
## Changelog
Changelog: [internal]
Reviewed By: rubennorte
Differential Revision: D69443041
fbshipit-source-id: c81ccd56a39d01d61814d29515b587096c0509c0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/49252
Changelog: [internal]
This adds a Fantom test placeholder for LogBox, which shows what type of tests we could be writing for this.
It also adds a few ids in LogBox components so we can inspect them in tests and make assertions on them.
Reviewed By: javache
Differential Revision: D69301572
fbshipit-source-id: 89a332a47c300c1dc18937cd91206ce6d820b6aa
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48980
Changelog: [internal]
This will be properly removed soon, but disabling for now to avoid showing up in all PRs.
Reviewed By: cortinico
Differential Revision: D68719573
fbshipit-source-id: 6a631ba2556f1399d0ade52f19b79f5a3212e007
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48889
## Motivation
Modernising the react-native codebase to allow for ingestion by modern Flow tooling.
## This diff
- Updates files in `Libraries/Core` to use `export` syntax
- `export default` for qualified objects, many `export` statements for collections
- Appends `.default` to requires of the changed files.
- Changed `* as ExceptionsManager` to `ExceptionsManager` in import statements throughout product code.
- Updates test files.
- Updates the public API snapshot (intented breaking change)
Changelog:
[General][Breaking] - Files inside `Libraries/Core` use `export` syntax, which requires the addition of `.default` when imported with the CJS `require` syntax.
[General][Breaking] - `Libraries/Core/ExceptionsManager` now exports a default `ExceptionsManager` object, and `SyntheticError` as a secondary export.
Reviewed By: huntie
Differential Revision: D68553694
fbshipit-source-id: 51c9a404b2762cb1cdb5f56cae3a683ccdfffc7f
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48785
## Overview
This change adds code frames for component stacks if it differs from the call stack frame.
## Background
After adding native stack based stack frames, which we already symbolicate, we had the capability to show a code frame for component stacks as well as the stack frame (if they differ).
However, this usually wasn't that useful, because the native component stack was unlikely to be more useful than the component stack (see the comparisons below for key errors).
## Owner stacks
With owner stacks the component frame is a lot more useful and in many cases are better at showing the location than the call stack frame.
## Example Screens
Before:
{F1974436645}
After (with owner stacks):
{F1974436723}
Changelog:
[General][Added] - Add owner stack code frames to LogBox
Reviewed By: hoxyq
Differential Revision: D68285627
fbshipit-source-id: 541cecbd4786fffd1970d2e85e659757e3f81604
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48782
React currently has a babel transform to replace all `console.error` calls with a special function for RN and www. The function adds component stacks, which doesn't make sense in an owner stack world because:
- not all console.error calls are replaced, creating inconsistency
- oss web users don't append component stacks to console.log any more
- component stacks can be accessed for DEV modals like logbox with `captureOwnerStack`
- owner stacks are already added to the console with createTask if you use console.error directly
- the redirection is the single greatest source of fragility in the logbox reporting pipeline
So we're removing this as part of the owner stack rollout. This should only be enabled with owner stacks.
## Example Screen
Before:
{F1974436644}
After:
{F1974436645}
## Changelog:
[General] [Added] - Add full owner stack support to React Native
Reviewed By: hoxyq
Differential Revision: D68285628
fbshipit-source-id: 9772593d7ac6e012392d18c6796580c14c852074
Summary:
While we're waiting for 19 stable, let's bring main back to 18.3.1 ahead of the 0.77 branch cut. We'll land this change just after 19 stable lands.
This is a cherry pick of b93b378fa0 which landed in 0.76 already
bypass-github-export-checks
## Changelog:
[INTERNAL] - Revert React 19RC to React 18.3.1
Pull Request resolved: https://github.com/facebook/react-native/pull/47380
Test Plan: CI
Reviewed By: cipolleschi
Differential Revision: D65430775
Pulled By: cortinico
fbshipit-source-id: f0f211754c8ffe5d037fd299e4de52c29d1d7913
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47466
Now, when the useAlwaysAvailableJSErrorHandling feature flag is true, React Native will use the earlyjs c++ error reporting pipeline for handling all javascript errors!
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D64715159
fbshipit-source-id: 597a5278eb792f87dca10e06fa9816b3a8c47b84
Summary:
This pull request fixes a style bug in the AnsiHighlight component when the application is in Right-To-Left (RTL) mode. The adjustments ensure that text highlighting is visually consistent and functions properly across all layout modes.
### Before
| Android RTL | iOS RTL | Android LTR | iOS LTR |
|----------|----------|----------|----------|
|  |  |  |  |
### After
| Android RTL | iOS RTL | Android LTR | iOS LTR |
|----------|----------|----------|----------|
|  |  |  |  |
## Changelog:
[GENERAL] [Fixed] - AnsiHighlight style in RTL layout
<!-- Help reviewers and the release process by writing your own changelog entry.
Pick one each for the category and type tags:
[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message
For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
Pull Request resolved: https://github.com/facebook/react-native/pull/47230
Test Plan:
To test the changes, open LogBox while the app is in RTL mode. The modifications ensure that any error messages display correctly. I have verified that the changes function properly in both LTR and RTL modes, and all existing functionality remains unaffected.
This is an example component to throw an error to show LogBox.
```tsx
import React from 'react';
import {Alert, Button, I18nManager, StyleSheet, Text, View} from 'react-native';
function SampleError() {
return (
<View>
<Button
title="Change to RTL"
onPress={() => {
I18nManager.allowRTL(true);
I18nManager.forceRTL(true);
Alert.alert('Restart app to apply changes');
}}
/>
<Button
title="Change to LTR"
onPress={() => {
I18nManager.allowRTL(false);
I18nManager.forceRTL(false);
Alert.alert('Restart app to apply changes');
}}
/>
<Text style={styles.text}>
isRTL: {I18nManager.isRTL ? 'true' : 'false'}
</Text>
<Button
title="Show Error"
onPress={() => {
console.error('sample خطا');
}}
/>
</View>
);
}
const styles = StyleSheet.create({
text: {
fontSize: 24,
textAlign: 'center',
paddingVertical: 20,
},
});
export default SampleError;
```
Reviewed By: sammy-SC
Differential Revision: D65145991
Pulled By: NickGerleman
fbshipit-source-id: cbca106813e587ed223be48b75ee5279072c2da0
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47143
In order to adopt react 19's ref-as-prop model, we need to eliminate all the places where they are treated differently. `React.AbstractComponent` is the worst example of this, and we need to eliminate it.
This diff replaces most of the remaining `React.AbstractComponent` in react-native.
Changelog: [Internal]
Reviewed By: alexmckenley
Differential Revision: D64701145
fbshipit-source-id: c765674fdf59812895c4fae43df97cf8b9d24f05
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109
Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.
For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.
Changelog:
[Internal]
Reviewed By: GijsWeterings
Differential Revision: D64569485
fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46935
Now, whenever the earlyjs c++ pipeline handles an error, it'll invoke callbacks registered via javascript.
## The API
```
if (global.RN$registerExceptionListener != null) {
global.RN$registerExceptionListener(
(error: ExtendedExceptionData & {preventDefault: () => mixed}) => {
error.preventDefault();
// show logbox
},
);
}
```
## The Future API
We want something more aligned with the HTML spec:
```
addEventListener('error', (event) => {
event.preventDefault();
// show logbox
});
```
## Fatals vs soft errors
The earlyjs pipeline covers just main bundle execution for now.
So, it displays logbox only if there was a soft error. If there was a fatal error, it'll just continue to display redbox as usual.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63769385
fbshipit-source-id: 9c01e1cfe0ec80842af2e5bcfbf0adfb040dbcf3
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46789
GitHub is reporting those warnings on each pull request. This clears them up as they're effectively unused.
Changelog:
[Internal] [Changed] - Remove several unused imports in Flow code
Reviewed By: cipolleschi
Differential Revision: D63757201
fbshipit-source-id: 21189136a03de8899adcbf18c8f0e29844ade340
Summary:
Ok so this is a doozy.
## Overview
There was a report that some console.error calls were being shown as warnings in LogBox but as console.error in the console. The only time we should downlevel an error to a warning is if the custom warning filter says so (which is used for some noisy legacy warning filter warnings internally).
However, in when I switched from using the `Warning: ` prefix, to using the presence of component stacks, I subtly missed the default warning filter case.
In the internal warning filter, the `monitorEvent` is always set to something other than `unknown` and if it's set to `warning_unhandled` then `suppressDialog_LEGACY` is always false.
However, the default values for the warning filter are that `monitorEvent = 'unknown'` and `suppressDialog_LEGACY = true`. In this case, we would downlevel the error to a warning.
## What's the fix?
Change the default settings for the warning filter.
## What's the root cause?
Bad configuration combinations in a fragile system that needs cleaned up, and really really bad testing practices with excessive mocking and snapshot testing (I can say that, I wrote the tests)
## How could it have been caught?
It was, but I turned off the integration tests while landing the component stack changes because of mismatches between flags internally and in OSS, and never turned them back on.
Changelog: [General] [Fixed] - Fix logbox reporting React errors as Warnings
Pull Request resolved: https://github.com/facebook/react-native/pull/46637
Reviewed By: huntie
Differential Revision: D63349613
Pulled By: rickhanlonii
fbshipit-source-id: 32e3fa4e2f2077114a6e9f4feac73673973ab50c
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46638
This is annoying, but in the next diff that fixes a bug I need to test using the default warning filter instead of a mock (really, all this mocking is terrible, idk why I did it this way).
Unfortunately, in Jest you can't just reset mocks from `jest.mock`, `restoreMocks` only resets spies and not mocks (wild right).
So in this diff I converted all the `jest.mock` calls to `jest.spyOn`. I also corrected some of the mocks that require `monitorEvent: 'warning',` like the warning filter sets.
I also added a test that works without the fix.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349615
fbshipit-source-id: 4f2a5a8800c8fe1a10e3613d3c2d0ed02fca773e
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46636
Adds more integration tests for LogBox (currently incorrect, but fixed in a later diff).
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349614
fbshipit-source-id: 8f5c6545b48a1ed18aea08d4ecbecd7a6b9fa05a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46639
These tests were skipped when we were switching to component stacks, which also hid a bug later in the stack. Re-enable them.
Changelog: [Internal]
Reviewed By: javache
Differential Revision: D63349616
fbshipit-source-id: ccde7d5bb3fcd9a27adf4af2068a160f02f7432a
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46317
Changes `AnimatedProps` to avoid allocating `AnimatedStyle` (and `AnimatedTransform`, `AnimatedObject`) unless necessary.
This not only reduces memory and traversal overhead, but it enables us to implement allowlist strategies to prune unnecessary traversals.
Changelog:
[General][Changed] - Animated now omits `style` if the supplied value is null, undefined, or not an object. Previously, it would emit an empty `style` object.
[General][Changed] - Animated now resolves `style` to the original prop value if it contains no `AnimatedNode` instances. Previously, it would resolve to a flattened style object.
Reviewed By: javache
Differential Revision: D62117423
fbshipit-source-id: 34b0c9940be5b6f5d94467993a5344406cc56f93
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46341
Issue: LogBox Notification (or toast) is partly hidden behind 3 button nav bar on Android 15 targetSdk 35 build
Solution: surround with SafeAreaView to avoid overlap with system bars
(CAUTION: SafeAreaView here is for internal RN Core usage only and should not be used elsewhere)
Changelog:
[Internal]
Reviewed By: cortinico, mdvacca
Differential Revision: D62224584
fbshipit-source-id: 0662b1be9822bf51dadec2dd4879c915a47dfc65
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46338
**Issue:**
With forced edge-to-edge on Android 15, LogBox bottom tab bar is hidden behind 3 button nav bar and is unusable.
**Solution:**
LogBox is using Android Dialog so update it to set margins based on inset values. With this change we can get rid of android header logic from JS.
Changelog:
[Android][Changed] - Modify LogBox to be usable on Android 15
Reviewed By: mdvacca
Differential Revision: D62224124
fbshipit-source-id: 4721753bf340bd813bcd560052c52b63fa58ad4b
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45578
# Changelog: [Internal]
Use previously introduced native module for managing the presence of warning notifications in LogBox:
- Don't display warnings and Fusebox migration message if there is an active debugging session
- If the session has just been started, clear warnings to hide Fusebox migration message
- If there is no active debugging session (even if there were some at some point of Host lifetime), display Fusebox migration message
See demo in test plan.
Reviewed By: huntie
Differential Revision: D59975265
fbshipit-source-id: 87d91b4d7f3c825dc795ec1b5b3073f969bc7b60
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45194
Makes a couple improvmeents to `LogBoxInspectorHeader`:
- Avoid eagerly initializing the `StatusBar` TurboModule until it is actually needed (which is only when the inspector is rendered on Android).
- Switch to `SafeAreaView` on iOS, for more accurate spacing (instead of the hardcoded iPhone X notch size).
Changelog:
[General][Changed] - Improve LogBox initialization performance
[iOS][Changed] - Improve LogBox safe area insets styling
Reviewed By: lyahdav
Differential Revision: D59081529
fbshipit-source-id: 01cc351fa9267f96b7a3c13cf1db80de3e597f93
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44994
For RN monorepo tests, wrap `create` calls through our `jest/renderer` abstraction in `await act`.
This is a no-op under current React but will be required under `react-test-renderer@19` with `IS_REACT_ACT_ENVIRONMENT`.
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D58650940
fbshipit-source-id: 4013af89dd7c9f447b2dd493989f3a4fdf2b6508
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44996
Mock out some LogBoxData symbolication in LogBoxInspector-test that would otherwise make it sensitive to an async `useEffect` when wrapping in `act`.
This is immaterial to the snapshot under test (changing a state from `PENDING` to `NONE`).
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D58651811
fbshipit-source-id: d47100a87d83102bbe183cb7266d66344e75b0b0