RUM-12185: Support aliased import paths for local SVG discovery

LICENSE-3rdparty.csv

@@ -3,6 +3,7 @@ prod,big-integer,Unlicense,"Free and unencumbered software released into the pub
 prod,lodash.isequal,CC0,"Copyright jQuery Foundation and other contributors <https://jquery.org/>"
 prod,react-native,MIT,"Copyright (c) Facebook, Inc. and its affiliates."
 dev,@apollo/client,MIT,"Copyright (c) 2022 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)"
+dev,babel-plugin-module-resolver,MIT,"Copyright (c) 2015 Tommy Leunen <tommy.leunen@gmail.com> (tommyleunen.com)"
 dev,@babel/plugin-transform-runtime,MIT,"Copyright (c) 2014-present Sebastian McKenzie and other contributors"
 dev,@testing-library/react-native,MIT,"Copyright (c) 2018 Callstack and Rally Health"
 dev,@types/jest,MIT,"Copyrights are respective of each contributor listed at the beginning of each definition file."
@@ -37,4 +38,5 @@ prod,@openfeature/web-sdk,Apache-2.0,"Copyright (c) The OpenFeature Authors"
 prod,chokidar,MIT,"Copyright (c) 2012 Paul Miller (https://paulmillr.com), Elan Shanker"
 prod,fast-glob,MIT,"Copyright (c) Denis Malinochkin"
 prod,svgo,MIT,"Copyright (c) Kir Belevich"
+prod,tsconfig-paths,MIT,"Copyright (c) 2016 Jonas Kello"
 prod,uuid,MIT,"Copyright (c) 2010-2020 Robert Kieffer and other contributors"

benchmarks/babel.config.js

