use string values to get names for JSC heap capture react tree

Reviewed By: dcaspi

Differential Revision: D3723800

fbshipit-source-id: a013525f77484dfb8dc39ced81feee42bccba70d

local-cli/server/middleware/heapCapture/out/heapCapture.js

@@ -44,11 +44,32 @@ function getInternalInstanceName(refs,id){
 var elementId=idGetProp(refs,id,'_currentElement');
 var typeId=idGetProp(refs,elementId,'type');
 var typeRef=refs[typeId];
-if(typeRef&&typeRef.type==='Function'&&typeRef.value){
-return typeRef.value.name;
-}else{
-return'<unknown component>';
+if(typeRef){
+if(typeRef.type==='string'){// element.type is string
+if(typeRef.value){
+return typeRef.value;
 }
+}else if(typeRef.type==='Function'){// element.type is function
+var displayNameId=idGetProp(refs,typeId,'displayName');
+if(displayNameId){
+var displayNameRef=refs[displayNameId];
+if(displayNameRef&&displayNameRef.value){
+return displayNameRef.value;// element.type.displayName
+}
+}
+var nameId=idGetProp(refs,typeId,'name');
+if(nameId){
+var nameRef=refs[nameId];
+if(nameRef&&nameRef.value){
+return nameRef.value;// element.type.name
+}
+}
+if(typeRef.value&&typeRef.value.name){
+return typeRef.value.name;// element.type symbolicated function name
+}
+}
+}
+return'#unknown';
 }
 
 function registerReactComponentTreeImpl(refs,registry,parents,inEdgeNames,trees,id){

local-cli/server/middleware/heapCapture/src/heapCapture.js

@@ -44,11 +44,32 @@ function getInternalInstanceName(refs, id) {
   const elementId = idGetProp(refs, id, '_currentElement');
   const typeId = idGetProp(refs, elementId, 'type');
   const typeRef = refs[typeId];
-  if (typeRef && typeRef.type === 'Function' && typeRef.value) {
-    return typeRef.value.name;
-  } else {
-    return '<unknown component>';
+  if (typeRef) {
+    if (typeRef.type === 'string') {  // element.type is string
+      if (typeRef.value) {
+        return typeRef.value;
+      }
+    } else if (typeRef.type === 'Function') { // element.type is function
+      const displayNameId = idGetProp(refs, typeId, 'displayName');
+      if (displayNameId) {
+        const displayNameRef = refs[displayNameId];
+        if (displayNameRef && displayNameRef.value) {
+          return displayNameRef.value;  // element.type.displayName
+        }
+      }
+      const nameId = idGetProp(refs, typeId, 'name');
+      if (nameId) {
+        const nameRef = refs[nameId];
+        if (nameRef && nameRef.value) {
+          return nameRef.value; // element.type.name
+        }
+      }
+      if (typeRef.value && typeRef.value.name) {
+        return typeRef.value.name;  // element.type symbolicated function name
+      }
+    }
   }
+  return '#unknown';
 }
 
 function registerReactComponentTreeImpl(refs, registry, parents, inEdgeNames, trees, id) {