Increase Bridge serialization threshold from 1 -> 2 (#1263)

Increase Bridge serialization threshold from 1 -> 2

This is being done to fix interaction names within the Profiler.

Author: bvaughn

agent/__tests__/dehydrate-test.js

@@ -33,31 +33,31 @@ describe('dehydrate', () => {
     var object = {a: {b: {c: {d: 4}}}};
     var cleaned = [];
     var result = dehydrate(object, cleaned);
-    expect(cleaned).toEqual([['a', 'b']]);
-    expect(result.a.b).toEqual({type: 'object', name: '', meta: {}});
-    expect(result.a.b.c).toBeUndefined(); // Dehydrated
+    expect(cleaned).toEqual([['a', 'b', 'c']]);
+    expect(result.a.b.c).toEqual({type: 'object', name: '', meta: {}});
+    expect(result.a.b.c.d).toBeUndefined(); // Dehydrated
 
     // Re-hydrate
-    result.a.b = dehydrate(object.a.b, [], ['a', 'b']);
+    result.a.b.c = dehydrate(object.a.b.c, [], ['a', 'b', 'c']);
     expect(result).toEqual(object);
   });
 
   it('cleans a deeply nested array', () => {
-    var object = {a: {b: [1, 3]}};
+    var object = {a: {b: {c: [1, 3]}}};
     var cleaned = [];
     var result = dehydrate(object, cleaned);
-    expect(cleaned).toEqual([['a', 'b']]);
-    expect(result.a.b).toEqual({type: 'array', name: 'Array', meta: {length: 2}});
+    expect(cleaned).toEqual([['a', 'b', 'c']]);
+    expect(result.a.b.c).toEqual({type: 'array', name: 'Array', meta: {length: 2}});
   });
 
   it('cleans multiple things', () => {
     var Something = function() {};
-    var object = {a: {b: [1, 3], c: new Something()}};
+    var object = {a: {b: {c: [1, 3], d: new Something()}}};
     var cleaned = [];
     var result = dehydrate(object, cleaned);
-    expect(cleaned).toEqual([['a', 'b'], ['a', 'c']]);
-    expect(result.a.b).toEqual({type: 'array', name: 'Array', meta: {length: 2}});
-    expect(result.a.c).toEqual({type: 'object', name: 'Something', meta: {}});
+    expect(cleaned).toEqual([['a', 'b', 'c'], ['a', 'b', 'd']]);
+    expect(result.a.b.c).toEqual({type: 'array', name: 'Array', meta: {length: 2}});
+    expect(result.a.b.d).toEqual({type: 'object', name: 'Something', meta: {}});
   });
 
   it('returns readable name for dates', () => {

agent/dehydrate.js

@@ -13,10 +13,14 @@
 // This threshold determines the depth at which the bridge "dehydrates" nested data.
 // Dehydration means that we don't serialize the data for e.g. postMessage or stringify,
 // unless the frontend explicitly requests it (e.g. a user clicks to expand a props object).
-// This value was originally set to 2, but we reduced it to improve performance:
-// see https://github.com/facebook/react-devtools/issues/1200
-// Note this value also indirectly determines how far props can be drilled into within the Profiler.
-const LEVEL_THRESHOLD = 1;
+// We tried reducing this value from 2 to 1 to improve performance:
+// https://github.com/facebook/react-devtools/issues/1200
+// But this caused problems with the Profiler's interaction tracing output.
+// Because React mutates Fibers, profiling data that is dehydrated for old commits–
+// will not be available later from within the Profiler.
+// This impacts props/state as well as Interactions.
+// https://github.com/facebook/react-devtools/issues/1262
+const LEVEL_THRESHOLD = 2;
 
 /**
  * Get a enhanced/artificial type string based on the object instance