Skip to content

Commit

Permalink
Fix errors with component stacks reported as warnings
Browse files Browse the repository at this point in the history
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

Differential Revision: D63349613
  • Loading branch information
rickhanlonii authored and facebook-github-bot committed Sep 24, 2024
1 parent ba477cd commit 10ad9d3
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 5 deletions.
4 changes: 2 additions & 2 deletions packages/react-native/Libraries/LogBox/Data/LogBoxData.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,9 @@ let warningFilter: WarningFilter = function (format) {
return {
finalFormat: format,
forceDialogImmediately: false,
suppressDialog_LEGACY: true,
suppressDialog_LEGACY: false,
suppressCompletely: false,
monitorEvent: 'unknown',
monitorEvent: 'warning_unhandled',
monitorListVersion: 0,
monitorSampleRate: 1,
};
Expand Down
39 changes: 39 additions & 0 deletions packages/react-native/Libraries/LogBox/__tests__/LogBox-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -506,6 +506,45 @@ describe('LogBox', () => {
'Custom: after installing for the second time',
);
});

it('registers errors with component stack as errors by default, when ExceptionManager is registered first', () => {
jest.spyOn(LogBoxData, 'checkWarningFilter');
jest.spyOn(LogBoxData, 'addLog');

ExceptionsManager.installConsoleErrorReporter();
LogBox.install();

console.error(
'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey',
);

expect(LogBoxData.addLog).toBeCalledWith(
expect.objectContaining({level: 'error'}),
);
expect(LogBoxData.checkWarningFilter).toBeCalledWith(
'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey',
);
});

it('registers errors with component stack as errors by default, when ExceptionManager is registered second', () => {
jest.spyOn(LogBoxData, 'checkWarningFilter');
jest.spyOn(LogBoxData, 'addLog');

LogBox.install();
ExceptionsManager.installConsoleErrorReporter();

console.error(
'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey',
);

expect(LogBoxData.addLog).toBeCalledWith(
expect.objectContaining({level: 'error'}),
);
expect(LogBoxData.checkWarningFilter).toBeCalledWith(
'HIT\n at Text (/path/to/Component:30:175)\n at DoesNotUseKey',
);
});

it('registers errors without component stack as errors by default, when ExceptionManager is registered first', () => {
jest.spyOn(LogBoxData, 'checkWarningFilter');
jest.spyOn(LogBoxData, 'addException');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Array [
"extraData": Object {
"redacted": true,
},
"level": "warn",
"level": "error",
"message": Object {
"content": "Warning: Manual console error",
"substitutions": Array [],
Expand Down Expand Up @@ -91,7 +91,7 @@ Array [
},
],
"componentStackType": "stack",
"level": "warn",
"level": "error",
"message": Object {
"content": "Warning: Invalid prop \`invalid\` supplied to \`React.Fragment\`. React.Fragment can only have \`key\` and \`children\` props.",
"substitutions": Array [
Expand Down Expand Up @@ -146,7 +146,7 @@ Array [
},
],
"componentStackType": "stack",
"level": "warn",
"level": "error",
"message": Object {
"content": "Warning: Each child in a list should have a unique \\"key\\" prop.
Expand Down

0 comments on commit 10ad9d3

Please sign in to comment.