react-native-macos/Libraries/LogBox/Data/LogBoxSymbolication.js

65 строки
1.7 KiB
JavaScript
Исходник Обычный вид История

Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
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.
*
* @flow strict-local
* @format
*/
'use strict';
import symbolicateStackTrace from '../../Core/Devtools/symbolicateStackTrace';
import type {StackFrame} from '../../Core/NativeExceptionsManager';
import type {SymbolicatedStackTrace} from '../../Core/Devtools/symbolicateStackTrace';
Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
2019-10-22 07:05:47 +03:00
export type Stack = Array<StackFrame>;
const cache: Map<Stack, Promise<SymbolicatedStackTrace>> = new Map();
Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
2019-10-22 07:05:47 +03:00
/**
* Sanitize because sometimes, `symbolicateStackTrace` gives us invalid values.
*/
const sanitize = ({
stack: maybeStack,
codeFrame,
}: SymbolicatedStackTrace): SymbolicatedStackTrace => {
Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
2019-10-22 07:05:47 +03:00
if (!Array.isArray(maybeStack)) {
throw new Error('Expected stack to be an array.');
}
const stack = [];
for (const maybeFrame of maybeStack) {
let collapse = false;
if ('collapse' in maybeFrame) {
if (typeof maybeFrame.collapse !== 'boolean') {
throw new Error('Expected stack frame `collapse` to be a boolean.');
}
collapse = maybeFrame.collapse;
}
stack.push({
column: maybeFrame.column,
file: maybeFrame.file,
lineNumber: maybeFrame.lineNumber,
methodName: maybeFrame.methodName,
collapse,
});
}
return {stack, codeFrame};
Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
2019-10-22 07:05:47 +03:00
};
export function deleteStack(stack: Stack): void {
cache.delete(stack);
}
export function symbolicate(stack: Stack): Promise<SymbolicatedStackTrace> {
Add LogBox for warnings Summary: # Overview This diff adds the initial LogBox redesign implementing only Warnings for now. The following diffs include the tests for this, as well as a way to enable an experimental flag to opt-in. Changelog: [Internal] ## Changes To init LogBox, we've taken the core of YellowBox and rewritten it entirely. Differences from Yellowbox include: - Data model re-written - More performant - Allows a future listing of logs in order - Allows a future toggle to show ignored logs - Moves category into a property - Groups by the same sequential message (as chrome does) instead of by category - Does not store dupes of the same messages, only a count - UI revamp - Color and design refresh - Does not spam UI with logs - Only shows the most recent log - Dismiss all button is always in one place - Allows navigating through all of the warnings in the list, not just ones in the same category - Collapses message to 5 lines (tap to expand) - Collapses unrelated stack frames (tap to expand) - Moves React stack to it's own section - Formats React Stack like a stack frame - Collapses any React frames over 3 deep (tap to expand) - Adds a "Meta" information (to be expanded on later) - De-emphasizes the source map indicator - Better Engineering - Rewrote almost all components to hooks (will follow up with the rest) - Added more tests for Data files - Added testes for UI components (previously there were none) - Refactored some imperative render code to declarative ## Known Problems - The first major problem is that in the collapsed state (which is meant to model the FBLogger on Comet) does not show the user how many logs are in the console (only the count of the current log). - The way we're doing symbolication and navigation is slow. We will follow up with perf improvements - The React Stack logic is too simple and missed cases - We need to get properly scaled images for the close button ## What's next Next up we'll be: - Move over Moti's improvements to filtering and YellowBox changes since I started this - Adding in Errors, and not using the native redbox when LogBox is available - Adding in a list of all errors and a way to navigate to it - Adding in Logs, so users can see console.log in the app - Make React stack frames clickable - And many more Reviewed By: cpojer Differential Revision: D17965726 fbshipit-source-id: 2f28584ecb7e3ca8d3df034ea1e1a4a50e018c02
2019-10-22 07:05:47 +03:00
let promise = cache.get(stack);
if (promise == null) {
promise = symbolicateStackTrace(stack).then(sanitize);
cache.set(stack, promise);
}
return promise;
}