@@ -1,6 +1,33 @@
+const path = require('path');
+
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
+    // Used by Group H in the SVG test screen to verify aliased imports
+    // (e.g. '@assets/star.svg') resolve both at runtime (via this plugin
+    // rewriting the import) and in buildSvgMap's static scan (RUM-12185).
+    ['module-resolver', {
+      root: ['./src'],
+      alias: {
+        '@assets': './src/scenario/SessionReplay/component/assets',
+        // H2/H3 alias into @react-native/debugger-frontend (a real,
+        // non-workspace npm dependency -- NOT a yarn-workspace symlink,
+        // so its file path genuinely contains 'node_modules'). This matters
+        // because the Babel plugin explicitly skips any file under
+        // node_modules (index.ts), so RNSvgHandler never independently
+        // wraps these icons' own <Svg> tag the way it does for in-project
+        // assets/*.svg -- localSvgMap/pathAliasResolver is the ONLY thing
+        // that can make these show up wrapped in Session Replay, which is
+        // what actually exercises the aliasing fix (RUM-12185).
+        //
+        // H2: alias maps straight to a file -- the specifier itself carries
+        // no '.svg' extension, exercising buildSvgMap's extensionless-alias path.
+        '@heart-logo': './node_modules/@react-native/debugger-frontend/dist/third-party/front_end/Images/checkmark.svg',
+        // H3: alias substitute is an absolute path rather than one relative to
+        // the importing file, exercising buildSvgMap's absolute-alias path.
+        '@absoluteAssets': path.resolve(__dirname, 'node_modules/@react-native/debugger-frontend/dist/third-party/front_end/Images')
+      }
+    }],
     ['@datadog/mobile-react-native-babel-plugin', {
       sessionReplay: {
         svgTracking: true

benchmarks/ios/Podfile.lock

@@ -2140,9 +2140,9 @@ SPEC CHECKSUMS:
   DatadogInternal: e5a4652ee266986e29c6b8491aff7f78dc3b731d
   DatadogLogs: 52792add5827042f619771a23656e2bfb6b0f4e7
   DatadogRUM: b78d608e013f39c5679ed31ad97dad323c6113e8
-  DatadogSDKReactNative: ac7f15bcb1b7b805d7e80ad931f8f28fcf6d0985
-  DatadogSDKReactNativeSessionReplay: cb9dc63d83543f4460c275e6c2661f79d2108dd5
-  DatadogSDKReactNativeWebView: e7118febd9ac7f9ff981cfb9719722de5e664020
+  DatadogSDKReactNative: 384b09933cbccd45e616d773fa950c390a223cf4
+  DatadogSDKReactNativeSessionReplay: 614404cade1bacec7ad305e4bcfb3b277529767e
+  DatadogSDKReactNativeWebView: 46c89e61223339b5c750bac0815c8b5373974788
   DatadogSessionReplay: 932b2077b1a5367de1450479d72093621b9fd618
   DatadogTrace: 5ef84e254e2e1d337bc52e0cdf16396ca102aeb1
   DatadogWebViewTracking: e0470157f55a83680a549d79ba2985e0d17465db
@@ -2155,74 +2155,74 @@ SPEC CHECKSUMS:
   KSCrash: 8c4464fd5da7de520f2ce4a00fdf63f169a80f18
   OpenTelemetry-Swift-Api: 3be9043f6288eb4ac3cbe7548b5bd45fb4ed5849
   OpenTelemetry-Swift-Sdk: d9fa7bc839350f5a81467a5e877f727a8a77712d
-  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
+  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: be794de7dc6ed8f9f7fbf525f86e7651b8b68746
   RCTRequired: a83787b092ec554c2eb6019ff3f5b8d125472b3b
   RCTTypeSafety: 48ad3c858926b1c46f46a81a58822b476e178e2c
   React: 3b5754191f1b65f1dbc52fbea7959c3d2d9e39c9
   React-callinvoker: 6beeaf4c7db11b6cc953fac45f2c76e3fb125013
-  React-Core: 88e817c42de035378cc71e009193b9a044d3f595
-  React-CoreModules: dcf764d71efb4f75d38fcae8d4513b6729f49360
-  React-cxxreact: 8cdcc937c5fbc406fe843a381102fd69440ca78a
+  React-Core: 8a10ac9de53373a3ecb5dfcbcf56df1d3dad0861
+  React-CoreModules: af6999b35c7c01b0e12b59d27f3e054e13da43b1
+  React-cxxreact: 833f00155ce8c2fda17f6d286f8eaeff2ececc69
   React-debug: 440175830c448e7e53e61ebb8d8468c3256b645e
-  React-defaultsnativemodule: 4824bcd7b96ee2d75c28b1ca21f58976867f5535
-  React-domnativemodule: a421118b475618961cf282e8ea85347cc9bb453c
-  React-Fabric: 6ac7de06009eb96b609a770b17abba6e460b5f45
-  React-FabricComponents: e3bc2680a5a9a4917ff0c8d7f390688c30ef753c
-  React-FabricImage: 8bad558dec7478077974caa96acc79692d6b71f5
+  React-defaultsnativemodule: a970effe18fe50bdbbb7115c3297f873b666d0d4
+  React-domnativemodule: 45f886342a724e61531b18fba1859bb6782e5d62
+  React-Fabric: 69f1881f2177a8512304a64157943548ab6df0cf
+  React-FabricComponents: f54111c8e2439fc273ab07483e3a7054ca1e75af
+  React-FabricImage: 9ad2619dfe8c386d79e8aaa87da6e8f018ab9592
   React-featureflags: b9cf9b35baca1c7f20c06a104ffc325a02752faa
-  React-featureflagsnativemodule: dc93d81da9f41f7132e24455ec8b4b60802fd5b0
-  React-graphics: aaa5a38bea15d7b895b210d95d554af45a07002a
-  React-hermes: 08ad9fb832d1b9faef391be17309aa6a69fad23b
-  React-idlecallbacksnativemodule: aacea33ef6c511a9781f9286cc7cdf93f39bba14
-  React-ImageManager: c596c3b658c9c14607f9183ed0f635c8dd77987c
-  React-jserrorhandler: 987609b2f16b7d79d63fcd621bf0110dd7400b35
-  React-jsi: afa286d7e0c102c2478dc420d4f8935e13c973fc
-  React-jsiexecutor: 08f5b512b4db9e2f147416d60a0a797576b9cfef
-  React-jsinspector: 5a94bcae66e3637711c4d96a00038ab9ec935bf5
-  React-jsinspectortracing: a12589a0adbb2703cbc4380dabe9a58800810923
-  React-jsitracing: 0b1a403d7757cec66b7dd8b308d04db85eef75f3
-  React-logger: 304814ae37503c8eb54359851cc55bd4f936b39c
-  React-Mapbuffer: b588d1ca18d2ce626f868f04ab12d8b1f004f12c
-  React-microtasksnativemodule: 11831d070aa47755bb5739069eb04ec621fec548
-  react-native-config: 3367df9c1f25bb96197007ec531c7087ed4554c3
-  react-native-safe-area-context: 9b169299f9dc95f1d7fe1dd266fde53bd899cd0c
-  react-native-slider: 27263d134d55db948a4706f1e47d0ec88fb354dd
-  react-native-webview: be9957759cb73cb64f2ed5359e32a85f1f5bdff8
-  React-NativeModulesApple: 79a4404ac301b40bec3b367879c5e9a9ce81683c
-  React-perflogger: 0ea25c109dba33d47dec36b2634bf7ea67c1a555
-  React-performancetimeline: f74480de6efbcd8541c34317c0baedb433f27296
+  React-featureflagsnativemodule: 7f1bc76d1d2c5bede5e753b8d188dbde7c59b12f
+  React-graphics: 069e0d0b31ed1e80feb023ad4f7e97f00e84f7b9
+  React-hermes: 63df5ac5a944889c8758a6213b39ed825863adb7
+  React-idlecallbacksnativemodule: 4c700bd7c0012adf904929075a79418b828b5ffc
+  React-ImageManager: 5d1ba8a7bae44ebba43fc93da64937c713d42941
+  React-jserrorhandler: 0defd58f8bb797cdd0a820f733bf42d8bee708ce
+  React-jsi: 99d6207ec802ad73473a0dad3c9ad48cd98463f6
+  React-jsiexecutor: 8c8097b4ba7e7f480582d6e6238b01be5dcc01c0
+  React-jsinspector: ea148ec45bc7ff830e443383ea715f9780c15934
+  React-jsinspectortracing: 46bb2841982f01e7b63eaab98140fa1de5b2a1db
+  React-jsitracing: c1063fc2233960d1c8322291e74bca51d25c10d7
+  React-logger: 763728cf4eebc9c5dc9bfc3649e22295784f69f3
+  React-Mapbuffer: 63278529b5cf531a7eaf8fc71244fabb062ca90c
+  React-microtasksnativemodule: 6a39463c32ce831c4c2aa8469273114d894b6be9
+  react-native-config: 644074ab88db883fcfaa584f03520ec29589d7df
+  react-native-safe-area-context: afcc2e2b3e78ae8ef90d81e658aacee34ebc27ea
+  react-native-slider: 310d3f89edd6ca8344a974bfe83a29a3fbb60e5a
+  react-native-webview: 80ef603d1df42e24fdde765686fbb9b8a6ecd554
+  React-NativeModulesApple: fd0545efbb7f936f78edd15a6564a72d2c34bb32
+  React-perflogger: 5f8fa36a8e168fb355efe72099efe77213bc2ac6
+  React-performancetimeline: 8c0ecfa1ae459cc5678a65f95ac3bf85644d6feb
   React-RCTActionSheet: 2ef95837e89b9b154f13cd8401f9054fc3076aff
-  React-RCTAnimation: 33d960d7f58a81779eea6dea47ad0364c67e1517
-  React-RCTAppDelegate: 85c13403fd6f6b6cc630428d52bd8bd76a670dc9
-  React-RCTBlob: 74c986a02d951931d2f6ed0e07ed5a7eb385bfc0
-  React-RCTFabric: 384a8fea4f22fc0f21299d771971862883ba630a
-  React-RCTFBReactNativeSpec: eb1c3ec5149f76133593a516ff9d5efe32ebcecd
-  React-RCTImage: 2c58b5ddeb3c65e52f942bbe13ff9c59bd649b09
-  React-RCTLinking: b6b14f8a3e62c02fc627ac4f3fb0c7bd941f907c
-  React-RCTNetwork: 1d050f2466c1541b339587d46f78d5eee218d626
-  React-RCTSettings: 8148f6be0ccc0cfe6e313417ebf8a479caaa2146
-  React-RCTText: 64114531ad1359e4e02a4a8af60df606dbbabc25
-  React-RCTVibration: f4859417a7dd859b6bf18b1aba897e52beb72ef6
+  React-RCTAnimation: 46abefd5acfda7e6629f9e153646deecc70babd2
+  React-RCTAppDelegate: 7e58e0299e304cceee3f7019fa77bc6990f66b22
+  React-RCTBlob: f68c63a801ef1d27e83c4011e3b083cc86a200d7
+  React-RCTFabric: c59f41d0c4edbaac8baa232731ca09925ae4dda7
+  React-RCTFBReactNativeSpec: 3240b9b8d792aa4be0fb85c9898fc183125ba8de
+  React-RCTImage: 34e0bba1507e55f1c614bd759eb91d9be48c8c5b
+  React-RCTLinking: a0b6c9f4871c18b0b81ea952f43e752718bd5f1d
+  React-RCTNetwork: bdafd661ac2b20d23b779e45bf7ac3e4c8bd1b60
+  React-RCTSettings: 98aa5163796f43789314787b584a84eba47787a9
+  React-RCTText: 424a274fc9015b29de89cf3cbcdf4dd85dd69f83
+  React-RCTVibration: 92d9875a955b0adb34b4b773528fdbbbc5addd6c
   React-rendererconsistency: 5ac4164ec18cfdd76ed5f864dbfdc56a5a948bc9
-  React-rendererdebug: 3dc1d97bbee0c0c13191e501a96ed9325bbd920e
+  React-rendererdebug: 710dbd7990e355852c786aa6bc7753f6028f357a
   React-rncore: 0bace3b991d8843bb5b57c5f2301ec6e9c94718b
-  React-RuntimeApple: 1e1e0a0c6086bc8c3b07e8f1a2f6ca99b50419a0
-  React-RuntimeCore: d39322c59bef2a4b343fda663d20649f29f57fcc
+  React-RuntimeApple: 701ec44a8b5d863ee9b6a2b2447b6a26bb6805a1
+  React-RuntimeCore: a82767065b9a936b05e209dc6987bc1ea9eb5d2d
   React-runtimeexecutor: 876dfc1d8daa819dfd039c40f78f277c5a3e66a6
-  React-RuntimeHermes: 44f5f2baf039f249b31ea4f3e224484fd1731e0e
-  React-runtimescheduler: 3b3c5b50743bb8743ca49b9e5a70c2c385f156e1
+  React-RuntimeHermes: e7a051fd91cab8849df56ac917022ef6064ad621
+  React-runtimescheduler: c544141f2124ee3d5f3d5bf0d69f4029a61a68b0
   React-timing: 1ee3572c398f5579c9df5bf76aacddf5683ff74e
-  React-utils: 0cfb7c7fb37d4e5f31cc18ffc7426be0ae6bf907
-  ReactAppDependencyProvider: b48473fe434569ff8f6cb6ed4421217ebcbda878
-  ReactCodegen: 653a0d8532d8c7dab50c391392044d98e20c9f79
-  ReactCommon: 547db015202a80a5b3e7e041586ea54c4a087180
-  RNCPicker: ffbd7b9fc7c1341929e61dbef6219f7860f57418
-  RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
-  RNSVG: 082ae2874b288a96c95326c4f6029793f7009d4b
+  React-utils: 18703928768cb37e70cf2efff09def12d74a399e
+  ReactAppDependencyProvider: 4893bde33952f997a323eb1a1ee87a72764018ff
+  ReactCodegen: da30aff1cea9b5993dcbc33bf1ef47a463c55194
+  ReactCommon: 865ebe76504a95e115b6229dd00a31e56d2d4bfe
+  RNCPicker: cfb51a08c6e10357d9a65832e791825b0747b483
+  RNScreens: 790123c4a28783d80a342ce42e8c7381bed62db1
+  RNSVG: 8ad5c94593e5e4a6e133e6934e2188e3c688d27a
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: e14bad835e12b6c7e2260fc320bd00e0f4b45add
 
 PODFILE CHECKSUM: d0574c1c0410627561bf4b1b55d0f1754283e022
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.17.0

benchmarks/metro.config.js

@@ -47,10 +47,28 @@ const config = {
                     )
             )
         ),
-        extraNodeModules: modules.reduce((acc, name) => {
-            acc[name] = path.join(__dirname, 'node_modules', name);
-            return acc;
-        }, {})
+        extraNodeModules: {
+            ...modules.reduce((acc, name) => {
+                acc[name] = path.join(__dirname, 'node_modules', name);
+                return acc;
+            }, {}),
+            // H4: alias configured directly in metro.config.js (rather than
+            // babel-plugin-module-resolver/tsconfig.json), exercising
+            // buildSvgMap's resolver.extraNodeModules alias path. Unscoped
+            // (no leading '@') so it matches for any subpath depth -- Metro's
+            // own parsing only splits a scoped key at a *second* slash, so
+            // e.g. '@metroAssets/star.svg' wouldn't match a key of just
+            // '@metroAssets' (see pathAliasResolver.ts).
+            //
+            // Points into @react-native/debugger-frontend (a real npm
+            // dependency, not a workspace symlink) for the same reason as
+            // the babel-plugin-module-resolver aliases above -- see
+            // babel.config.js.
+            metroAssets: path.join(
+                __dirname,
+                'node_modules/@react-native/debugger-frontend/dist/third-party/front_end/Images'
+            )
+        }
     },
 };
 

