Repository: facebook/react
Pull request: Work around Chrome DevTools crash on `performance.measure`

Chrome DevTools' Performance tab currently crashes when you render Components named `Layout` (and probably all [possible trace event names](https://chromium.googlesource.com/devtools/devtools-frontend/+/316b0c5d016ea0ece0e64f5685c7a00b82bbf144/front_end/models/trace/types/TraceEvents.ts#2883)). A [bug is filed](https://issues.chromium.org/u/1/issues/434109012) but it may take a while for a fix to get out.

I added a zero-width space to all `performance.measure` and `performance.mark` calls where we just log userspace names (Components or IO). The `await ...` or hardcoded names I haven't prefixed since they currently can't collide. A zero-width space prevents Chrome from misidentifying these trace events and doesn't show up in their UI (not even when you try to copy the names).

## Test plan

- [x] recording when "rerender" is clicked doesn't crash ([original](https://codesandbox.io/p/sandbox/sharp-meitner-l84f5l?file=%2Fsrc%2Findex.js%3A12%2C26)): https://mv97x8.csb.app/

Changed files:
filename: packages/react-client/src/ReactFlightPerformanceTrack.js
patch: @@ -110,7 +110,7 @@ export function logComponentRender(
       }
       debugTask.run(
         // $FlowFixMe[method-unbinding]
-        performance.measure.bind(performance, entryName, {
+        performance.measure.bind(performance, '\u200b' + entryName, {
           start: startTime < 0 ? 0 : startTime,
           end: childrenEndTime,
           detail: {
@@ -125,7 +125,7 @@ export function logComponentRender(
       );
     } else {
       console.timeStamp(
-        entryName,
+        '\u200b' + entryName,
         startTime < 0 ? 0 : startTime,
         childrenEndTime,
         trackNames[trackIdx],
@@ -163,7 +163,7 @@ export function logComponentAborted(
       if (componentInfo.props != null) {
         addObjectToProperties(componentInfo.props, properties, 0, '');
       }
-      performance.measure(entryName, {
+      performance.measure('\u200b' + entryName, {
         start: startTime < 0 ? 0 : startTime,
         end: childrenEndTime,
         detail: {
@@ -220,7 +220,7 @@ export function logComponentErrored(
       if (componentInfo.props != null) {
         addObjectToProperties(componentInfo.props, properties, 0, '');
       }
-      performance.measure(entryName, {
+      performance.measure('\u200b' + entryName, {
         start: startTime < 0 ? 0 : startTime,
         end: childrenEndTime,
         detail: {
@@ -614,7 +614,7 @@ export function logIOInfoErrored(
         getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected';
       debugTask.run(
         // $FlowFixMe[method-unbinding]
-        performance.measure.bind(performance, entryName, {
+        performance.measure.bind(performance, '\u200b' + entryName, {
           start: startTime < 0 ? 0 : startTime,
           end: endTime,
           detail: {
@@ -667,7 +667,7 @@ export function logIOInfo(
       );
       debugTask.run(
         // $FlowFixMe[method-unbinding]
-        performance.measure.bind(performance, entryName, {
+        performance.measure.bind(performance, '\u200b' + entryName, {
           start: startTime < 0 ? 0 : startTime,
           end: endTime,
           detail: {

filename: packages/react-reconciler/src/ReactFiberPerformanceTrack.js
patch: @@ -272,7 +272,7 @@ export function logComponentRender(
             // $FlowFixMe[method-unbinding]
             performance.measure.bind(
               performance,
-              name,
+              '\u200b' + name,
               reusableComponentOptions,
             ),
           );
@@ -369,10 +369,10 @@ export function logComponentErrored(
       if (__DEV__ && debugTask) {
         debugTask.run(
           // $FlowFixMe[method-unbinding]
-          performance.measure.bind(performance, name, options),
+          performance.measure.bind(performance, '\u200b' + name, options),
         );
       } else {
-        performance.measure(name, options);
+        performance.measure('\u200b' + name, options);
       }
     } else {
       console.timeStamp(
@@ -436,10 +436,10 @@ function logComponentEffectErrored(
       if (debugTask) {
         debugTask.run(
           // $FlowFixMe[method-unbinding]
-          performance.measure.bind(performance, name, options),
+          performance.measure.bind(performance, '\u200b' + name, options),
         );
       } else {
-        performance.measure(name, options);
+        performance.measure('\u200b' + name, options);
       }
     } else {
       console.timeStamp(

filename: packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js
patch: @@ -610,7 +610,7 @@ describe('ReactFlightAsyncDebugInfo', () => {
       expect(entries).toMatchInlineSnapshot(`
         [
           {
-            "name": "Component",
+            "name": "\u200bComponent",
           },
           {
             "name": "await getData (…/pulls)",