@dynatrace/react-native-plugin 2.333.1 → 2.335.1

package/instrumentation/libs/UserInteraction.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RootWrapper = exports.wrapProvider = exports.notifyPress = void 0;
+const React = require("react");
+const react_native_1 = require("react-native");
+const ConfigurationHandler_1 = require("../../lib/core/configuration/ConfigurationHandler");
+const EventPipeline_1 = require("../../lib/next/events/EventPipeline");
+const TOUCH_FLUSH_DELAY = 250;
+let pendingTouch = null;
+const getFiberPath = (fiber) => {
+    var _a, _b, _c;
+    let anyParentMasked = false;
+    let path = [];
+    let lastDtName;
+    while (fiber != null) {
+        const dtInfoName = (_a = fiber.type) === null || _a === void 0 ? void 0 : _a.dtName;
+        const dtName = (_b = fiber.memoizedProps) === null || _b === void 0 ? void 0 : _b.dtName;
+        const effectiveName = dtName !== null && dtName !== void 0 ? dtName : dtInfoName;
+        if (effectiveName && effectiveName !== lastDtName) {
+            path = [effectiveName, ...path];
+            lastDtName = effectiveName;
+        }
+        anyParentMasked =
+            anyParentMasked || ((_c = fiber.memoizedProps) === null || _c === void 0 ? void 0 : _c.dtMask) == true;
+        fiber = fiber.return;
+    }
+    return { path, anyParentMasked };
+};
+const flatten = (children) => Array.isArray(children) ? children.map(String).join('') : String(children);
+function findRCTTextChild(fiber) {
+    let node = fiber.child;
+    while (node) {
+        if (node.type === 'RCTText') {
+            return node;
+        }
+        const found = findRCTTextChild(node);
+        if (found)
+            return found;
+        node = node.sibling;
+    }
+    return null;
+}
+const getHostComponentInfo = (event) => {
+    var _a, _b;
+    let fiber = event._targetInst;
+    if (!fiber) {
+        console.warn('Assumption violated: _targetInst not found');
+        return undefined;
+    }
+    if (fiber.type === 'RNGestureHandlerButton') {
+        fiber = (_a = findRCTTextChild(fiber)) !== null && _a !== void 0 ? _a : fiber;
+    }
+    if (typeof fiber.type !== 'string') {
+        console.warn('Assumption violated: leaf fiber not a host component');
+        return undefined;
+    }
+    const { path, anyParentMasked } = getFiberPath(fiber);
+    const id = path.join('/');
+    const leaf = path[path.length - 1];
+    const components = [leaf];
+    const { nameOrigin, detectedName } = fiber.type !== 'RCTText'
+        ? {
+            nameOrigin: 'component',
+            detectedName: (_b = fiber.memoizedProps.accessibilityLabel) !== null && _b !== void 0 ? _b : leaf,
+        }
+        : anyParentMasked
+            ? {
+                nameOrigin: 'masked',
+                detectedName: '***',
+            }
+            : {
+                nameOrigin: 'text',
+                detectedName: flatten(fiber.memoizedProps.children),
+            };
+    return { id, components, detectedName, nameOrigin };
+};
+const flushTouch = (responderComponentInfo) => {
+    if (!pendingTouch)
+        return;
+    const { touchedComponentInfo, positions, timeoutId } = pendingTouch;
+    clearTimeout(timeoutId);
+    pendingTouch = null;
+    const event = Object.assign({ 'characteristics.has_user_interaction': true, 'ui_element.detected_name': touchedComponentInfo.detectedName, 'ui_element.components': touchedComponentInfo.components, 'ui_element.id': touchedComponentInfo.id, 'interaction.type': 'touch', positions, 'ui_element.name_origin': touchedComponentInfo.nameOrigin }, (responderComponentInfo && {
+        'ui_element.responder.detected_name': responderComponentInfo.detectedName,
+        'ui_element.responder.components': responderComponentInfo.components,
+        'ui_element.responder.id': responderComponentInfo.id,
+        'ui_element.responder.name_origin': responderComponentInfo.nameOrigin,
+    }));
+    EventPipeline_1.EventPipeline.insertEvent(event);
+};
+const onTouch = (e) => {
+    if (!ConfigurationHandler_1.ConfigurationHandler.isUserInteractionEnabled())
+        return;
+    flushTouch();
+    const touchedComponentInfo = getHostComponentInfo(e);
+    if (!touchedComponentInfo)
+        return;
+    const { pageX, pageY } = e.nativeEvent;
+    const positions = [{ x: Math.trunc(pageX), y: Math.trunc(pageY) }];
+    const timeoutId = setTimeout(flushTouch, TOUCH_FLUSH_DELAY);
+    pendingTouch = { touchedComponentInfo, positions, timeoutId };
+};
+const notifyPress = (event) => flushTouch(getHostComponentInfo(event));
+exports.notifyPress = notifyPress;
+const wrapProvider = (originalProvider) => () => {
+    const Original = originalProvider();
+    return function DtRootWrapped(props) {
+        return (React.createElement(exports.RootWrapper, null,
+            React.createElement(Original, Object.assign({}, props))));
+    };
+};
+exports.wrapProvider = wrapProvider;
+const RootWrapper = ({ children }) => (React.createElement(react_native_1.View, { pointerEvents: "box-none", collapsable: false, style: { flex: 1 }, onTouchStart: onTouch }, children));
+exports.RootWrapper = RootWrapper;

