mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Rick Hanlon
0825c2b2e7
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
120 lines
2.8 KiB
JavaScript
120 lines
2.8 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.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import * as LogBoxSymbolication from './LogBoxSymbolication';
|
|
|
|
import type {
|
|
Category,
|
|
Message,
|
|
ComponentStack,
|
|
CodeFrame,
|
|
} from './parseLogBoxLog';
|
|
import type {Stack} from './LogBoxSymbolication';
|
|
|
|
export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
|
|
|
|
export type SymbolicationRequest = $ReadOnly<{|
|
|
abort: () => void,
|
|
|}>;
|
|
|
|
class LogBoxLog {
|
|
message: Message;
|
|
category: Category;
|
|
componentStack: ComponentStack;
|
|
stack: Stack;
|
|
count: number;
|
|
level: LogLevel;
|
|
codeFrame: ?CodeFrame;
|
|
symbolicated:
|
|
| $ReadOnly<{|error: null, stack: null, status: 'NONE'|}>
|
|
| $ReadOnly<{|error: null, stack: null, status: 'PENDING'|}>
|
|
| $ReadOnly<{|error: null, stack: Stack, status: 'COMPLETE'|}>
|
|
| $ReadOnly<{|error: Error, stack: null, status: 'FAILED'|}> = {
|
|
error: null,
|
|
stack: null,
|
|
status: 'NONE',
|
|
};
|
|
|
|
constructor(
|
|
level: LogLevel,
|
|
message: Message,
|
|
stack: Stack,
|
|
category: string,
|
|
componentStack: ComponentStack,
|
|
codeFrame?: ?CodeFrame,
|
|
) {
|
|
this.level = level;
|
|
this.message = message;
|
|
this.stack = stack;
|
|
this.category = category;
|
|
this.componentStack = componentStack;
|
|
this.codeFrame = codeFrame;
|
|
this.count = 1;
|
|
}
|
|
|
|
incrementCount(): void {
|
|
this.count += 1;
|
|
}
|
|
|
|
getAvailableStack(): Stack {
|
|
return this.symbolicated.status === 'COMPLETE'
|
|
? this.symbolicated.stack
|
|
: this.stack;
|
|
}
|
|
|
|
retrySymbolicate(callback?: () => void): SymbolicationRequest {
|
|
if (this.symbolicated.status !== 'COMPLETE') {
|
|
LogBoxSymbolication.deleteStack(this.stack);
|
|
}
|
|
return this.symbolicate(callback);
|
|
}
|
|
|
|
symbolicate(callback?: () => void): SymbolicationRequest {
|
|
let aborted = false;
|
|
|
|
if (this.symbolicated.status !== 'COMPLETE') {
|
|
const updateStatus = (error: ?Error, stack: ?Stack): void => {
|
|
if (error != null) {
|
|
this.symbolicated = {error, stack: null, status: 'FAILED'};
|
|
} else if (stack != null) {
|
|
this.symbolicated = {error: null, stack, status: 'COMPLETE'};
|
|
} else {
|
|
this.symbolicated = {error: null, stack: null, status: 'PENDING'};
|
|
}
|
|
if (!aborted) {
|
|
if (callback != null) {
|
|
callback();
|
|
}
|
|
}
|
|
};
|
|
|
|
updateStatus(null, null);
|
|
LogBoxSymbolication.symbolicate(this.stack).then(
|
|
stack => {
|
|
updateStatus(null, stack);
|
|
},
|
|
error => {
|
|
updateStatus(error, null);
|
|
},
|
|
);
|
|
}
|
|
|
|
return {
|
|
abort(): void {
|
|
aborted = true;
|
|
},
|
|
};
|
|
}
|
|
}
|
|
|
|
export default LogBoxLog;
|