benchmarks/package.json

@@ -52,6 +52,7 @@
     "@react-native/typescript-config": "0.78.2",
     "@types/jest": "29.5.13",
     "@types/react-test-renderer": "19.0.0",
+    "babel-plugin-module-resolver": "5.0.2",
     "eslint": "8.19.0",
     "jest": "29.6.3",
     "prettier": "2.8.8",

benchmarks/src/scenario/SessionReplay/component/Svg.tsx

@@ -23,6 +23,20 @@ import {
 
 import StarSvg from './assets/star.svg';
 import { HeartIcon, ShieldIcon } from './assets/icons';
+// Aliased via the 'module-resolver' babel plugin (see benchmarks/babel.config.js) —
+// tests that buildSvgMap resolves aliased local SVG imports (RUM-12185).
+import AliasedStarSvg from '@assets/star.svg';
+// H2/H3/H4 alias into @react-native/debugger-frontend -- a real npm
+// dependency (not a workspace symlink), so the Babel plugin's node_modules
+// exclusion applies to it, meaning localSvgMap/pathAliasResolver is the
+// only thing that can make these show up wrapped in Session Replay (see
+// babel.config.js for why this matters).
+// H2: alias resolves straight to a file -- specifier has no '.svg' extension.
+import CheckmarkLogo from '@heart-logo';
+// H3: alias substitute is an absolute filesystem path.
+import AbsoluteAliasedLock from '@absoluteAssets/lock.svg';
+// H4: alias configured in metro.config.js's resolver.extraNodeModules.
+import MetroAliasedGear from 'metroAssets/gear-filled.svg';
 
 // Module-level const used in Case D1 to test findIdentifierInScope
 const BADGE_SIZE = 72;
@@ -340,6 +354,35 @@ function BarrelShieldImport() {
     return <ShieldIcon width={56} height={62} />;
 }
 
+// ─────────────────────────────────────────────────────────────
+// GROUP H — Aliased import (RUM-12185)
+// Same star.svg as F1, but imported via the '@assets' alias configured
+// through babel-plugin-module-resolver in babel.config.js.
+// ─────────────────────────────────────────────────────────────
+
+/** H1: Default import of a local .svg file via an aliased path */
+function AliasedStarImport() {
+    return <AliasedStarSvg width={64} height={64} />;
+}
+
+/** H2: Alias substitute maps straight to a file, so the specifier itself
+ *  ('@heart-logo') carries no '.svg' extension at all. */
+function AliasedExtensionlessImport() {
+    return <CheckmarkLogo width={40} height={40} />;
+}
+
+/** H3: Alias substitute is an absolute filesystem path rather than one
+ *  relative to the importing file. */
+function AbsoluteAliasImport() {
+    return <AbsoluteAliasedLock width={40} height={40} />;
+}
+
+/** H4: Alias configured in metro.config.js's resolver.extraNodeModules,
+ *  rather than via babel-plugin-module-resolver or tsconfig.json. */
+function MetroExtraNodeModulesImport() {
+    return <MetroAliasedGear width={40} height={40} />;
+}
+
 // ─────────────────────────────────────────────────────────────
 // GROUP I — Unsupported nested elements
 // AnimatedPath isn't a recognized SVG tag, so it's now spliced out of the tree
@@ -432,6 +475,7 @@ export default function SvgTestCases() {
                 Group E: known limitation — absent from replay entirely (see comment).{'\n'}
                 Group F: appears after buildSvgMap fixes.{'\n'}
                 Group G: privacy overrides — verify masking behavior in replay.{'\n'}
+                Group H: aliased imports — resolved via module-resolver, absolute-path, and metro.config.js aliases.{'\n'}
                 Group I: I1 shows circle only (checkmark removed), I2 shows circle + checkmark.
             </RNText>
 
@@ -522,6 +566,21 @@ export default function SvgTestCases() {
                 </Case>
             </Section>
 
+            <Section title="H — Aliased import (RUM-12185)">
+                <Case label="H1 module-resolver alias" sublabel="@assets/star.svg">
+                    <AliasedStarImport />
+                </Case>
+                <Case label="H2 extensionless alias" sublabel="@heart-logo → checkmark.svg (node_modules)">
+                    <AliasedExtensionlessImport />
+                </Case>
+                <Case label="H3 absolute-path alias" sublabel="@absoluteAssets/lock.svg (node_modules)">
+                    <AbsoluteAliasImport />
+                </Case>
+                <Case label="H4 metro.config.js alias" sublabel="metroAssets/gear-filled.svg (node_modules)">
+                    <MetroExtraNodeModulesImport />
+                </Case>
+            </Section>
+
             {/* ─── GROUP G — Privacy interaction ─── */}
             {/*
               These cases test whether the native SDK's view-level privacy mechanism

packages/react-native-babel-plugin/package.json

@@ -50,6 +50,7 @@
         "@babel/types": "^7.27.7",
         "fast-glob": "^3.3.3",
         "svgo": "^4.0.2",
+        "tsconfig-paths": "^4.2.0",
         "uuid": "^8.3.2"
     },
     "devDependencies": {
@@ -60,6 +61,7 @@
         "@swc/core": "^1.13.21",
         "@swc/jest": "^0.2.38",
         "@types/jest": "^30.0.0",
+        "babel-plugin-module-resolver": "5.0.2",
         "jest": "^29.7.0",
         "react-native-builder-bob": "0.26.0",
         "tsc-alias": "^1.8.16",