package/instrumentation/libs/community/gesture-handler/Touchables.InstrInfo.js

@@ -21,3 +21,5 @@ exports.instrumentationInfo.push(generateInstrumentation('TouchableOpacity'));
 exports.instrumentationInfo.push(generateInstrumentation('TouchableNativeFeedback'));
 exports.instrumentationInfo.push(generateInstrumentation('TouchableWithoutFeedback'));
 exports.instrumentationInfo.push(generateInstrumentation('RectButton'));
+exports.instrumentationInfo.push(generateInstrumentation('BorderlessButton'));
+exports.instrumentationInfo.push(generateInstrumentation('BaseButton'));

package/instrumentation/libs/community/gesture-handler/Touchables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RectButton = exports.TouchableWithoutFeedback = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.TouchableOpacity = void 0;
+exports.BaseButton = exports.BorderlessButton = exports.RectButton = exports.TouchableWithoutFeedback = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.TouchableOpacity = void 0;
 const GestureHandler = require("react-native-gesture-handler");
 const withOnPressMonitoring_1 = require("../../withOnPressMonitoring");
 exports.TouchableOpacity = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableOpacity, 'Touchable');
@@ -8,3 +8,5 @@ exports.TouchableHighlight = (0, withOnPressMonitoring_1.withOnPressMonitoring)(
 exports.TouchableNativeFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableNativeFeedback, 'Touchable');
 exports.TouchableWithoutFeedback = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.TouchableWithoutFeedback, 'Touchable');
 exports.RectButton = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.RectButton, 'Button');
+exports.BorderlessButton = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.BorderlessButton, 'Button');
+exports.BaseButton = (0, withOnPressMonitoring_1.withOnPressMonitoring)(GestureHandler.BaseButton, 'Button');

package/instrumentation/libs/community/gesture-handler/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RectButton = exports.TouchableWithoutFeedback = exports.TouchableOpacity = exports.TouchableNativeFeedback = exports.TouchableHighlight = void 0;
+exports.BaseButton = exports.BorderlessButton = exports.RectButton = exports.TouchableWithoutFeedback = exports.TouchableOpacity = exports.TouchableNativeFeedback = exports.TouchableHighlight = void 0;
 var Touchables_1 = require("./Touchables");
 Object.defineProperty(exports, "TouchableHighlight", { enumerable: true, get: function () { return Touchables_1.TouchableHighlight; } });
 Object.defineProperty(exports, "TouchableNativeFeedback", { enumerable: true, get: function () { return Touchables_1.TouchableNativeFeedback; } });
 Object.defineProperty(exports, "TouchableOpacity", { enumerable: true, get: function () { return Touchables_1.TouchableOpacity; } });
 Object.defineProperty(exports, "TouchableWithoutFeedback", { enumerable: true, get: function () { return Touchables_1.TouchableWithoutFeedback; } });
 Object.defineProperty(exports, "RectButton", { enumerable: true, get: function () { return Touchables_1.RectButton; } });
+Object.defineProperty(exports, "BorderlessButton", { enumerable: true, get: function () { return Touchables_1.BorderlessButton; } });
+Object.defineProperty(exports, "BaseButton", { enumerable: true, get: function () { return Touchables_1.BaseButton; } });

package/instrumentation/libs/withOnPressMonitoring.js

@@ -7,6 +7,7 @@ const ConsoleLogger_1 = require("../../lib/core/logging/ConsoleLogger");
 const ConfigurationHandler_1 = require("../../lib/core/configuration/ConfigurationHandler");
 const Dynatrace_1 = require("../../lib/core/Dynatrace");
 const ComponentUtil_1 = require("../jsx/components/ComponentUtil");
