mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Moti Zilberman
2dadb9e2b0
Summary: # Context In https://github.com/facebook/react/pull/16141 we imported `ReactFiberErrorDialog` unchanged from React. That implementation was not idempotent: if passed the same error instance multiple times, it would amend its `message` property every time, eventually leading to bloat and low-signal logs. The message bloat problem is most evident when rendering multiple `lazy()` components that expose the same Error reference to React (e.g. due to some cache that vends the same rejected Promise multiple times). More broadly, there's a need for structured, machine-readable logging to replace stringly-typed interfaces in both the production and development use cases. # This diff * We leave the user-supplied `message` field intact and instead do all the formatting inside `ExceptionsManager`. To avoid needless complexity, this **doesn't** always have the exact same output as the old code (but it does come close). See tests for the specifics. * The only mutation we do on React-captured error instances is setting the `componentStack` expando property. This replaces any previously-captured component stack rather than adding to it, and so doesn't create bloat. * We also report the exception fields `componentStack`, unformatted `message` (as `originalMessage`) and `name` directly to `NativeExceptionsManager` for future use. Reviewed By: cpojer Differential Revision: D16331228 fbshipit-source-id: 7b0539c2c83c7dd4e56db8508afcf367931ac71d
55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
export type CapturedError = {
|
|
+componentName: ?string,
|
|
+componentStack: string,
|
|
+error: mixed,
|
|
+errorBoundary: ?{},
|
|
+errorBoundaryFound: boolean,
|
|
+errorBoundaryName: string | null,
|
|
+willRetry: boolean,
|
|
};
|
|
|
|
import type {ExtendedError} from './Devtools/parseErrorStack';
|
|
|
|
import {handleException, SyntheticError} from './ExceptionsManager';
|
|
|
|
/**
|
|
* Intercept lifecycle errors and ensure they are shown with the correct stack
|
|
* trace within the native redbox component.
|
|
*/
|
|
function showErrorDialog(capturedError: CapturedError): boolean {
|
|
const {componentStack, error} = capturedError;
|
|
|
|
let errorToHandle;
|
|
|
|
// Typically Errors are thrown but eg strings or null can be thrown as well.
|
|
if (error instanceof Error) {
|
|
errorToHandle = (error: ExtendedError);
|
|
} else if (typeof error === 'string') {
|
|
errorToHandle = (new SyntheticError(error): ExtendedError);
|
|
} else {
|
|
errorToHandle = (new SyntheticError('Unspecified error'): ExtendedError);
|
|
}
|
|
try {
|
|
errorToHandle.componentStack = componentStack;
|
|
} catch (e) {}
|
|
handleException(errorToHandle, false);
|
|
|
|
// Return false here to prevent ReactFiberErrorLogger default behavior of
|
|
// logging error details to console.error. Calls to console.error are
|
|
// automatically routed to the native redbox controller, which we've already
|
|
// done above by calling ExceptionsManager.
|
|
return false;
|
|
}
|
|
|
|
module.exports = {showErrorDialog};
|