Cut out the middle instead

Author: eps1lon

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -414,6 +414,11 @@ function getIOShortName(
         // This may now be either the file name or the host.
         // Include the slash to make it more obvious what we trimmed.
         desc = ' (…' + description.slice(slashIdx, queryIdx) + ')';
+      } else {
+        // cut out the middle to not exceed the max length
+        const start = description.slice(slashIdx, slashIdx + descMaxLength / 2);
+        const end = description.slice(queryIdx - descMaxLength / 2, queryIdx);
+        desc = ' (' + (slashIdx > 0 ? '…' : '') + start + '…' + end + ')';
       }
     }
   }

packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js

@@ -622,10 +622,10 @@ describe('ReactFlightAsyncDebugInfo', () => {
             "name": "await getData (…/test)",
           },
           {
-            "name": "await getData",
+            "name": "await getData (…/75897c2dcd…13d22b4b16b4)",
           },
           {
-            "name": "await getData",
+            "name": "await getData (/this-is-a-…what-happens)",
           },
           {
             "name": "await getData (/this-is-not)",