mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-01-13 09:20:50 +08:00
Summary: Cleanup RedBox messages and stack traces. This PR consists of 2 changes (I'm good with splitting them up if you'd like): - [general] filter out some of the internal callsites from the symbolicated stack (I thought about using monospace font for title with code frame, but it looks weird) - [ios][android] strip ANSI characters (coming from colored Babel code frame) from the error message I think it's ok to strip it inside native handlers so we can still have a colorful code frame in the terminal output. **JS Code frame:** |before|after| |--|--| |<img width="400" alt="Screenshot 2019-04-30 at 12 32 05" src="https://user-images.githubusercontent.com/5106466/56956590-ef678d80-6b44-11e9-9019-6801f050ab0d.png">|<img width="400" alt="Screenshot 2019-04-30 at 12 52 43" src="https://user-images.githubusercontent.com/5106466/56957302-f42d4100-6b46-11e9-869b-ea9c7ce5b90f.png">| |before|after| |--|--| ||| **Filtered stack traces:** |before|after| |--|--| |<img width="50%" alt="Screenshot 2019-04-30 at 12 27 21" src="https://user-images.githubusercontent.com/5106466/56956641-0908d500-6b45-11e9-8cdc-8c2a34a071e5.png"><img width="50%" alt="Screenshot 2019-04-30 at 12 27 28" src="https://user-images.githubusercontent.com/5106466/56956642-0908d500-6b45-11e9-921c-fabfb8515cc0.png">|<img width="100%" alt="Screenshot 2019-04-30 at 12 26 55" src="https://user-images.githubusercontent.com/5106466/56956650-0efeb600-6b45-11e9-9f5f-f10dd69580d1.png">| There's still a lot of places that are hard to read, but I think this is a good start towards more readable errors. cc cpojer [General][Changed] - Cleanup RedBox message and stack output Pull Request resolved: https://github.com/facebook/react-native/pull/24662 Differential Revision: D15147571 Pulled By: cpojer fbshipit-source-id: 1de4e521af988fa7fc709b6accd0ddd984388e72
134 lines
4.1 KiB
JavaScript
134 lines
4.1 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
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {ExtendedError} from 'parseErrorStack';
|
|
|
|
const INTERNAL_CALLSITES_REGEX = new RegExp(
|
|
[
|
|
'/Libraries/Renderer/oss/ReactNativeRenderer-dev\\.js$',
|
|
'/Libraries/BatchedBridge/MessageQueue\\.js$',
|
|
].join('|'),
|
|
);
|
|
|
|
/**
|
|
* Handles the developer-visible aspect of errors and exceptions
|
|
*/
|
|
let exceptionID = 0;
|
|
function reportException(e: ExtendedError, isFatal: boolean) {
|
|
const {ExceptionsManager} = require('NativeModules');
|
|
if (ExceptionsManager) {
|
|
const parseErrorStack = require('parseErrorStack');
|
|
const stack = parseErrorStack(e);
|
|
const currentExceptionID = ++exceptionID;
|
|
const message =
|
|
e.jsEngine == null ? e.message : `${e.message}, js engine: ${e.jsEngine}`;
|
|
if (isFatal) {
|
|
ExceptionsManager.reportFatalException(
|
|
message,
|
|
stack,
|
|
currentExceptionID,
|
|
);
|
|
} else {
|
|
ExceptionsManager.reportSoftException(message, stack, currentExceptionID);
|
|
}
|
|
if (__DEV__) {
|
|
const symbolicateStackTrace = require('symbolicateStackTrace');
|
|
symbolicateStackTrace(stack)
|
|
.then(prettyStack => {
|
|
if (prettyStack) {
|
|
const stackWithoutInternalCallsites = prettyStack.filter(
|
|
frame => frame.file.match(INTERNAL_CALLSITES_REGEX) === null,
|
|
);
|
|
ExceptionsManager.updateExceptionMessage(
|
|
e.message,
|
|
stackWithoutInternalCallsites,
|
|
currentExceptionID,
|
|
);
|
|
} else {
|
|
throw new Error('The stack is null');
|
|
}
|
|
})
|
|
.catch(error =>
|
|
console.warn('Unable to symbolicate stack trace: ' + error.message),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
declare var console: typeof console & {
|
|
_errorOriginal: Function,
|
|
reportErrorsAsExceptions: boolean,
|
|
};
|
|
|
|
/**
|
|
* Logs exceptions to the (native) console and displays them
|
|
*/
|
|
function handleException(e: Error, isFatal: boolean) {
|
|
// Workaround for reporting errors caused by `throw 'some string'`
|
|
// Unfortunately there is no way to figure out the stacktrace in this
|
|
// case, so if you ended up here trying to trace an error, look for
|
|
// `throw '<error message>'` somewhere in your codebase.
|
|
if (!e.message) {
|
|
e = new Error(e);
|
|
}
|
|
if (console._errorOriginal) {
|
|
console._errorOriginal(e.message);
|
|
} else {
|
|
console.error(e.message);
|
|
}
|
|
reportException(e, isFatal);
|
|
}
|
|
|
|
function reactConsoleErrorHandler() {
|
|
console._errorOriginal.apply(console, arguments);
|
|
if (!console.reportErrorsAsExceptions) {
|
|
return;
|
|
}
|
|
|
|
if (arguments[0] && arguments[0].stack) {
|
|
reportException(arguments[0], /* isFatal */ false);
|
|
} else {
|
|
const stringifySafe = require('stringifySafe');
|
|
const str = Array.prototype.map.call(arguments, stringifySafe).join(', ');
|
|
if (str.slice(0, 10) === '"Warning: ') {
|
|
// React warnings use console.error so that a stack trace is shown, but
|
|
// we don't (currently) want these to show a redbox
|
|
// (Note: Logic duplicated in polyfills/console.js.)
|
|
return;
|
|
}
|
|
const error: ExtendedError = new Error('console.error: ' + str);
|
|
error.framesToPop = 1;
|
|
reportException(error, /* isFatal */ false);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Shows a redbox with stacktrace for all console.error messages. Disable by
|
|
* setting `console.reportErrorsAsExceptions = false;` in your app.
|
|
*/
|
|
function installConsoleErrorReporter() {
|
|
// Enable reportErrorsAsExceptions
|
|
if (console._errorOriginal) {
|
|
return; // already installed
|
|
}
|
|
// Flow doesn't like it when you set arbitrary values on a global object
|
|
console._errorOriginal = console.error.bind(console);
|
|
console.error = reactConsoleErrorHandler;
|
|
if (console.reportErrorsAsExceptions === undefined) {
|
|
// Individual apps can disable this
|
|
// Flow doesn't like it when you set arbitrary values on a global object
|
|
console.reportErrorsAsExceptions = true;
|
|
}
|
|
}
|
|
|
|
module.exports = {handleException, installConsoleErrorReporter};
|