+const UserInteraction_1 = require("./UserInteraction");
 const Logger = new ConsoleLogger_1.ConsoleLogger('TouchableHelper');
 function withOnPressMonitoring(Component, fallbackName) {
     return React.forwardRef((props, ref) => {
@@ -73,6 +74,11 @@ const wrapOnPress = (onPress, touchableName, isButtonLike, buttonLabel) => {
                 Logger.debug(`registerPress bridge hook failed: ${errorMsg}`);
             }
         }
+        if (args[0] &&
+            typeof args[0] === 'object' &&
+            'nativeEvent' in args[0]) {
+            (0, UserInteraction_1.notifyPress)(args[0]);
+        }
         if (!ConfigurationHandler_1.ConfigurationHandler.isConfigurationAvailable()) {
             Logger.info('React Native plugin has not been started yet! Touch will not be reported!');
             onPress(...args);

package/lib/dynatrace-reporter.js

@@ -9,7 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const child_process_1 = require("child_process");
 const TerminalReporter = (() => {
     try {
         return require('metro/src/lib/TerminalReporter');
@@ -24,19 +23,6 @@ const paths = require('../scripts/PathsConstants');
 const reporter = new TerminalReporter(new Terminal(process.stdout));
 const updateOrig = TerminalReporter.prototype.update;
 TerminalReporter.prototype.update = function update(event) {
-    if ((event === null || event === void 0 ? void 0 : event.type) === 'bundle_build_done') {
-        (0, child_process_1.exec)('npx lineOffsetDynatrace env prod', (error, stdout, stderr) => {
-            if (error) {
-                console.error(`Error: ${error.message}`);
-                return;
-            }
-            if (stderr) {
-                console.error(`stderr: ${stderr}`);
-                return;
-            }
-            console.log(`${stdout}`);
-        });
-    }
     return updateOrig === null || updateOrig === void 0 ? void 0 : updateOrig.apply(this, arguments);
 };
 const update = (event) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/dynatrace-transformer.js

@@ -1,24 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getUpstreamTransformer = exports.transform = void 0;
-const nodePath = require("path");
-const PathsConstants_1 = require("../scripts/PathsConstants");
 const config = require("../scripts/Config");
 const Logger_1 = require("../scripts/Logger");
-const CustomArgumentUtil_1 = require("../scripts/util/CustomArgumentUtil");
+const BabelPluginDynatrace_1 = require("../instrumentation/BabelPluginDynatrace");
 const instrumentor = require("../instrumentation/DynatraceInstrumentation");
-const customArguments = (0, CustomArgumentUtil_1.readCustomArguments)();
-const transform = (src, filename, options) => {
-    if (typeof src === 'object') {
-        ({ src, filename, options } = src);
-    }
+const Config_1 = require("../scripts/Config");
+const transform = (args) => {
+    var _a;
+    let src = args.src;
+    const { filename, options } = args;
     let reactOptions;
     try {
-        if (customArguments.isCustomConfigurationPathSet()) {
-            reactOptions = config.readConfig(nodePath.join(PathsConstants_1.default.getApplicationPath(), customArguments.getCustomConfigurationPath()));
-        }
-        else {
-            reactOptions = config.readConfig(nodePath.join(PathsConstants_1.default.getConfigFilePath()));
+        reactOptions = (0, Config_1.readConfigDefault)();
+        if (!reactOptions.react.useLegacyJscodeshift) {
+            args.plugins = [BabelPluginDynatrace_1.default, ...((_a = args.plugins) !== null && _a !== void 0 ? _a : [])];
+            return (0, exports.getUpstreamTransformer)(reactOptions === null || reactOptions === void 0 ? void 0 : reactOptions.react).transform(args);
         }
         src = instrumentor.instrument(src, filename, reactOptions.react);
     }

package/lib/features/ui-interaction/Config.js

@@ -7,12 +7,18 @@ exports.DEFAULT_DT_CONFIG = {
     artifactsDir: Types_1.Literals.DefaultArtifactsDir,
     runtimeImport: Types_1.Literals.DefaultRuntimeImport,
     componentNames: {
-        segment: Types_1.Literals.DefaultSegmentName,
-        tabButton: Types_1.Literals.DefaultTabButtonName,
         root: Types_1.Literals.DefaultRootName,
     },
     ui: {
         skipTags: ['NavigationContainer'],
+        pathId: {
+            enabled: true,
+            propName: 'dtPathID',
+            uiRootPropName: 'dtUIRoot',
+            injectUiRoot: false,
+            skipProviderTags: true,
+            blacklist: ['AnalyticsRoot', 'Stack', 'React.Fragment', 'Fragment'],
+        },
     },
 };
 const getDTConfig = () => exports.DEFAULT_DT_CONFIG;

package/lib/features/ui-interaction/Plugin.Fragment.Test.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsc = require("jscodeshift");
+const Plugin_1 = require("./Plugin");
+const j = jsc.withParser('tsx');
+const runPlugin = (src, filename = 'FragmentCase.tsx') => {
+    const root = j(src);
+    const out = (0, Plugin_1.applyDTPathIdInstrumentation)(root, filename);
+    return out.root.toSource({ quote: 'single' });
+};
+describe('UI interaction Fragment blacklist', () => {
+    it('does not inject dtUIRoot by default', () => {
+        const code = runPlugin(`
+            import React from 'react';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <View>
+                        <Text>Hello</Text>
+                    </View>
+                );
+            }
+        `);
+        expect(code).toContain('<View dtPathID=');
+        expect(code).not.toContain('dtUIRoot');
+    });
+    it('does not instrument React.Fragment', () => {
+        const code = runPlugin(`
+            import React from 'react';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <View>
+                        <React.Fragment>
+                            <Text>Hello</Text>
+                        </React.Fragment>
+                    </View>
+                );
+            }
+        `);
+        expect(code).toContain('<React.Fragment>');
+        expect(code).not.toContain('<React.Fragment dtPathID=');
+        expect(code).toContain('<View dtPathID=');
+        expect(code).toContain('<Text dtPathID=');
+    });
+    it('does not instrument imported Fragment', () => {
+        const code = runPlugin(`
+            import React, { Fragment } from 'react';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <View>
+                        <Fragment>
+                            <Text>Hello</Text>
+                        </Fragment>
+                    </View>
+                );
+            }
+        `);
+        expect(code).toContain('<Fragment>');
+        expect(code).not.toContain('<Fragment dtPathID=');
+        expect(code).toContain('<View dtPathID=');
+        expect(code).toContain('<Text dtPathID=');
+    });
+    it('does not instrument aliased Fragment imports', () => {
+        const code = runPlugin(`
+            import React, { Fragment as F } from 'react';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <View>
+                        <F>
+                            <Text>Hello</Text>
+                        </F>
+                    </View>
+                );
+            }
+        `);
+        expect(code).toContain('<F>');
+        expect(code).not.toContain('<F dtPathID=');
+        expect(code).toContain('<View dtPathID=');
+        expect(code).toContain('<Text dtPathID=');
+    });
+    it('does not instrument empty fragment tags', () => {
+        const code = runPlugin(`
+            import React from 'react';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <>
+                        <View>
+                            <Text>Hello</Text>
+                        </View>
+                    </>
+                );
+            }
+        `);
+        expect(code).toContain('<>');
+        expect(code).toContain('<View dtPathID=');
+        expect(code).toContain('<Text dtPathID=');
+    });
+    it('removes existing dtPathID from React.Fragment JSX', () => {
+        const code = runPlugin(`
+            import React from 'react';
+            export default function Screen() {
+                return <React.Fragment dtPathID='bad'>Hello</React.Fragment>;
+            }
+        `);
+        expect(code).toContain('<React.Fragment>');
+        expect(code).not.toContain('dtPathID=');
+    });
+    it('removes dtPathID from transpiled jsx Fragment call', () => {
+        const code = runPlugin(`
+            import { Fragment as _Fragment, jsx as _jsx } from 'react/jsx-runtime';
+            export default function Screen() {
+                return _jsx(_Fragment, { dtPathID: 'bad', children: 'Hello' });
+            }
+        `);
+        expect(code).toContain('_jsx(_Fragment');
+        expect(code).not.toContain('dtPathID');
+    });
+    it('removes dtPathID from transpiled jsxDEV Fragment call', () => {
+        const code = runPlugin(`
+            import { Fragment as _Fragment, jsxDEV as _jsxDEV } from 'react/jsx-dev-runtime';
+            export default function Screen() {
+                return _jsxDEV(_Fragment, { dtPathID: 'bad', children: 'Hello' }, void 0, false, void 0, this);
+            }
+        `);
+        expect(code).toContain('_jsxDEV(_Fragment');
+        expect(code).not.toContain('dtPathID');
+    });
+    it('does not instrument Stack elements', () => {
+        const code = runPlugin(`
+            import React from 'react';
+            import { Stack } from 'expo-router';
+            import { View, Text } from 'react-native';
+
+            export default function Screen() {
+                return (
+                    <View>
+                        <Stack>
+                            <Text>Hello</Text>
+                        </Stack>
+                    </View>
+                );
+            }
+        `);
+        expect(code).toContain('<Stack>');
+        expect(code).not.toContain('<Stack dtPathID=');
+        expect(code).toContain('<View dtPathID=');
+        expect(code).toContain('<Text dtPathID=');
+    });
+    it('skips instrumentation for Expo package files', () => {
+        const src = `
+            import React from 'react';
+            import { View, Text } from 'react-native';
+            export default function Screen() {
+                return <View><Text>Hello</Text></View>;
+            }
+        `;
+        const code = runPlugin(src, 'node_modules/expo-router/build/qualified-entry.js');
+        expect(code).toEqual(j(src).toSource({ quote: 'single' }));
+        expect(code).not.toContain('dtPathID');
+    });
+});