@dynatrace/react-native-plugin 2.289.1 → 2.291.2

package/README.md

@@ -31,8 +31,8 @@ If you want to start using this plugin and are not a Dynatrace customer yet, hea
 ## Agent Versions
 This agent versions are configured in this plugin:
 
-* Android Agent: 8.289.2.1007
-* iOS Agent: 8.289.1.1015
+* Android Agent: 8.291.1.1002
+* iOS Agent: 8.291.1.1004
 
 ## Quick Setup
 
@@ -57,7 +57,7 @@ This agent versions are configured in this plugin:
   * [Crash Reporting](#manually-report-a-crash)
   * [User Privacy Options](#user-privacy-options)
   * [Report GPS Position](#report-gps-location)
-  * [Business events capturing](#business-event-capturing)
+  * [Business event capturing](#business-event-capturing)
   * [Platform independent reporting](#platform-independent-reporting)
   * [Set beacon headers](#setting-beacon-headers)
   * [Exclude Individual JSX Elements](#exclude-individual-jsx-elements)
@@ -220,10 +220,10 @@ module.exports = {
 
 Example of a startup call:
 
-```js
+```ts
 import { Dynatrace, ConfigurationBuilder } from '@dynatrace/react-native-plugin';
 
-Dynatrace.start(new ConfigurationBuilder("beaconUrl", "applicationId").buildConfiguration());
+await Dynatrace.start(new ConfigurationBuilder("beaconUrl", "applicationId").buildConfiguration());
 ```
 
 For more details see the section about [startup API](#plugin-startup).
@@ -234,15 +234,17 @@ For more details see the section about [startup API](#plugin-startup).
 
 To use the API of the React Native plugin, import the API:
 
-```js
-import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
 ```
 
 ### Plugin startup
 
 The manual startup of the plugin is triggered via the `start(configuration: IConfiguration)` method. If you configured `dynatrace.config.js` for manual startup then the plugin doesn't send any data when not calling this function. Besides the application id and the beacon URL, there are several optional configuration parameters, which are shown in the table below. 
 
-```js
+```ts
+import { Dynatrace, ConfigurationBuilder, LogLevel } from '@dynatrace/react-native-plugin';
+
 const configurationBuilder = new ConfigurationBuilder("beaconUrl", "applicationId");
 
 configurationBuilder.withCrashReporting(true)
@@ -254,7 +256,7 @@ configurationBuilder.withCrashReporting(true)
   .withActionNamePrivacy(false)
   .withBundleName(undefined);
   
-Dynatrace.start(configurationBuilder.buildConfiguration());
+await Dynatrace.start(configurationBuilder.buildConfiguration());
 ```
 
 **Info**: The value used in the function calls for the parameters is also their default value.
@@ -268,7 +270,7 @@ Dynatrace.start(configurationBuilder.buildConfiguration());
 |reportFatalErrorAsCrash  |boolean |true         |Reports an unhandled fatal error as a crash or an error. |
 |logLevel                 |LogLevel|LogLevel.Info|Allows you to choose between `LogLevel.Info` and `LogLevel.Debug`. Debug returns more logs. This is especially important when something is not functioning correctly.|
 |lifecycleUpdate          |boolean |false        |Decide if you want to see update cycles on lifecycle actions as well. This is per default false as it creates a lot more actions.|
-|userOptIn                |boolean |false        |Activates the privacy mode when set to `true`. User consent must be queried and set. The privacy settings for [data collection](#data-collection) and [crash reporting](#crash-reporting) can be changed via  OneAgent SDK for Mobile as described under Data privacy. The default value is `false`.|
+|userOptIn                |boolean |false        |Activates the privacy mode when set to `true`. User consent must be queried and set. The privacy settings for [data collection](#user-privacy-options) and [crash reporting](#crash-reporting) can be changed via  OneAgent SDK for Mobile as described under Data privacy. The default value is `false`.|
 |actionNamePrivacy        |boolean |false        |Activates a privacy mode especially for Touchables and Buttons. Setting this option to true means that a name for the control will no longer be shown, e.g. "Touch on Button". When setting a dtActionName onto the component this setting will be ignored. 
 |bundleName               |string  |undefined    |Should be used only if you have a multiple bundle setup where you load several .bundle files within your React Native application. Enter the name of your bundle. This should be unique in comparison to your other bundle names. This will ensure that actions coming from different bundles will not interfere with each other.
 
@@ -282,13 +284,16 @@ A component can be either monitored automatically or manually. The auto instrume
 
 * Example with Functional Component:
 
-```js
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
 export function MyFunctionalComponent(){
   ...
 }
 
 Dynatrace.withMonitoring(MyFunctionalComponent, "MyFunctionalComponent");
 ```
+![rnFunctionalComp](https://dt-cdn.net/images/rnfunctionalcomp-800-d98eacef6d.png)
 
 The String "MyFunctionalComponent" is optional as the name of the component can be retrieved through [different properties](#how-does-dynatrace-determine-the-user-action-name).
 
@@ -300,24 +305,31 @@ There are two options to create an action. Either using `enterAutoAction` (the p
 
 * `enterAutoAction` - Creates an Action which will be automatically handled by the plugin (This is the type of action which is internally used by the plugin when monitoring components and touchables). This means that the plugin decides about the hierachy of this action. If there is no open action, the following action will be a root action. All other actions created by this method, while a root action is open, will be automatically inserted as a child action. Furthermore the plugin will automatically link webrequest (if they are not tagged manually) to the open root action.
 
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped");
 //Perform the action and whatever else is needed.
 myAction.leaveAction();
 ```
+![rnSingle](https://dt-cdn.net/images/rnsingle-800-e7e1b343ed.png)
 
 * `enterManualAction` - Creates an Action which will NOT be handled by the plugin. This means that you have full control about the hierachy of your actions. This function will create a root action for you, which has the ability to create child actions via `enterAction`. Be aware, because of the full manual approach the plugin will not link webrequest automatically. Webrequest have to be manually tagged by using the tag provided by the action via `getRequestTag`.
 
-```js
-let myAction = Dynatrace.enterManualAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterManualAction("MyButton tapped");
 //Perform the action and whatever else is needed.
 myAction.leaveAction();
 ```
 
 To create a custom action named `"MyButton tapped"`, use the following code. The *leaveAction* closes the action again. To report values for this action before closing, see [Report Values](#report-values).
 
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped");
 //Perform the action and whatever else is needed.
 myAction.leaveAction();
 ```
@@ -326,20 +338,25 @@ myAction.leaveAction();
 
 You can create a single custom action as well as sub actions. The `MyButton Sub Action` is automatically put under the `MyButton tapped`. As long as `MyButton tapped` is open, it gathers all the web requests.
 
-```js
-let myAction = Dynatrace.enterManualAction("MyButton tapped");
-let mySubAction = myAction.enterAction("MyButton Sub Action");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterManualAction("MyButton tapped");
+const mySubAction = myAction.enterAction("MyButton Sub Action");
 //Perform the action and whatever else is needed.
 mySubAction.leaveAction();
 myAction.leaveAction();
 ```
+![subAction](https://dt-cdn.net/images/subaction-800-172dbcca6c.png)
 
 ### Cancel actions
 
 Actions can be canceled. That means they will not be sent and discarded fully. This also means that any values and sub actions attached to the action will be removed. 
 
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped");
 // Action will be canceled
 myAction.cancel();
 
@@ -354,7 +371,9 @@ You can manually tag and time your web requests. With the API shown below, you a
 **Note:** 
 Using this API will force the request to be added to the action that is manually created. 
 
-```js
+```ts
+import { Dynatrace, DynatraceWebRequestTiming } from '@dynatrace/react-native-plugin';
+
 let url = 'https://www.dynatrace.com';
 // You can also use enterAutoAction if desired
 let action = Dynatrace.enterManualAction("Manual Web Request");
@@ -375,10 +394,13 @@ try {
   action.leaveAction();
 }
 ```
+![rnManualWeb](https://dt-cdn.net/images/rnmanualweb-800-662d009613.png)
 
 There is also the option to report values for request and response size:
 
-```js
+```ts
+import { Dynatrace, DynatraceWebRequestTiming } from '@dynatrace/react-native-plugin';
+
 let url = 'https://www.dynatrace.com';
 // You can also use enterAutoAction if desired
 let action = Dynatrace.enterManualAction("Manual Web Request");
@@ -387,7 +409,11 @@ let timing = new DynatraceWebRequestTiming(url, tag);
 
 try {      
   timing.startWebRequestTiming();
-  let axiosResponse = await axios.get(url);
+  let axiosResponse = await axios.get(url, {
+    headers: {
+        timing.getRequestTagHeader(): tag
+    }
+  });
   timing.stopWebRequestTimingWithSize(axiosResponse.status, axiosResponse.data, 122, 63);
 } catch (error) {
   timing.stopWebRequestTiming(-1, error);
@@ -395,6 +421,7 @@ try {
   action.leaveAction();
 }
 ```
+![rnBytes](https://dt-cdn.net/images/rnbytes-800-139042060c.png)
 
 ### Report values
 
@@ -410,11 +437,14 @@ reportStringValue(valueName: string, value: string, platform?: Platform): void
 
 To report a string value, use the following:
 
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped");
 myAction.reportStringValue("ValueName", "ImportantValue");
 myAction.leaveAction();
 ```
+![rnReportString](https://dt-cdn.net/images/rnreportstring-800-739e5ba752.png)
 
 If you look at the API calls, you will see the optional parameter `platform?: Platform`. This parameter offers the possibility to report values only for a specific platform. to know more, see [Platform independent reporting](#platform-independent-reporting).
 
@@ -426,6 +456,7 @@ To manually report an error stacktrace, use the following API call:
 ```ts
 reportErrorStacktrace(errorName: string, errorValue: string, reason: string, stacktrace: string, platform?: Platform): void;
 ```
+![rnStack](https://dt-cdn.net/images/rnstack-800-26c6ac7408.png)
 
 **Note:**
 The previous API without *errorValue* is deprecated and will be removed in the future. Please use the new API with errorValue if possible.
@@ -434,15 +465,20 @@ The previous API without *errorValue* is deprecated and will be removed in the f
 
 You can identify a user and tag the current session with a name by making the following call:
 
-```js
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
 Dynatrace.identifyUser("User XY");
 ```
+![rnTag](https://dt-cdn.net/images/rntag-800-77fe848023.png)
 
 ### End the current user session
 
 To end the current user session, use the following API call:
 
-```js
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
 Dynatrace.endSession();
 ```
 
@@ -456,6 +492,7 @@ You can manually report a crash via the following API call:
 reportCrash(crashName: string, reason: string, stacktrace: string, platform?: Platform): void;
 reportCrashWithException(crashName: string, crash: Error, platform?: Platform): void;
 ```
+![rnCrash](https://dt-cdn.net/images/rncrash-800-3e7391140f.png)
 
 > **Note**: If you use this API call to report a crash manually, it will force the session to be completed. Any new actions that are captured afterwards will be added into a new session.
 
@@ -487,12 +524,16 @@ applyUserPrivacyOptions(userPrivacyOptions: UserPrivacyOptions, platform?: Platf
 To check the current privacy options that are set:
 
 ```ts
-let privacyOptions = await Dynatrace.getUserPrivacyOptions();
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const privacyOptions = await Dynatrace.getUserPrivacyOptions();
 ```
 
 If you want to create a new `UserPrivacyOptions` object:
 
 ```ts
+import { DataCollectionLevel, UserPrivacyOptions } from '@dynatrace/react-native-plugin';
+
 let privacyConfig = new UserPrivacyOptions(DataCollectionLevel.UserBehavior, true);
 ```
 
@@ -513,6 +554,8 @@ let crashReporting = privacyConfig.crashReportingOptedIn;
 To apply the values that were set on the object:
 
 ```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
 Dynatrace.applyUserPrivacyOptions(privacyConfig);
 ```
 
@@ -528,33 +571,41 @@ setGPSLocation(latitude: number, longitude: number, platform?: Platform): void
 
 You probably noticed that each method has an additional *optional* parameter named `platform` of type `Platform`. You can use this to only trigger manual instrumentation for a specific OS. The available values are: `Platform.Ios` and `Platform.Android`. Default is that it will work on any platform. Otherwise it is passed *only* to the relevant OS. For example:
  * Passing to **iOS** only:
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped", Platform.Ios);
+```ts
+import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped", Platform.Ios);
 //Perform the action and whatever else is needed.
 myAction.leaveAction("ios"); 
 ```
  
  * Passing to **Android** only:
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped", Platform.Android);
+```ts
+import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped", Platform.Android);
 //Perform the action and whatever else is needed.
 myAction.leaveAction("android"); 
 ```
  
  * Passing to **both**:
-```js
-let myAction = Dynatrace.enterAutoAction("MyButton tapped");
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
+const myAction = Dynatrace.enterAutoAction("MyButton tapped");
 //Perform the action and whatever else is needed.
 myAction.leaveAction(); 
 ```
 
-### Business events capturing
+### Business event capturing
 
 With `sendBizEvent`, you can report business events. These events are standalone events, as OneAgent sends them detached from user actions or user sessions.
 
 For more information on business events, see [dynatrace documentation](https://www.dynatrace.com/support/help/how-to-use-dynatrace/business-analytics/ba-events-capturing#expand--example-configuration-files-for-rum--2).
 
-```dart
+```ts
+import { Dynatrace } from '@dynatrace/react-native-plugin';
+
 Dynatrace.sendBizEvent("com.easytravel.funnel.booking-finished", {
   "event.name" : "Confirmed Booking",
   "screen": "booking-confirmation",
@@ -569,6 +620,7 @@ Dynatrace.sendBizEvent("com.easytravel.funnel.booking-finished", {
   "childrenTravelers": 0
 });
 ```
+![rnBiz](https://dt-cdn.net/images/rnbiz-1262-f57a0a67f3.png)
 
 ### Setting beacon headers
 
@@ -576,7 +628,7 @@ This allows you to put a set of http headers on every agent http request (i.e. A
 
 **Note:** To clear the previously set headers, call the method without the headers parameter or with a null value for the headers parameter.
 
-```js
+```ts
 setBeaconHeaders(headers?: Map<string, string> | null, platform?: Platform): void;
 ```
 
@@ -584,7 +636,7 @@ setBeaconHeaders(headers?: Map<string, string> | null, platform?: Platform): voi
 
 If you want to instrument a functional component or class component but want to exclude a certain button or element, you can do this via the `dtActionIgnore` property. Example:
 
-```js
+```ts
 function TouchableHighlightScreen() {
     return (
         <View>
@@ -955,7 +1007,7 @@ The variable ${APPLICATION_ID} must then be inserted with a prebuild script. Mak
 
 ## User opt-in mode
 
-Specifies if the user has to opt-in for being monitored. When enabled, you must specify the privacy setting. For more information, see the [API section](#data-collection).
+Specifies if the user has to opt-in for being monitored. When enabled, you must specify the privacy setting. For more information, see the [API section](#user-privacy-options).
 
 ### Android
 
@@ -1362,8 +1414,10 @@ If you are struggling with a problem, submit a support ticket to Dynatrace (supp
 <br/><br/>
 ## Changelog
 
-latest
+2.291.2
+* Update Android (8.291.1.1002) & iOS Agent (8.291.1.1004)
 * Updated the way we report unhandled errors without a stacktrace
+* Touchable instrumentation was partly broken for static access
 
 2.289.1
 * Update Android (8.289.2.1007) & iOS Agent (8.289.1.1015)
@@ -1514,7 +1568,7 @@ latest
 * Fixed transformation problems with TSImportType and JSX
 * Updated error handler to report crashes instead of error stacktraces
 * Added [setBeaconHeaders API](#setting-beacon-headers)
-* Added [UserPrivacyOptions API](#data-collection)
+* Added [UserPrivacyOptions API](#user-privacy-options)
 * Updated DataCollection level enum members to match native agents
 
 1.202.0

package/android/build.gradle

@@ -70,7 +70,7 @@ repositories {
 }
 
 dependencies {
-	implementation 'com.dynatrace.agent:agent-android:8.289.2.1007'
+	implementation 'com.dynatrace.agent:agent-android:8.291.1.1002'
     implementation "com.facebook.react:react-native:${safeExtGet('reactNative', '+')}"
 }
   

package/files/plugin.gradle

@@ -1,3 +1,3 @@
 dependencies {
-	classpath 'com.dynatrace.tools.android:gradle-plugin:8.289.2.1007'
+	classpath 'com.dynatrace.tools.android:gradle-plugin:8.291.1.1002'
 }

package/lib/instrumentor/base/Dynatrace.js

@@ -27,7 +27,7 @@ exports.Dynatrace = {
     start: (configuration) => __awaiter(void 0, void 0, void 0, function* () {
         if (!ConfigurationHandler_1.ConfigurationHandler.isConfigurationAvailable()) {
             if (configuration !== undefined) {
-                DynatraceBridge_1.DynatraceNative.start(configuration);
+                yield DynatraceBridge_1.DynatraceNative.start(configuration);
                 if (configuration.errorHandler) {
                     (0, ErrorHandler_1.registerErrorHandler)(configuration.reportFatalErrorAsCrash);
                 }

package/lib/react-native/Touchables.js

@@ -1,4 +1,5 @@
 "use strict";
+var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pressable = exports.Text = exports.TouchableWithoutFeedback = exports.TouchableNativeFeedback = exports.TouchableHighlight = exports.TouchableOpacity = exports.Button = void 0;
 const ReactNative = require("react-native");
@@ -6,12 +7,33 @@ const React = require("react");
 const Types_1 = require("../instrumentor/model/Types");
 exports.Button = React.forwardRef((props, ref) => React.createElement(ReactNative.Button, Object.assign({}, props, { ref: ref })));
 exports.Button._dtInfo = { type: Types_1.Types.Button };
-exports.TouchableOpacity = React.forwardRef((props, ref) => React.createElement(ReactNative.TouchableOpacity, Object.assign({}, props, { ref: ref })));
-exports.TouchableOpacity._dtInfo = { type: Types_1.Types.TouchableOpacity };
-exports.TouchableHighlight = React.forwardRef((props, ref) => React.createElement(ReactNative.TouchableHighlight, Object.assign({}, props, { ref: ref })));
-exports.TouchableHighlight._dtInfo = { type: Types_1.Types.TouchableHighlight };
-exports.TouchableNativeFeedback = React.forwardRef((props, ref) => React.createElement(ReactNative.TouchableNativeFeedback, Object.assign({}, props, { ref: ref })));
-exports.TouchableNativeFeedback._dtInfo = { type: Types_1.Types.TouchableNativeFeedback };
+if (typeof ReactNative.TouchableOpacity === 'object') {
+    exports.TouchableOpacity = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableOpacity } }, ReactNative.TouchableOpacity);
+}
+else {
+    exports.TouchableOpacity = (_a = class TouchableOpacity extends (ReactNative.TouchableOpacity) {
+        },
+        _a._dtInfo = { type: Types_1.Types.TouchableOpacity },
+        _a);
+}
+if (typeof ReactNative.TouchableHighlight === 'object') {
+    exports.TouchableHighlight = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableHighlight } }, ReactNative.TouchableHighlight);
+}
+else {
+    exports.TouchableHighlight = (_b = class TouchableHighlight extends (ReactNative.TouchableHighlight) {
+        },
+        _b._dtInfo = { type: Types_1.Types.TouchableHighlight },
+        _b);
+}
+if (typeof ReactNative.TouchableNativeFeedback === 'object') {
+    exports.TouchableNativeFeedback = Object.assign({ _dtInfo: { type: Types_1.Types.TouchableNativeFeedback } }, ReactNative.TouchableNativeFeedback);
+}
+else {
+    exports.TouchableNativeFeedback = (_c = class TouchableNativeFeedback extends (ReactNative.TouchableNativeFeedback) {
+        },
+        _c._dtInfo = { type: Types_1.Types.TouchableNativeFeedback },
+        _c);
+}
 exports.TouchableWithoutFeedback = React.forwardRef((props, ref) => React.createElement(ReactNative.TouchableWithoutFeedback, Object.assign({}, props, { ref: ref })));
 exports.TouchableWithoutFeedback._dtInfo = { type: Types_1.Types.TouchableWithoutFeedback };
 exports.Text = React.forwardRef((props, ref) => React.createElement(ReactNative.Text, Object.assign({}, props, { ref: ref })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dynatrace/react-native-plugin",
-    "version": "2.289.1",
+    "version": "2.291.2",
     "description": "This plugin gives you the ability to use the Dynatrace Mobile agent in your react native application.",
     "main": "index.js",
     "types": "typings/react-native-dynatrace.d.ts",
@@ -71,11 +71,11 @@
     "author": "Dynatrace",
     "license": "SEE LICENSE IN LICENSE.md",
     "dependencies": {
-        "@babel/runtime": "^7.24.4",
+        "@babel/runtime": "^7.24.5",
         "jscodeshift": "^0.15.2",
         "plist": "^3.1.0",
         "proxy-polyfill": "^0.3.2",
-        "semver": "^7.6.0"
+        "semver": "^7.6.2"
     },
     "homepage": "https://www.dynatrace.com/",
     "peerDependencies": {
@@ -85,7 +85,7 @@
         "react-native": ">=0.62.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.22.9",
+        "@babel/cli": "^7.24.5",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",

package/react-native-dynatrace.podspec

@@ -111,7 +111,7 @@ Pod::Spec.new do |s|
   #
   
   s.dependency "React"
-  s.dependency 'Dynatrace', '~> 8.289.1.1015'
+  s.dependency 'Dynatrace', '~> 8.291.1.1004'
 
   # Allows for better compatibility for older and newer versions
   if defined?(install_modules_dependencies)