[string-refs] log string ref from prod (#31161)

If passed as a feature flag, this calls the configured function when a
string ref is used even from prod code to find the last usages.

packages/react/src/jsx/ReactJSXElement.js

@@ -24,6 +24,7 @@ import {
   disableStringRefs,
   disableDefaultPropsExceptForClasses,
   enableOwnerStacks,
+  enableLogStringRefsProd,
 } from 'shared/ReactFeatureFlags';
 import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 import {ClassComponent} from 'react-reconciler/src/ReactWorkTags';
@@ -76,7 +77,7 @@ let didWarnAboutStringRefs;
 let didWarnAboutElementRef;
 let didWarnAboutOldJSXRuntime;
 
-if (__DEV__) {
+if (__DEV__ || enableLogStringRefsProd) {
   didWarnAboutStringRefs = {};
   didWarnAboutElementRef = {};
 }
@@ -1314,22 +1315,27 @@ function stringRefAsCallbackRef(stringRef, type, owner, value) {
     );
   }
 
-  if (__DEV__) {
+  if (__DEV__ || enableLogStringRefsProd) {
     if (
       // Will already warn with "Function components cannot be given refs"
       !(typeof type === 'function' && !isReactClass(type))
     ) {
       const componentName = getComponentNameFromFiber(owner) || 'Component';
       if (!didWarnAboutStringRefs[componentName]) {
-        console.error(
-          'Component "%s" contains the string ref "%s". Support for string refs ' +
-            'will be removed in a future major release. We recommend using ' +
-            'useRef() or createRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://react.dev/link/strict-mode-string-ref',
-          componentName,
-          stringRef,
-        );
+        if (enableLogStringRefsProd) {
+          enableLogStringRefsProd(componentName, stringRef);
+        }
+        if (__DEV__) {
+          console.error(
+            'Component "%s" contains the string ref "%s". Support for string refs ' +
+              'will be removed in a future major release. We recommend using ' +
+              'useRef() or createRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://react.dev/link/strict-mode-string-ref',
+            componentName,
+            stringRef,
+          );
+        }
         didWarnAboutStringRefs[componentName] = true;
       }
     }

packages/shared/ReactFeatureFlags.js

@@ -215,6 +215,13 @@ export const disableClientCache = true;
 // during element creation.
 export const enableRefAsProp = true;
 export const disableStringRefs = true;
+/**
+ * If set to a function, the function will be called with the component name
+ * and ref string.
+ *
+ * NOTE: This happens also in the production build.
+ */
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 
 // Warn on any usage of ReactTestRenderer
 export const enableReactTestRendererWarning = true;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -65,6 +65,7 @@ export const enableLazyContextPropagation = true;
 export const enableLegacyCache = false;
 export const enableLegacyFBSupport = false;
 export const enableLegacyHidden = false;
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 export const enableNoCloningMemoCache = false;
 export const enableOwnerStacks = false;
 export const enablePostpone = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -56,6 +56,7 @@ export const enableContextProfiling = false;
 export const enableLegacyCache = false;
 export const enableLegacyFBSupport = false;
 export const enableLegacyHidden = false;
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 export const enableNoCloningMemoCache = false;
 export const enableObjectFiber = false;
 export const enableOwnerStacks = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -44,6 +44,7 @@ export const enableUseEffectEventHook = false;
 export const favorSafetyOverHydrationPerf = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableFabricCompleteRootInCommitPhase = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -46,6 +46,7 @@ export const enableUseEffectEventHook = false;
 export const favorSafetyOverHydrationPerf = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableRenderableContext = false;

packages/shared/forks/ReactFeatureFlags.www-dynamic.js

@@ -21,6 +21,7 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
 export const enableHiddenSubtreeInsertionEffectCleanup = __VARIANT__;
+export const enableLogStringRefsProd: null | ((string, string) => void) = null;
 export const enableNoCloningMemoCache = __VARIANT__;
 export const enableObjectFiber = __VARIANT__;
 export const enableRenderableContext = __VARIANT__;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -22,20 +22,21 @@ export const {
   enableDebugTracing,
   enableDeferRootSchedulingToMicrotask,
   enableDO_NOT_USE_disableStrictPassiveEffect,
+  enableHiddenSubtreeInsertionEffectCleanup,
   enableInfiniteRenderLoopDetection,
+  enableLogStringRefsProd,
   enableNoCloningMemoCache,
   enableObjectFiber,
   enableRenderableContext,
   enableRetryLaneExpiration,
+  enableSiblingPrerendering,
   enableTransitionTracing,
   enableTrustedTypesIntegration,
-  enableHiddenSubtreeInsertionEffectCleanup,
   favorSafetyOverHydrationPerf,
   renameElementSymbol,
   retryLaneExpirationMs,
   syncLaneExpirationMs,
   transitionLaneExpirationMs,
-  enableSiblingPrerendering,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

scripts/flags/flags.js

@@ -172,7 +172,7 @@ function getNextMajorFlagValue(flag) {
   const value = ReactFeatureFlagsMajor[flag];
   if (value === true || value === 'next') {
     return '✅';
-  } else if (value === false || value === 'experimental') {
+  } else if (value === false || value === null || value === 'experimental') {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -189,7 +189,12 @@ function getOSSCanaryFlagValue(flag) {
   const value = ReactFeatureFlags[flag];
   if (value === true) {
     return '✅';
-  } else if (value === false || value === 'experimental' || value === 'next') {
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -206,7 +211,7 @@ function getOSSExperimentalFlagValue(flag) {
   const value = ReactFeatureFlags[flag];
   if (value === true || value === 'experimental') {
     return '✅';
-  } else if (value === false || value === 'next') {
+  } else if (value === false || value === null || value === 'next') {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -225,7 +230,7 @@ function getWWWModernFlagValue(flag) {
   const value = ReactFeatureFlagsWWW[flag];
   if (value === true || value === 'experimental') {
     return '✅';
-  } else if (value === false || value === 'next') {
+  } else if (value === false || value === null || value === 'next') {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -244,7 +249,12 @@ function getWWWClassicFlagValue(flag) {
   const value = ReactFeatureFlagsWWW[flag];
   if (value === true) {
     return '✅';
-  } else if (value === false || value === 'experimental' || value === 'next') {
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -265,7 +275,7 @@ function getRNNextMajorFlagValue(flag) {
     return '✅';
   } else if (value === 'next-todo') {
     return '📋';
-  } else if (value === false || value === 'experimental') {
+  } else if (value === false || value === null || value === 'experimental') {
     return '❌';
   } else if (value === 'profile') {
     return '📊';
@@ -286,6 +296,7 @@ function getRNOSSFlagValue(flag) {
     return '✅';
   } else if (
     value === false ||
+    value === null ||
     value === 'experimental' ||
     value === 'next' ||
     value === 'next-todo'
@@ -308,7 +319,12 @@ function getRNFBFlagValue(flag) {
   const value = ReactFeatureFlagsNativeFB[flag];
   if (value === true) {
     return '✅';
-  } else if (value === false || value === 'experimental' || value === 'next') {
+  } else if (
+    value === false ||
+    value === null ||
+    value === 'experimental' ||
+    value === 'next'
+  ) {
     return '❌';
   } else if (value === 'profile') {
     return '📊';