[React RUM] Ignore element.id when selecting DOM source

.eslintrc.cjs

@@ -25,6 +25,7 @@ module.exports = {
   rules: {
     'import/extensions': [2, 'ignorePackages'],
     'import/prefer-default-export': 0,
+    'no-underscore-dangle': ['error', { allow: ['_reactRootContainer'] }],
   },
   globals: {
     __rootdir: true,

modules/dom.js

@@ -9,6 +9,8 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import { isReactApp } from './utils.js';
+
 export const getTargetValue = (element) => element.getAttribute('data-rum-target') || element.getAttribute('href')
     || element.currentSrc || element.getAttribute('src') || element.dataset.action || element.action;
 
@@ -45,7 +47,7 @@ export const sourceSelector = (element) => {
     }
 
     const blockName = element.closest('.block') ? element.closest('.block').getAttribute('data-block-name') : '';
-    if (element.id || formElementSelector) {
+    if ((element.id && !isReactApp()) || formElementSelector) {
       const id = element.id ? `#${element.id}` : '';
       return blockName ? `.${blockName} ${formElementSelector}${id}` : `${formElementSelector}${id}`;
     }

modules/utils.js

@@ -36,3 +36,17 @@ export const urlSanitizers = {
     return `${u.origin}${u.pathname}`;
   },
 };
+
+/**
+ * Determines if the current page is running a React application
+ * by inspecting React-related elements in the DOM.
+ * @returns {bool}
+ */
+export const isReactApp = () => {
+  // https://gist.github.com/rambabusaravanan/1d594bd8d1c3153bc8367753b17d074b
+  if (!!window.React
+    || !!document.querySelector('[data-reactroot], [data-reactid]')
+    || Array.from(document.querySelectorAll('*')).some((e) => e._reactRootContainer !== undefined || Object.keys(e).some((k) => k.startsWith('__reactContainer')))
+  ) return true;
+  return false;
+};