2019-10-22 07:05:47 +03:00
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
*
|
2019-11-02 02:05:02 +03:00
|
|
|
* @flow
|
2019-10-22 07:05:47 +03:00
|
|
|
* @format
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
LogBox - Add syntax error handling
Summary:
This diff adds handling for syntax errors.
## Strategy
To do this we introduce a new log level type syntax, giving us these levels with semantics:
- `warn` - console warns, show collapsed, dismissible
- `error` - console errors, show collapsed, dismissible
- `fatal` - thrown exceptions, show expanded, not dismissible
- `syntax` - thrown exceptions for invalid syntax, show expanded, not dismissible
Syntax errors shows expanded, covers all other errors, and are only dismissible when the syntax error is fixed and updated with Fast Refresh. Once the syntax error is fixed, it reveals any previously covered fatals, errors, or warnings behind it
In many ways, this makes syntax errors the highest level error.
## Visuals
Syntax errors also have their own display formatting. Stack traces for syntax errors don't make sense, so we don't show them. Instead, we show the syntax error message and a code frame for the error.
The code frame is also updated so that is doesn't wrap and is horizontally scrollable, making it easier to read.
## Detecting syntax errors
To detect syntax errors we've updated `LogBoxData.addException` to call the parse function `parseLogBoxException`. This method will perform a regex on the error message to detect:
- file name
- location
- error message
- codeframe
If this regex fails for any reason to find all four parts, we'll fall back to a fatal. Over time we'll update this regex to be more robust and handle more cases we've missed.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18278862
fbshipit-source-id: 59069aba38a27c44787e5248b2973c3a345c4a0a
2019-11-02 02:05:02 +03:00
|
|
|
import type {LogLevel} from '../Data/LogBoxLog';
|
|
|
|
|
2019-10-22 07:05:47 +03:00
|
|
|
import * as React from 'react';
|
|
|
|
import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
|
|
|
|
import StyleSheet from '../../StyleSheet/StyleSheet';
|
|
|
|
import Text from '../../Text/Text';
|
|
|
|
import View from '../../Components/View/View';
|
|
|
|
import LogBoxButton from './LogBoxButton';
|
|
|
|
import * as LogBoxStyle from './LogBoxStyle';
|
|
|
|
|
|
|
|
type Props = $ReadOnly<{|
|
|
|
|
onDismiss: () => void,
|
|
|
|
onMinimize: () => void,
|
2019-11-02 07:40:40 +03:00
|
|
|
fatalType?: ?LogLevel,
|
2019-10-22 07:05:47 +03:00
|
|
|
|}>;
|
|
|
|
|
|
|
|
function LogBoxInspectorFooter(props: Props): React.Node {
|
2019-11-02 07:40:40 +03:00
|
|
|
if (props.fatalType === 'fatal' || props.fatalType === 'syntax') {
|
2019-11-02 02:05:02 +03:00
|
|
|
return (
|
2019-11-07 17:30:02 +03:00
|
|
|
<View style={[styles.root, fatalStyles.root]}>
|
LogBox - Add syntax error handling
Summary:
This diff adds handling for syntax errors.
## Strategy
To do this we introduce a new log level type syntax, giving us these levels with semantics:
- `warn` - console warns, show collapsed, dismissible
- `error` - console errors, show collapsed, dismissible
- `fatal` - thrown exceptions, show expanded, not dismissible
- `syntax` - thrown exceptions for invalid syntax, show expanded, not dismissible
Syntax errors shows expanded, covers all other errors, and are only dismissible when the syntax error is fixed and updated with Fast Refresh. Once the syntax error is fixed, it reveals any previously covered fatals, errors, or warnings behind it
In many ways, this makes syntax errors the highest level error.
## Visuals
Syntax errors also have their own display formatting. Stack traces for syntax errors don't make sense, so we don't show them. Instead, we show the syntax error message and a code frame for the error.
The code frame is also updated so that is doesn't wrap and is horizontally scrollable, making it easier to read.
## Detecting syntax errors
To detect syntax errors we've updated `LogBoxData.addException` to call the parse function `parseLogBoxException`. This method will perform a regex on the error message to detect:
- file name
- location
- error message
- codeframe
If this regex fails for any reason to find all four parts, we'll fall back to a fatal. Over time we'll update this regex to be more robust and handle more cases we've missed.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18278862
fbshipit-source-id: 59069aba38a27c44787e5248b2973c3a345c4a0a
2019-11-02 02:05:02 +03:00
|
|
|
<LogBoxButton
|
|
|
|
backgroundColor={{
|
|
|
|
default: LogBoxStyle.getFatalColor(),
|
|
|
|
pressed: LogBoxStyle.getFatalDarkColor(),
|
|
|
|
}}
|
|
|
|
onPress={() =>
|
|
|
|
require('../../Utilities/DevSettings').reload('LogBox fatal')
|
|
|
|
}
|
|
|
|
style={fatalStyles.button}>
|
|
|
|
<View style={[fatalStyles.content]}>
|
|
|
|
<Text style={fatalStyles.label}>Reload</Text>
|
|
|
|
<Text style={fatalStyles.subtextLabel}>
|
2019-11-02 07:40:40 +03:00
|
|
|
{{fatal: 'Fatal', syntax: 'Syntax'}[props.fatalType]} errors
|
|
|
|
require a full reload
|
LogBox - Add syntax error handling
Summary:
This diff adds handling for syntax errors.
## Strategy
To do this we introduce a new log level type syntax, giving us these levels with semantics:
- `warn` - console warns, show collapsed, dismissible
- `error` - console errors, show collapsed, dismissible
- `fatal` - thrown exceptions, show expanded, not dismissible
- `syntax` - thrown exceptions for invalid syntax, show expanded, not dismissible
Syntax errors shows expanded, covers all other errors, and are only dismissible when the syntax error is fixed and updated with Fast Refresh. Once the syntax error is fixed, it reveals any previously covered fatals, errors, or warnings behind it
In many ways, this makes syntax errors the highest level error.
## Visuals
Syntax errors also have their own display formatting. Stack traces for syntax errors don't make sense, so we don't show them. Instead, we show the syntax error message and a code frame for the error.
The code frame is also updated so that is doesn't wrap and is horizontally scrollable, making it easier to read.
## Detecting syntax errors
To detect syntax errors we've updated `LogBoxData.addException` to call the parse function `parseLogBoxException`. This method will perform a regex on the error message to detect:
- file name
- location
- error message
- codeframe
If this regex fails for any reason to find all four parts, we'll fall back to a fatal. Over time we'll update this regex to be more robust and handle more cases we've missed.
Changelog: [Internal]
Reviewed By: motiz88
Differential Revision: D18278862
fbshipit-source-id: 59069aba38a27c44787e5248b2973c3a345c4a0a
2019-11-02 02:05:02 +03:00
|
|
|
</Text>
|
|
|
|
</View>
|
|
|
|
<SafeAreaView />
|
|
|
|
</LogBoxButton>
|
2019-11-02 02:05:02 +03:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-10-22 07:05:47 +03:00
|
|
|
return (
|
|
|
|
<View style={styles.root}>
|
|
|
|
<FooterButton text="Minimize" onPress={props.onMinimize} />
|
|
|
|
<FooterButton text="Dismiss" onPress={props.onDismiss} />
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
type ButtonProps = $ReadOnly<{|
|
|
|
|
onPress: () => void,
|
|
|
|
text: string,
|
|
|
|
|}>;
|
|
|
|
|
|
|
|
function FooterButton(props: ButtonProps): React.Node {
|
|
|
|
return (
|
|
|
|
<LogBoxButton
|
|
|
|
backgroundColor={{
|
|
|
|
default: 'transparent',
|
2019-11-06 21:15:44 +03:00
|
|
|
pressed: LogBoxStyle.getBackgroundDarkColor(),
|
2019-10-22 07:05:47 +03:00
|
|
|
}}
|
|
|
|
onPress={props.onPress}
|
|
|
|
style={buttonStyles.button}>
|
|
|
|
<View style={buttonStyles.content}>
|
|
|
|
<Text style={buttonStyles.label}>{props.text}</Text>
|
|
|
|
</View>
|
|
|
|
<SafeAreaView />
|
|
|
|
</LogBoxButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-11-02 02:05:02 +03:00
|
|
|
const fatalStyles = StyleSheet.create({
|
2019-11-07 17:30:02 +03:00
|
|
|
root: {
|
|
|
|
shadowColor: LogBoxStyle.getBackgroundDarkColor(1),
|
|
|
|
},
|
2019-11-02 02:05:02 +03:00
|
|
|
button: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
alignItems: 'center',
|
|
|
|
height: 60,
|
|
|
|
justifyContent: 'center',
|
|
|
|
},
|
|
|
|
subtext: {
|
|
|
|
height: 60,
|
|
|
|
},
|
|
|
|
label: {
|
|
|
|
color: LogBoxStyle.getTextColor(1),
|
|
|
|
fontSize: 14,
|
|
|
|
fontWeight: '600',
|
|
|
|
includeFontPadding: false,
|
|
|
|
lineHeight: 20,
|
|
|
|
},
|
|
|
|
subtextLabel: {
|
|
|
|
color: LogBoxStyle.getTextColor(0.8),
|
|
|
|
fontSize: 11,
|
|
|
|
includeFontPadding: false,
|
|
|
|
lineHeight: 12,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2019-10-22 07:05:47 +03:00
|
|
|
const buttonStyles = StyleSheet.create({
|
|
|
|
button: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
content: {
|
|
|
|
alignItems: 'center',
|
|
|
|
height: 48,
|
|
|
|
justifyContent: 'center',
|
|
|
|
},
|
|
|
|
label: {
|
|
|
|
color: LogBoxStyle.getTextColor(1),
|
|
|
|
fontSize: 14,
|
|
|
|
includeFontPadding: false,
|
2019-11-02 02:05:02 +03:00
|
|
|
lineHeight: 20,
|
2019-10-22 07:05:47 +03:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
root: {
|
|
|
|
backgroundColor: LogBoxStyle.getBackgroundColor(1),
|
|
|
|
shadowColor: '#000',
|
|
|
|
shadowOffset: {width: 0, height: -2},
|
|
|
|
shadowRadius: 2,
|
|
|
|
shadowOpacity: 0.5,
|
|
|
|
elevation: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export default LogBoxInspectorFooter;
|