{"commit":{"revision":"1c73ceed5f6248679d04c5e637290cfc6d3b5264","authorEmail":"bvaughn@fb.com","authoredAt":"2021-09-24T12:56:27-04:00","subject":"Scheduling Profiler marks should include thrown Errors (#22419)","shortRevision":"1c73ceed5f","authorName":"Brian Vaughn"},"body":"","files":[{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js"},{"status":"A","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/ThrownErrorsView.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js"},{"status":"M","path":"packages\/react-devtools-scheduling-profiler\/src\/types.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/constants.js"}],"parents":["af87f5a83d49bde495eb7fe760b2052ba8a76caf"],"patch":"diff --git a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\nindex 710d9cf03e..48efcf8105 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/CanvasPage.js\n@@ -49,6 +49,7 @@ import {\n SchedulingEventsView,\n SnapshotsView,\n SuspenseEventsView,\n+ ThrownErrorsView,\n TimeAxisMarkersView,\n UserTimingMarksView,\n } from '.\/content-views';\n@@ -138,6 +139,7 @@ const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {\n schedulingEvent: null,\n snapshot: null,\n suspenseEvent: null,\n+ thrownError: null,\n userTimingMark: null,\n };\n \n@@ -178,6 +180,7 @@ function AutoSizedCanvas({\n const flamechartViewRef = useRef(null);\n const networkMeasuresViewRef = useRef(null);\n const snapshotsViewRef = useRef(null);\n+ const thrownErrorsViewRef = useRef(null);\n \n const {hideMenu: hideContextMenu} = useContext(RegistryContext);\n \n@@ -271,6 +274,20 @@ function AutoSizedCanvas({\n true,\n );\n \n+ let thrownErrorsViewWrapper = null;\n+ if (data.thrownErrors.length > 0) {\n+ const thrownErrorsView = new ThrownErrorsView(\n+ surface,\n+ defaultFrame,\n+ data,\n+ );\n+ thrownErrorsViewRef.current = thrownErrorsView;\n+ thrownErrorsViewWrapper = createViewHelper(\n+ thrownErrorsView,\n+ 'thrown errors',\n+ );\n+ }\n+\n const schedulingEventsView = new SchedulingEventsView(\n surface,\n defaultFrame,\n@@ -382,6 +399,9 @@ function AutoSizedCanvas({\n }\n rootView.addSubview(nativeEventsViewWrapper);\n rootView.addSubview(schedulingEventsViewWrapper);\n+ if (thrownErrorsViewWrapper !== null) {\n+ rootView.addSubview(thrownErrorsViewWrapper);\n+ }\n if (suspenseEventsViewWrapper !== null) {\n rootView.addSubview(suspenseEventsViewWrapper);\n }\n@@ -461,14 +481,7 @@ function AutoSizedCanvas({\n userTimingMarksView.onHover = userTimingMark => {\n if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n+ ...EMPTY_CONTEXT_INFO,\n userTimingMark,\n });\n }\n@@ -480,15 +493,8 @@ function AutoSizedCanvas({\n nativeEventsView.onHover = nativeEvent => {\n if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n+ ...EMPTY_CONTEXT_INFO,\n nativeEvent,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n };\n@@ -499,15 +505,8 @@ function AutoSizedCanvas({\n schedulingEventsView.onHover = schedulingEvent => {\n if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n+ ...EMPTY_CONTEXT_INFO,\n schedulingEvent,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n };\n@@ -518,15 +517,8 @@ function AutoSizedCanvas({\n suspenseEventsView.onHover = suspenseEvent => {\n if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n+ ...EMPTY_CONTEXT_INFO,\n suspenseEvent,\n- userTimingMark: null,\n });\n }\n };\n@@ -537,15 +529,8 @@ function AutoSizedCanvas({\n reactMeasuresView.onHover = measure => {\n if (!hoveredEvent || hoveredEvent.measure !== measure) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n+ ...EMPTY_CONTEXT_INFO,\n measure,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n };\n@@ -559,15 +544,8 @@ function AutoSizedCanvas({\n hoveredEvent.componentMeasure !== componentMeasure\n ) {\n setHoveredEvent({\n+ ...EMPTY_CONTEXT_INFO,\n componentMeasure,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n };\n@@ -578,15 +556,8 @@ function AutoSizedCanvas({\n snapshotsView.onHover = snapshot => {\n if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n+ ...EMPTY_CONTEXT_INFO,\n snapshot,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n };\n@@ -600,15 +571,8 @@ function AutoSizedCanvas({\n hoveredEvent.flamechartStackFrame !== flamechartStackFrame\n ) {\n setHoveredEvent({\n- componentMeasure: null,\n+ ...EMPTY_CONTEXT_INFO,\n flamechartStackFrame,\n- measure: null,\n- nativeEvent: null,\n- networkMeasure: null,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n });\n }\n });\n@@ -619,15 +583,20 @@ function AutoSizedCanvas({\n networkMeasuresView.onHover = networkMeasure => {\n if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {\n setHoveredEvent({\n- componentMeasure: null,\n- flamechartStackFrame: null,\n- measure: null,\n- nativeEvent: null,\n+ ...EMPTY_CONTEXT_INFO,\n networkMeasure,\n- schedulingEvent: null,\n- snapshot: null,\n- suspenseEvent: null,\n- userTimingMark: null,\n+ });\n+ }\n+ };\n+ }\n+\n+ const {current: thrownErrorsView} = thrownErrorsViewRef;\n+ if (thrownErrorsView) {\n+ thrownErrorsView.onHover = thrownError => {\n+ if (!hoveredEvent || hoveredEvent.thrownError !== thrownError) {\n+ setHoveredEvent({\n+ ...EMPTY_CONTEXT_INFO,\n+ thrownError,\n });\n }\n };\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\nindex 5a8cf625f9..353cf7fc00 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/EventTooltip.js\n@@ -19,6 +19,7 @@ import type {\n SchedulingEvent,\n Snapshot,\n SuspenseEvent,\n+ ThrownError,\n UserTimingMark,\n } from '.\/types';\n \n@@ -92,6 +93,7 @@ export default function EventTooltip({\n schedulingEvent,\n snapshot,\n suspenseEvent,\n+ thrownError,\n userTimingMark,\n } = hoveredEvent;\n \n@@ -118,6 +120,8 @@ export default function EventTooltip({\n content = ;\n } else if (userTimingMark !== null) {\n content = ;\n+ } else if (thrownError !== null) {\n+ content = ;\n }\n \n if (content !== null) {\n@@ -436,3 +440,29 @@ const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {\n <\/div>\n );\n };\n+\n+const TooltipThrownError = ({thrownError}: {|thrownError: ThrownError|}) => {\n+ const {componentName, message, phase, timestamp} = thrownError;\n+ const label = `threw an error during ${phase}`;\n+ return (\n+

\n+ {componentName && (\n+ \n+ {trimString(componentName, 100)}\n+ <\/span>\n+ )}\n+ {label}<\/span>\n+

\n+

Timestamp:<\/div>\n+

{formatTimestamp(timestamp)}<\/div>\n+ {message !== '' && (\n+ <>\n+

Error:<\/div>\n+

{message}<\/div>\n+ <\/>\n+ )}\n+ <\/div>\n+ <\/div>\n+ );\n+};\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\nindex 7009356b4c..87a377be1a 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ReactMeasuresView.js\n@@ -136,15 +136,23 @@ export class ReactMeasuresView extends View {\n \/\/ Commit phase rects are overlapped by layout and passive rects,\n \/\/ and it looks bad if text flows underneath\/behind these overlayed rects.\n if (nextMeasure != null) {\n- textRect = {\n- ...measureRect,\n- size: {\n- width:\n- timestampToPosition(nextMeasure.timestamp, scaleFactor, frame) -\n- x,\n- height: REACT_MEASURE_HEIGHT,\n- },\n- };\n+ \/\/ This clipping shouldn't apply for measures that don't overlap though,\n+ \/\/ like passive effects that are processed after a delay,\n+ \/\/ or if there are now layout or passive effects and the next measure is render or idle.\n+ if (nextMeasure.timestamp < measure.timestamp + measure.duration) {\n+ textRect = {\n+ ...measureRect,\n+ size: {\n+ width:\n+ timestampToPosition(\n+ nextMeasure.timestamp,\n+ scaleFactor,\n+ frame,\n+ ) - x,\n+ height: REACT_MEASURE_HEIGHT,\n+ },\n+ };\n+ }\n }\n break;\n case 'render-idle':\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\nindex 37ff0832e0..39921a7273 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SchedulingEventsView.js\n@@ -195,7 +195,7 @@ export class SchedulingEventsView extends View {\n };\n if (rectIntersectsRect(borderFrame, visibleArea)) {\n const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);\n- context.fillStyle = COLORS.PRIORITY_BORDER;\n+ context.fillStyle = COLORS.REACT_WORK_BORDER;\n context.fillRect(\n borderDrawableRect.origin.x,\n borderDrawableRect.origin.y,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\nindex b7237079c5..b6fa643f60 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/SuspenseEventsView.js\n@@ -272,7 +272,7 @@ export class SuspenseEventsView extends View {\n borderFrame,\n visibleArea,\n );\n- context.fillStyle = COLORS.PRIORITY_BORDER;\n+ context.fillStyle = COLORS.REACT_WORK_BORDER;\n context.fillRect(\n borderDrawableRect.origin.x,\n borderDrawableRect.origin.y,\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ThrownErrorsView.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ThrownErrorsView.js\nnew file mode 100644\nindex 0000000000..e1d084ee40\n--- \/dev\/null\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/ThrownErrorsView.js\n@@ -0,0 +1,241 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {ThrownError, ReactProfilerData} from '..\/types';\n+import type {\n+ Interaction,\n+ MouseMoveInteraction,\n+ Rect,\n+ Size,\n+ ViewRefs,\n+} from '..\/view-base';\n+\n+import {\n+ positioningScaleFactor,\n+ timestampToPosition,\n+ positionToTimestamp,\n+ widthToDuration,\n+} from '.\/utils\/positioning';\n+import {\n+ View,\n+ Surface,\n+ rectContainsPoint,\n+ rectIntersectsRect,\n+ intersectionOfRects,\n+} from '..\/view-base';\n+import {\n+ COLORS,\n+ TOP_ROW_PADDING,\n+ REACT_EVENT_DIAMETER,\n+ BORDER_SIZE,\n+} from '.\/constants';\n+\n+const EVENT_ROW_HEIGHT_FIXED =\n+ TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;\n+\n+export class ThrownErrorsView extends View {\n+ _profilerData: ReactProfilerData;\n+ _intrinsicSize: Size;\n+ _hoveredEvent: ThrownError | null = null;\n+ onHover: ((event: ThrownError | null) => void) | null = null;\n+\n+ constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {\n+ super(surface, frame);\n+ this._profilerData = profilerData;\n+\n+ this._intrinsicSize = {\n+ width: this._profilerData.duration,\n+ height: EVENT_ROW_HEIGHT_FIXED,\n+ };\n+ }\n+\n+ desiredSize() {\n+ return this._intrinsicSize;\n+ }\n+\n+ setHoveredEvent(hoveredEvent: ThrownError | null) {\n+ if (this._hoveredEvent === hoveredEvent) {\n+ return;\n+ }\n+ this._hoveredEvent = hoveredEvent;\n+ this.setNeedsDisplay();\n+ }\n+\n+ \/**\n+ * Draw a single `ThrownError` as a circle in the canvas.\n+ *\/\n+ _drawSingleThrownError(\n+ context: CanvasRenderingContext2D,\n+ rect: Rect,\n+ thrownError: ThrownError,\n+ baseY: number,\n+ scaleFactor: number,\n+ showHoverHighlight: boolean,\n+ ) {\n+ const {frame} = this;\n+ const {timestamp} = thrownError;\n+\n+ const x = timestampToPosition(timestamp, scaleFactor, frame);\n+ const radius = REACT_EVENT_DIAMETER \/ 2;\n+ const eventRect: Rect = {\n+ origin: {\n+ x: x - radius,\n+ y: baseY,\n+ },\n+ size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},\n+ };\n+ if (!rectIntersectsRect(eventRect, rect)) {\n+ return; \/\/ Not in view\n+ }\n+\n+ const fillStyle = showHoverHighlight\n+ ? COLORS.REACT_THROWN_ERROR_HOVER\n+ : COLORS.REACT_THROWN_ERROR;\n+\n+ const y = eventRect.origin.y + radius;\n+\n+ context.beginPath();\n+ context.fillStyle = fillStyle;\n+ context.arc(x, y, radius, 0, 2 * Math.PI);\n+ context.fill();\n+ }\n+\n+ draw(context: CanvasRenderingContext2D) {\n+ const {\n+ frame,\n+ _profilerData: {thrownErrors},\n+ _hoveredEvent,\n+ visibleArea,\n+ } = this;\n+\n+ context.fillStyle = COLORS.BACKGROUND;\n+ context.fillRect(\n+ visibleArea.origin.x,\n+ visibleArea.origin.y,\n+ visibleArea.size.width,\n+ visibleArea.size.height,\n+ );\n+\n+ \/\/ Draw events\n+ const baseY = frame.origin.y + TOP_ROW_PADDING;\n+ const scaleFactor = positioningScaleFactor(\n+ this._intrinsicSize.width,\n+ frame,\n+ );\n+\n+ const highlightedEvents: ThrownError[] = [];\n+\n+ thrownErrors.forEach(thrownError => {\n+ if (thrownError === _hoveredEvent) {\n+ highlightedEvents.push(thrownError);\n+ return;\n+ }\n+ this._drawSingleThrownError(\n+ context,\n+ visibleArea,\n+ thrownError,\n+ baseY,\n+ scaleFactor,\n+ false,\n+ );\n+ });\n+\n+ \/\/ Draw the highlighted items on top so they stand out.\n+ \/\/ This is helpful if there are multiple (overlapping) items close to each other.\n+ highlightedEvents.forEach(thrownError => {\n+ this._drawSingleThrownError(\n+ context,\n+ visibleArea,\n+ thrownError,\n+ baseY,\n+ scaleFactor,\n+ true,\n+ );\n+ });\n+\n+ \/\/ Render bottom borders.\n+ \/\/ Propose border rect, check if intersects with `rect`, draw intersection.\n+ const borderFrame: Rect = {\n+ origin: {\n+ x: frame.origin.x,\n+ y: frame.origin.y + EVENT_ROW_HEIGHT_FIXED - BORDER_SIZE,\n+ },\n+ size: {\n+ width: frame.size.width,\n+ height: BORDER_SIZE,\n+ },\n+ };\n+ if (rectIntersectsRect(borderFrame, visibleArea)) {\n+ const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);\n+ context.fillStyle = COLORS.REACT_WORK_BORDER;\n+ context.fillRect(\n+ borderDrawableRect.origin.x,\n+ borderDrawableRect.origin.y,\n+ borderDrawableRect.size.width,\n+ borderDrawableRect.size.height,\n+ );\n+ }\n+ }\n+\n+ \/**\n+ * @private\n+ *\/\n+ _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {\n+ const {frame, onHover, visibleArea} = this;\n+ if (!onHover) {\n+ return;\n+ }\n+\n+ const {location} = interaction.payload;\n+ if (!rectContainsPoint(location, visibleArea)) {\n+ onHover(null);\n+ return;\n+ }\n+\n+ const {\n+ _profilerData: {thrownErrors},\n+ } = this;\n+ const scaleFactor = positioningScaleFactor(\n+ this._intrinsicSize.width,\n+ frame,\n+ );\n+ const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);\n+ const eventTimestampAllowance = widthToDuration(\n+ REACT_EVENT_DIAMETER \/ 2,\n+ scaleFactor,\n+ );\n+\n+ \/\/ Because data ranges may overlap, we want to find the last intersecting item.\n+ \/\/ This will always be the one on \"top\" (the one the user is hovering over).\n+ for (let index = thrownErrors.length - 1; index >= 0; index--) {\n+ const event = thrownErrors[index];\n+ const {timestamp} = event;\n+\n+ if (\n+ timestamp - eventTimestampAllowance <= hoverTimestamp &&\n+ hoverTimestamp <= timestamp + eventTimestampAllowance\n+ ) {\n+ this.currentCursor = 'context-menu';\n+ viewRefs.hoveredView = this;\n+ onHover(event);\n+ return;\n+ }\n+ }\n+\n+ onHover(null);\n+ }\n+\n+ handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {\n+ switch (interaction.type) {\n+ case 'mousemove':\n+ this._handleMouseMove(interaction, viewRefs);\n+ break;\n+ }\n+ }\n+}\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\nindex 48ba22aed3..a715945f77 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/constants.js\n@@ -84,6 +84,8 @@ export let COLORS = {\n REACT_SUSPENSE_RESOLVED_EVENT_HOVER: '',\n REACT_SUSPENSE_UNRESOLVED_EVENT: '',\n REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: '',\n+ REACT_THROWN_ERROR: '',\n+ REACT_THROWN_ERROR_HOVER: '',\n REACT_WORK_BORDER: '',\n SCROLL_CARET: '',\n TEXT_COLOR: '',\n@@ -218,6 +220,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {\n REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-react-suspense-unresolved-hover',\n ),\n+ REACT_THROWN_ERROR: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-thrown-error',\n+ ),\n+ REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(\n+ '--color-scheduling-profiler-thrown-error-hover',\n+ ),\n REACT_WORK_BORDER: computedStyle.getPropertyValue(\n '--color-scheduling-profiler-react-work-border',\n ),\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\nindex 21c8cb570b..5cf1e543b5 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/content-views\/index.js\n@@ -15,5 +15,6 @@ export * from '.\/ReactMeasuresView';\n export * from '.\/SchedulingEventsView';\n export * from '.\/SnapshotsView';\n export * from '.\/SuspenseEventsView';\n+export * from '.\/ThrownErrorsView';\n export * from '.\/TimeAxisMarkersView';\n export * from '.\/UserTimingMarksView';\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\nindex 3ea5051bcf..11af34c968 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/__tests__\/preprocessData-test.internal.js\n@@ -354,6 +354,7 @@ describe('preprocessData', () => {\n \"snapshots\": Array [],\n \"startTime\": 1,\n \"suspenseEvents\": Array [],\n+ \"thrownErrors\": Array [],\n }\n `);\n }\n@@ -570,6 +571,7 @@ describe('preprocessData', () => {\n \"snapshots\": Array [],\n \"startTime\": 1,\n \"suspenseEvents\": Array [],\n+ \"thrownErrors\": Array [],\n }\n `);\n }\n@@ -761,6 +763,7 @@ describe('preprocessData', () => {\n \"snapshots\": Array [],\n \"startTime\": 4,\n \"suspenseEvents\": Array [],\n+ \"thrownErrors\": Array [],\n }\n `);\n }\n@@ -1107,6 +1110,7 @@ describe('preprocessData', () => {\n \"snapshots\": Array [],\n \"startTime\": 4,\n \"suspenseEvents\": Array [],\n+ \"thrownErrors\": Array [],\n }\n `);\n }\n@@ -1537,6 +1541,52 @@ describe('preprocessData', () => {\n });\n });\n \n+ describe('errors thrown while rendering', () => {\n+ it('shoult parse Errors thrown during render', async () => {\n+ spyOnDev(console, 'error');\n+ spyOnProd(console, 'error');\n+\n+ class ErrorBoundary extends React.Component {\n+ state = {error: null};\n+ componentDidCatch(error) {\n+ this.setState({error});\n+ }\n+ render() {\n+ if (this.state.error) {\n+ return null;\n+ }\n+ return this.props.children;\n+ }\n+ }\n+\n+ function ExampleThatThrows() {\n+ throw Error('Expected error');\n+ }\n+\n+ if (gate(flags => flags.enableSchedulingProfiler)) {\n+ const testMarks = [creactCpuProfilerSample()];\n+\n+ \/\/ Mount and commit the app\n+ const root = ReactDOM.createRoot(document.createElement('div'));\n+ act(() =>\n+ root.render(\n+ \n+ \n+ <\/ErrorBoundary>,\n+ ),\n+ );\n+\n+ testMarks.push(...createUserTimingData(clearedMarks));\n+\n+ const data = await preprocessData(testMarks);\n+ expect(data.thrownErrors).toHaveLength(2);\n+ expect(data.thrownErrors[0].message).toMatchInlineSnapshot(\n+ '\"Expected error\"',\n+ );\n+ }\n+ });\n+ });\n+\n describe('suspend during an update', () => {\n \/\/ This also tests an edge case where the a component suspends while profiling\n \/\/ before the first commit is logged (so the lane-to-labels map will not yet exist).\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\nindex 5b1ec5636f..02ba5c31c8 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/import-worker\/preprocessData.js\n@@ -550,6 +550,16 @@ function processTimelineEvent(\n }\n \n currentProfilerData.schedulingEvents.push(stateUpdateEvent);\n+ } else if (name.startsWith('--error-')) {\n+ const [componentName, phase, message] = name.substr(8).split('-');\n+\n+ currentProfilerData.thrownErrors.push({\n+ componentName,\n+ message,\n+ phase: ((phase: any): Phase),\n+ timestamp: startTime,\n+ type: 'thrown-error',\n+ });\n } \/\/ eslint-disable-line brace-style\n \n \/\/ React Events - suspense\n@@ -865,6 +875,7 @@ export default async function preprocessData(\n snapshots: [],\n startTime: 0,\n suspenseEvents: [],\n+ thrownErrors: [],\n };\n \n \/\/ Sort `timeline`. JSON Array Format trace events need not be ordered. See:\ndiff --git a\/packages\/react-devtools-scheduling-profiler\/src\/types.js b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\nindex 073f4e1fbf..ff68f3435e 100644\n--- a\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n+++ b\/packages\/react-devtools-scheduling-profiler\/src\/types.js\n@@ -65,6 +65,14 @@ export type SuspenseEvent = {|\n +type: 'suspense',\n |};\n \n+export type ThrownError = {|\n+ +componentName?: string,\n+ +message: string,\n+ +phase: Phase,\n+ +timestamp: Milliseconds,\n+ +type: 'thrown-error',\n+|};\n+\n export type SchedulingEvent =\n | ReactScheduleRenderEvent\n | ReactScheduleStateUpdateEvent\n@@ -175,6 +183,7 @@ export type ReactProfilerData = {|\n snapshots: Snapshot[],\n startTime: number,\n suspenseEvents: SuspenseEvent[],\n+ thrownErrors: ThrownError[],\n |};\n \n export type ReactHoverContextInfo = {|\n@@ -186,5 +195,6 @@ export type ReactHoverContextInfo = {|\n schedulingEvent: SchedulingEvent | null,\n suspenseEvent: SuspenseEvent | null,\n snapshot: Snapshot | null,\n+ thrownError: ThrownError | null,\n userTimingMark: UserTimingMark | null,\n |};\ndiff --git a\/packages\/react-devtools-shared\/src\/constants.js b\/packages\/react-devtools-shared\/src\/constants.js\nindex 29d805890d..60ce987e26 100644\n--- a\/packages\/react-devtools-shared\/src\/constants.js\n+++ b\/packages\/react-devtools-shared\/src\/constants.js\n@@ -177,9 +177,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',\n '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n+ '--color-scheduling-profiler-thrown-error': '#ee1638',\n+ '--color-scheduling-profiler-thrown-error-hover': '#da1030',\n '--color-scheduling-profiler-text-color': '#000000',\n '--color-scheduling-profiler-text-dim-color': '#ccc',\n- '--color-scheduling-profiler-react-work-border': '#ffffff',\n+ '--color-scheduling-profiler-react-work-border': '#eeeeee',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\n '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',\n@@ -316,9 +318,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {\n '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',\n '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',\n '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',\n+ '--color-scheduling-profiler-thrown-error': '#fb3655',\n+ '--color-scheduling-profiler-thrown-error-hover': '#f82042',\n '--color-scheduling-profiler-text-color': '#282c34',\n '--color-scheduling-profiler-text-dim-color': '#555b66',\n- '--color-scheduling-profiler-react-work-border': '#ffffff',\n+ '--color-scheduling-profiler-react-work-border': '#3d424a',\n '--color-search-match': 'yellow',\n '--color-search-match-current': '#f7923b',\n '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',\n"}

dillon1000/react

Files changed