@samitouri / QOS-React-2 / commits / 1723c5d316

Changed "Unknown" fallback displayName to "Anonymous". Added memo/forwardRef labels to Profiler charts.

Brian Vaughn committed May 13, 2019 at 15:26 UTC 1723c5d3169e166b6426177ab0a05b7ae605d6bb
12 files changed +93 -27
src/__tests__/__snapshots__/profiling-test.js.snap
+5
@@ -1044,6 +1044,7 @@ Object {
1044 "displayName": null,
1045 "id": 1,
1046 "key": null,
1047 + "type": 11,
1048 },
1049 2 => Object {
1050 "children": Array [
@@ -1054,24 +1055,28 @@ Object {
1055 "displayName": "Parent",
1056 "id": 2,
1057 "key": null,
1058 + "type": 5,
1059 },
1060 3 => Object {
1061 "children": Array [],
1062 "displayName": "Child",
1063 "id": 3,
1064 "key": "0",
1065 + "type": 5,
1066 },
1067 4 => Object {
1068 "children": Array [],
1069 "displayName": "Child",
1070 "id": 4,
1071 "key": "1",
1072 + "type": 5,
1073 },
1074 5 => Object {
1075 "children": Array [],
1076 "displayName": "Child",
1077 "id": 5,
1078 "key": null,
1079 + "type": 8,
1080 },
1081 },
1082 },
src/__tests__/__snapshots__/profilingCharts-test.js.snap
+29 -9
@@ -12,6 +12,7 @@ Object {
12 "key": null,
13 "parentID": 0,
14 "treeBaseDuration": 15,
15 + "type": 11,
16 },
17 2 => Object {
18 "children": Array [
@@ -24,6 +25,7 @@ Object {
25 "key": null,
26 "parentID": 1,
27 "treeBaseDuration": 15,
28 + "type": 5,
29 },
30 3 => Object {
31 "children": Array [],
@@ -32,6 +34,7 @@ Object {
34 "key": "first",
35 "parentID": 2,
36 "treeBaseDuration": 3,
37 + "type": 8,
38 },
39 4 => Object {
40 "children": Array [],
@@ -40,6 +43,7 @@ Object {
43 "key": "second",
44 "parentID": 2,
45 "treeBaseDuration": 2,
46 + "type": 8,
47 },
48 5 => Object {
49 "children": Array [],
@@ -48,6 +52,7 @@ Object {
52 "key": "third",
53 "parentID": 2,
54 "treeBaseDuration": 0,
55 + "type": 8,
56 },
57 },
58 "rootID": 1,
@@ -83,7 +88,7 @@ Object {
88 "actualDuration": 0,
89 "didRender": true,
90 "id": 5,
86 - "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
91 + "label": "Child (Memo) key=\\"third\\" (<0.1ms of <0.1ms)",
92 "name": "Child",
93 "offset": 15,
94 "selfDuration": 0,
@@ -93,7 +98,7 @@ Object {
98 "actualDuration": 2,
99 "didRender": true,
100 "id": 4,
96 - "label": "Child key=\\"second\\" (2ms of 2ms)",
101 + "label": "Child (Memo) key=\\"second\\" (2ms of 2ms)",
102 "name": "Child",
103 "offset": 13,
104 "selfDuration": 2,
@@ -103,7 +108,7 @@ Object {
108 "actualDuration": 3,
109 "didRender": true,
110 "id": 3,
106 - "label": "Child key=\\"first\\" (3ms of 3ms)",
111 + "label": "Child (Memo) key=\\"first\\" (3ms of 3ms)",
112 "name": "Child",
113 "offset": 10,
114 "selfDuration": 3,
@@ -126,6 +131,7 @@ Object {
131 "key": null,
132 "parentID": 0,
133 "treeBaseDuration": 15,
134 + "type": 11,
135 },
136 2 => Object {
137 "children": Array [
@@ -138,6 +144,7 @@ Object {
144 "key": null,
145 "parentID": 1,
146 "treeBaseDuration": 15,
147 + "type": 5,
148 },
149 3 => Object {
150 "children": Array [],
@@ -146,6 +153,7 @@ Object {
153 "key": "first",
154 "parentID": 2,
155 "treeBaseDuration": 3,
156 + "type": 8,
157 },
158 4 => Object {
159 "children": Array [],
@@ -154,6 +162,7 @@ Object {
162 "key": "second",
163 "parentID": 2,
164 "treeBaseDuration": 2,
165 + "type": 8,
166 },
167 5 => Object {
168 "children": Array [],
@@ -162,6 +171,7 @@ Object {
171 "key": "third",
172 "parentID": 2,
173 "treeBaseDuration": 0,
174 + "type": 8,
175 },
176 },
177 "rootID": 1,
@@ -197,7 +207,7 @@ Object {
207 "actualDuration": 0,
208 "didRender": false,
209 "id": 5,
200 - "label": "Child key=\\"third\\"",
210 + "label": "Child (Memo) key=\\"third\\"",
211 "name": "Child",
212 "offset": 15,
213 "selfDuration": 0,
@@ -207,7 +217,7 @@ Object {
217 "actualDuration": 0,
218 "didRender": false,
219 "id": 4,
210 - "label": "Child key=\\"second\\"",
220 + "label": "Child (Memo) key=\\"second\\"",
221 "name": "Child",
222 "offset": 13,
223 "selfDuration": 0,
@@ -217,7 +227,7 @@ Object {
227 "actualDuration": 0,
228 "didRender": false,
229 "id": 3,
220 - "label": "Child key=\\"first\\"",
230 + "label": "Child (Memo) key=\\"first\\"",
231 "name": "Child",
232 "offset": 10,
233 "selfDuration": 0,
@@ -254,6 +264,7 @@ Object {
264 "key": null,
265 "parentID": 0,
266 "treeBaseDuration": 15,
267 + "type": 11,
268 },
269 2 => Object {
270 "children": Array [
@@ -266,6 +277,7 @@ Object {
277 "key": null,
278 "parentID": 1,
279 "treeBaseDuration": 15,
280 + "type": 5,
281 },
282 3 => Object {
283 "children": Array [],
@@ -274,6 +286,7 @@ Object {
286 "key": "first",
287 "parentID": 2,
288 "treeBaseDuration": 3,
289 + "type": 8,
290 },
291 4 => Object {
292 "children": Array [],
@@ -282,6 +295,7 @@ Object {
295 "key": "second",
296 "parentID": 2,
297 "treeBaseDuration": 2,
298 + "type": 8,
299 },
300 5 => Object {
301 "children": Array [],
@@ -290,6 +304,7 @@ Object {
304 "key": "third",
305 "parentID": 2,
306 "treeBaseDuration": 0,
307 + "type": 8,
308 },
309 },
310 "rootID": 1,
@@ -308,19 +323,19 @@ Object {
323 },
324 Object {
325 "id": 3,
311 - "label": "Child key=\\"first\\" (3ms)",
326 + "label": "Child (Memo) key=\\"first\\" (3ms)",
327 "name": "Child",
328 "value": 3,
329 },
330 Object {
331 "id": 4,
317 - "label": "Child key=\\"second\\" (2ms)",
332 + "label": "Child (Memo) key=\\"second\\" (2ms)",
333 "name": "Child",
334 "value": 2,
335 },
336 Object {
337 "id": 5,
323 - "label": "Child key=\\"third\\" (<0.1ms)",
338 + "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
339 "name": "Child",
340 "value": 0,
341 },
@@ -340,6 +355,7 @@ Object {
355 "key": null,
356 "parentID": 0,
357 "treeBaseDuration": 15,
358 + "type": 11,
359 },
360 2 => Object {
361 "children": Array [
@@ -352,6 +368,7 @@ Object {
368 "key": null,
369 "parentID": 1,
370 "treeBaseDuration": 15,
371 + "type": 5,
372 },
373 3 => Object {
374 "children": Array [],
@@ -360,6 +377,7 @@ Object {
377 "key": "first",
378 "parentID": 2,
379 "treeBaseDuration": 3,
380 + "type": 8,
381 },
382 4 => Object {
383 "children": Array [],
@@ -368,6 +386,7 @@ Object {
386 "key": "second",
387 "parentID": 2,
388 "treeBaseDuration": 2,
389 + "type": 8,
390 },
391 5 => Object {
392 "children": Array [],
@@ -376,6 +395,7 @@ Object {
395 "key": "third",
396 "parentID": 2,
397 "treeBaseDuration": 0,
398 + "type": 8,
399 },
400 },
401 "rootID": 1,
src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+14
@@ -12,6 +12,7 @@ Object {
12 "key": null,
13 "parentID": 0,
14 "treeBaseDuration": 12,
15 + "type": 11,
16 },
17 2 => Object {
18 "children": Array [
@@ -22,6 +23,7 @@ Object {
23 "key": null,
24 "parentID": 1,
25 "treeBaseDuration": 12,
26 + "type": 5,
27 },
28 3 => Object {
29 "children": Array [],
@@ -30,6 +32,7 @@ Object {
32 "key": "0",
33 "parentID": 2,
34 "treeBaseDuration": 2,
35 + "type": 8,
36 },
37 },
38 "rootID": 1,
@@ -48,6 +51,7 @@ Object {
51 "key": null,
52 "parentID": 0,
53 "treeBaseDuration": 16,
54 + "type": 11,
55 },
56 2 => Object {
57 "children": Array [
@@ -60,6 +64,7 @@ Object {
64 "key": null,
65 "parentID": 1,
66 "treeBaseDuration": 16,
67 + "type": 5,
68 },
69 3 => Object {
70 "children": Array [],
@@ -68,6 +73,7 @@ Object {
73 "key": "0",
74 "parentID": 2,
75 "treeBaseDuration": 2,
76 + "type": 8,
77 },
78 4 => Object {
79 "children": Array [],
@@ -76,6 +82,7 @@ Object {
82 "key": "1",
83 "parentID": 2,
84 "treeBaseDuration": 2,
85 + "type": 8,
86 },
87 5 => Object {
88 "children": Array [],
@@ -84,6 +91,7 @@ Object {
91 "key": "2",
92 "parentID": 2,
93 "treeBaseDuration": 2,
94 + "type": 8,
95 },
96 },
97 "rootID": 1,
@@ -102,6 +110,7 @@ Object {
110 "key": null,
111 "parentID": 0,
112 "treeBaseDuration": 14,
113 + "type": 11,
114 },
115 2 => Object {
116 "children": Array [
@@ -113,6 +122,7 @@ Object {
122 "key": null,
123 "parentID": 1,
124 "treeBaseDuration": 14,
125 + "type": 5,
126 },
127 3 => Object {
128 "children": Array [],
@@ -121,6 +131,7 @@ Object {
131 "key": "0",
132 "parentID": 2,
133 "treeBaseDuration": 2,
134 + "type": 8,
135 },
136 4 => Object {
137 "children": Array [],
@@ -129,6 +140,7 @@ Object {
140 "key": "1",
141 "parentID": 2,
142 "treeBaseDuration": 2,
143 + "type": 8,
144 },
145 },
146 "rootID": 1,
@@ -147,6 +159,7 @@ Object {
159 "key": null,
160 "parentID": 0,
161 "treeBaseDuration": 10,
162 + "type": 11,
163 },
164 2 => Object {
165 "children": Array [],
@@ -155,6 +168,7 @@ Object {
168 "key": null,
169 "parentID": 1,
170 "treeBaseDuration": 10,
171 + "type": 5,
172 },
173 },
174 "rootID": 1,
src/backend/renderer.js
+6 -8
@@ -459,10 +459,9 @@ export function attach(
459 return 'EventTarget';
460 }
461 case ForwardRef:
462 - const functionName = getDisplayName(resolvedType.render, '');
462 return (
463 resolvedType.displayName ||
465 - (functionName !== '' ? functionName : 'ForwardRef')
464 + getDisplayName(resolvedType.render, 'Anonymous')
465 );
466 case HostRoot:
467 return null;
@@ -477,8 +476,7 @@ export function attach(
476 if (elementType.displayName) {
477 return elementType.displayName;
478 } else {
480 - const displayName = type.displayName || type.name;
481 - return displayName ? displayName : 'Memo';
479 + return getDisplayName(type, 'Anonymous');
480 }
481 default:
482 const typeSymbol = getTypeSymbol(type);
@@ -1690,7 +1688,7 @@ export function attach(
1688
1689 const owners = [
1690 {
1693 - displayName: getDisplayNameForFiber(fiber) || 'Unknown',
1691 + displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
1692 id,
1693 },
1694 ];
@@ -1699,7 +1697,7 @@ export function attach(
1697 let owner = _debugOwner;
1698 while (owner !== null) {
1699 owners.unshift({
1702 - displayName: getDisplayNameForFiber(owner) || 'Unknown',
1700 + displayName: getDisplayNameForFiber(owner) || 'Anonymous',
1701 id: getFiberID(getPrimaryFiber(owner)),
1702 });
1703 owner = owner._debugOwner || null;
@@ -1794,7 +1792,7 @@ export function attach(
1792 let owner = _debugOwner;
1793 while (owner !== null) {
1794 owners.push({
1797 - displayName: getDisplayNameForFiber(owner) || 'Unknown',
1795 + displayName: getDisplayNameForFiber(owner) || 'Anonymous',
1796 id: getFiberID(getPrimaryFiber(owner)),
1797 });
1798 owner = owner._debugOwner || null;
@@ -2306,7 +2304,7 @@ export function attach(
2304 }
2305 child = child.child;
2306 }
2309 - const name = preferredDisplayName || fallbackDisplayName || 'Unknown';
2307 + const name = preferredDisplayName || fallbackDisplayName || 'Anonymous';
2308 const counter = rootDisplayNameCounter.get(name) || 0;
2309 rootDisplayNameCounter.set(name, counter + 1);
2310 const pseudoKey = `${name}:${counter}`;
src/devtools/store.js
+1
@@ -720,6 +720,7 @@ export default class Store extends EventEmitter {
720 children: element.children.slice(0),
721 displayName: element.displayName,
722 key: element.key,
723 + type: element.type,
724 });
725
726 element.children.forEach(childID =>
src/devtools/views/Components/SelectedElement.js
+1 -1
@@ -304,7 +304,7 @@ function InspectedElementView({
304 {owners.map(owner => (
305 <OwnerView
306 key={owner.id}
307 - displayName={owner.displayName || 'Unknown'}
307 + displayName={owner.displayName || 'Anonymous'}
308 id={owner.id}
309 isInStore={store.containsElement(owner.id)}
310 />
src/devtools/views/Profiler/CommitTreeBuilder.js
+3
@@ -144,6 +144,7 @@ function recursivelyInitializeTree(
144 key: node.key,
145 parentID,
146 treeBaseDuration: ((initialTreeBaseDurations.get(id): any): number),
147 + type: node.type,
148 });
149
150 node.children.forEach(childID =>
@@ -225,6 +226,7 @@ function updateTree(
226 key: null,
227 parentID: 0,
228 treeBaseDuration: 0, // This will be updated by a subsequent operation
229 + type,
230 };
231
232 nodes.set(id, node);
@@ -259,6 +261,7 @@ function updateTree(
261 key,
262 parentID,
263 treeBaseDuration: 0, // This will be updated by a subsequent operation
264 + type,
265 };
266
267 nodes.set(id, node);
src/devtools/views/Profiler/FlamegraphChartBuilder.js
+11 -3
@@ -1,5 +1,6 @@
1 // @flow
2
3 +import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
4 import { formatDuration } from './utils';
5
6 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -57,16 +58,23 @@ export function getChartData({
58 throw Error(`Could not find node with id "${id}" in commit tree`);
59 }
60
60 - const { children, displayName, key, treeBaseDuration } = node;
61 + const { children, displayName, key, treeBaseDuration, type } = node;
62
63 const actualDuration = actualDurations.get(id) || 0;
64 const selfDuration = selfDurations.get(id) || 0;
65 const didRender = actualDurations.has(id);
66
66 - const name = displayName || 'Unknown';
67 + const name = displayName || 'Anonymous';
68 const maybeKey = key !== null ? ` key="${key}"` : '';
69
69 - let label = `${name}${maybeKey}`;
70 + let maybeBadge = '';
71 + if (type === ElementTypeForwardRef) {
72 + maybeBadge = ' (ForwardRef)';
73 + } else if (type === ElementTypeMemo) {
74 + maybeBadge = ' (Memo)';
75 + }
76 +
77 + let label = `${name}${maybeBadge}${maybeKey}`;
78 if (didRender) {
79 label += ` (${formatDuration(selfDuration)}ms of ${formatDuration(
80 actualDuration
src/devtools/views/Profiler/RankedChartBuilder.js
+17 -4
@@ -1,5 +1,6 @@
1 // @flow
2
3 +import { ElementTypeForwardRef, ElementTypeMemo } from 'src/types';
4 import { formatDuration } from './utils';
5
6 import type { CommitDetailsFrontend, CommitTreeFrontend } from './types';
@@ -45,16 +46,28 @@ export function getChartData({
46 throw Error(`Could not find node with id "${id}" in commit tree`);
47 }
48
49 + const { displayName, key, parentID, type } = node;
50 +
51 // Don't show the root node in this chart.
49 - if (node.parentID === 0) {
52 + if (parentID === 0) {
53 return;
54 }
55 const selfDuration = selfDurations.get(id) || 0;
56 maxSelfDuration = Math.max(maxSelfDuration, selfDuration);
57
55 - const name = node.displayName || 'Unknown';
56 - const maybeKey = node.key !== null ? ` key="${node.key}"` : '';
57 - const label = `${name}${maybeKey} (${formatDuration(selfDuration)}ms)`;
58 + const name = displayName || 'Anonymous';
59 + const maybeKey = key !== null ? ` key="${key}"` : '';
60 +
61 + let maybeBadge = '';
62 + if (type === ElementTypeForwardRef) {
63 + maybeBadge = ' (ForwardRef)';
64 + } else if (type === ElementTypeMemo) {
65 + maybeBadge = ' (Memo)';
66 + }
67 +
68 + const label = `${name}${maybeBadge}${maybeKey} (${formatDuration(
69 + selfDuration
70 + )}ms)`;
71 chartNodes.push({
72 id,
73 label,
src/devtools/views/Profiler/types.js
+4
@@ -1,5 +1,7 @@
1 // @flow
2
3 +import type { ElementType } from 'src/types';
4 +
5 export type CommitTreeNodeFrontend = {|
6 id: number,
7 children: Array<number>,
@@ -7,6 +9,7 @@ export type CommitTreeNodeFrontend = {|
9 key: number | string | null,
10 parentID: number,
11 treeBaseDuration: number,
12 + type: ElementType,
13 |};
14
15 export type CommitTreeFrontend = {|
@@ -61,6 +64,7 @@ export type ProfilingSnapshotNode = {|
64 children: Array<number>,
65 displayName: string | null,
66 key: number | string | null,
67 + type: ElementType,
68 |};
69
70 export type ImportedProfilingData = {|
src/hydration.js
+1 -1
@@ -272,7 +272,7 @@ export function getDisplayNameForReactElement(
272 if (typeof type === 'string') {
273 return type;
274 } else if (type != null) {
275 - return getDisplayName(type, 'Unknown');
275 + return getDisplayName(type, 'Anonymous');
276 } else {
277 return 'Element';
278 }
src/utils.js
+1 -1
@@ -15,7 +15,7 @@ let encodedStringCache = new LRU({ max: 1000 });
15
16 export function getDisplayName(
17 type: Function,
18 - fallbackName: string = 'Unknown'
18 + fallbackName: string = 'Anonymous'
19 ): string {
20 const nameFromCache = cachedDisplayNames.get(type);
21 if (nameFromCache != null) {