react-native-macos/Libraries/Core/ExceptionsManager.js

134 строки
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
2015-03-26 20:06:50 +03:00
* @flow
*/
'use strict';
import type {ExtendedError} from './Devtools/parseErrorStack';
cleanup RedBox message and stack output (#24662) 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| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **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
2019-04-30 17:30:45 +03:00
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('../BatchedBridge/NativeModules');
if (ExceptionsManager) {
const parseErrorStack = require('./Devtools/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('./Devtools/symbolicateStackTrace');
symbolicateStackTrace(stack)
.then(prettyStack => {
if (prettyStack) {
cleanup RedBox message and stack output (#24662) 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| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **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
2019-04-30 17:30:45 +03:00
const stackWithoutInternalCallsites = prettyStack.filter(
frame => frame.file.match(INTERNAL_CALLSITES_REGEX) === null,
);
ExceptionsManager.updateExceptionMessage(
message,
cleanup RedBox message and stack output (#24662) 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| |--|--| |![image](https://user-images.githubusercontent.com/5106466/56959472-c8618980-6b4d-11e9-84be-6261d8375f4a.png)|![image](https://user-images.githubusercontent.com/5106466/56959463-bc75c780-6b4d-11e9-9d8b-25ffe46c87cf.png)| **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
2019-04-30 17:30:45 +03:00
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('../Utilities/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};