@datadog/mobile-react-native-session-replay 2.6.1 → 2.6.3

package/README.md

@@ -4,7 +4,7 @@ Mobile Session Replay expands visibility into your mobile applications by visual
 
 ## Setup
 
-**Note:** Make sure you’ve setup and initialized the [Datadog React Native SDK][1] with views instrumentation enabled.
+**Note**: Make sure you’ve setup and initialized the [Datadog React Native SDK][1] with views instrumentation enabled.
 
 To install with NPM, run:
 
@@ -26,14 +26,14 @@ To enable Session Replay, import and call the `enable` method with your configur
 import { SessionReplay } from "@datadog/mobile-react-native-session-replay";
 
 SessionReplay.enable({
-    replaySampleRate: sampleRate // The percentage of sampled replays, in the range 0.0 - 100.0 (Default: 100.0).
+    replaySampleRate: sampleRate, // The percentage of sampled replays, in the range 0.0 - 100.0 (Default: 100.0).
     textAndInputPrivacyLevel: TextAndInputPrivacyLevel.MASK_ALL, // Defines the way text and input (e.g text fields, checkboxes) should be masked (Default: `MASK_ALL`).
     imagePrivacyLevel: ImagePrivacyLevel.MASK_ALL, // Defines the way images should be masked (Default: `MASK_ALL`).
     touchPrivacyLevel: TouchPrivacyLevel.HIDE  // Defines the way user touches (e.g tap) should be masked (Default: `HIDE`).
 });
 ```
 
-**Note:**: All configuration properties are optional and should be adjusted based on your application's needs.
+**Note**: All configuration properties are optional and should be adjusted based on your application's needs.
 
 ## Start or stop the recording manually
 

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt

@@ -6,15 +6,13 @@
 
 package com.datadog.reactnative.sessionreplay
 
+import android.annotation.SuppressLint
 import com.datadog.android.api.feature.FeatureSdkCore
-import com.datadog.android.sessionreplay.ImagePrivacy
 import com.datadog.android.sessionreplay.SessionReplayConfiguration
-import com.datadog.android.sessionreplay.TextAndInputPrivacy
-import com.datadog.android.sessionreplay.TouchPrivacy
 import com.datadog.reactnative.DatadogSDKWrapperStorage
+import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactContext
-import java.util.Locale
 
 /**
  * The entry point to use Datadog's Session Replay feature.
@@ -33,6 +31,7 @@ class DdSessionReplayImplementation(
      * @param customEndpoint Custom server url for sending replay data.
      * @param startRecordingImmediately Whether the recording should start immediately when the feature is enabled.
      */
+    @SuppressLint("VisibleForTests")
     fun enable(
         replaySampleRate: Double,
         customEndpoint: String,
@@ -42,12 +41,13 @@ class DdSessionReplayImplementation(
     ) {
         val sdkCore = DatadogSDKWrapperStorage.getSdkCore() as FeatureSdkCore
         val logger = sdkCore.internalLogger
+        val textViewUtils = TextViewUtils.create(reactContext, logger)
         val configuration = SessionReplayConfiguration.Builder(replaySampleRate.toFloat())
             .startRecordingImmediately(startRecordingImmediately)
             .setImagePrivacy(privacySettings.imagePrivacyLevel)
             .setTouchPrivacy(privacySettings.touchPrivacyLevel)
             .setTextAndInputPrivacy(privacySettings.textAndInputPrivacyLevel)
-            .addExtensionSupport(ReactNativeSessionReplayExtensionSupport(reactContext, logger))
+            .addExtensionSupport(ReactNativeSessionReplayExtensionSupport(textViewUtils))
 
         if (customEndpoint != "") {
             configuration.useCustomEndpoint(customEndpoint)

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ReactNativeSessionReplayExtensionSupport.kt

@@ -6,8 +6,6 @@
 
 package com.datadog.reactnative.sessionreplay
 
-import androidx.annotation.VisibleForTesting
-import com.datadog.android.api.InternalLogger
 import com.datadog.android.sessionreplay.ExtensionSupport
 import com.datadog.android.sessionreplay.MapperTypeWrapper
 import com.datadog.android.sessionreplay.recorder.OptionSelectorDetector
@@ -16,47 +14,29 @@ import com.datadog.reactnative.sessionreplay.mappers.ReactEditTextMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactNativeImageViewMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactTextMapper
 import com.datadog.reactnative.sessionreplay.mappers.ReactViewGroupMapper
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.UIManagerModule
+import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
 import com.facebook.react.views.image.ReactImageView
 import com.facebook.react.views.text.ReactTextView
 import com.facebook.react.views.textinput.ReactEditText
 import com.facebook.react.views.view.ReactViewGroup
 
+
 internal class ReactNativeSessionReplayExtensionSupport(
-    private val reactContext: ReactContext,
-    private val logger: InternalLogger
+    private val textViewUtils: TextViewUtils
 ) : ExtensionSupport {
     override fun name(): String {
         return ReactNativeSessionReplayExtensionSupport::class.java.simpleName
     }
 
     override fun getCustomViewMappers(): List<MapperTypeWrapper<*>> {
-        val uiManagerModule = getUiManagerModule()
-
         return listOf(
             MapperTypeWrapper(ReactImageView::class.java, ReactNativeImageViewMapper()),
             MapperTypeWrapper(ReactViewGroup::class.java, ReactViewGroupMapper()),
-            MapperTypeWrapper(ReactTextView::class.java, ReactTextMapper(reactContext, uiManagerModule)),
-            MapperTypeWrapper(ReactEditText::class.java, ReactEditTextMapper(reactContext, uiManagerModule)),
+            MapperTypeWrapper(ReactTextView::class.java, ReactTextMapper(textViewUtils)),
+            MapperTypeWrapper(ReactEditText::class.java, ReactEditTextMapper(textViewUtils)),
         )
     }
 
-    @VisibleForTesting
-    internal fun getUiManagerModule(): UIManagerModule? {
-        return try {
-            reactContext.getNativeModule(UIManagerModule::class.java)
-        } catch (e: IllegalStateException) {
-            logger.log(
-                level = InternalLogger.Level.WARN,
-                targets = listOf(InternalLogger.Target.MAINTAINER, InternalLogger.Target.TELEMETRY),
-                messageBuilder = { RESOLVE_UIMANAGERMODULE_ERROR },
-                throwable = e
-            )
-            return null
-        }
-    }
-
     override fun getOptionSelectorDetectors(): List<OptionSelectorDetector> {
         return listOf()
     }
@@ -64,8 +44,4 @@ internal class ReactNativeSessionReplayExtensionSupport(
     override fun getCustomDrawableMapper(): List<DrawableToColorMapper> {
         return emptyList()
     }
-
-    internal companion object {
-        internal const val RESOLVE_UIMANAGERMODULE_ERROR = "Unable to resolve UIManagerModule"
-    }
 }

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/ShadowNodeWrapper.kt

@@ -33,7 +33,7 @@ internal class ShadowNodeWrapper(
     internal companion object {
         internal fun getShadowNodeWrapper(
             reactContext: ReactContext,
-            uiManagerModule: UIManagerModule,
+            uiManagerModule: UIManagerModule?,
             reflectionUtils: ReflectionUtils,
             viewId: Int
         ): ShadowNodeWrapper? {
@@ -41,7 +41,7 @@ internal class ShadowNodeWrapper(
             var target: ReactShadowNode<out ReactShadowNode<*>>? = null
 
             val shadowNodeRunnable = Runnable {
-                val node = resolveShadowNode(reflectionUtils, uiManagerModule, viewId)
+                val node = uiManagerModule?.let { resolveShadowNode(reflectionUtils, it, viewId) }
                 if (node != null) {
                     target = node
                 }

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactEditTextMapper.kt

@@ -19,19 +19,11 @@ import com.datadog.android.sessionreplay.utils.DefaultViewBoundsResolver
 import com.datadog.android.sessionreplay.utils.DefaultViewIdentifierResolver
 import com.datadog.android.sessionreplay.utils.DrawableToColorMapper
 import com.datadog.android.sessionreplay.utils.GlobalBounds
-import com.datadog.reactnative.sessionreplay.NoopTextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.ReactTextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.utils.TextViewUtils
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.UIManagerModule
-import com.facebook.react.views.image.ReactImageView
+import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
 import com.facebook.react.views.textinput.ReactEditText
 
 internal class ReactEditTextMapper(
-    private val reactTextPropertiesResolver: TextPropertiesResolver =
-        NoopTextPropertiesResolver(),
-    private val textViewUtils: TextViewUtils = TextViewUtils(),
+    private val textViewUtils: TextViewUtils
 ) : BaseAsyncBackgroundWireframeMapper<ReactEditText>(
     viewIdentifierResolver = DefaultViewIdentifierResolver,
     colorStringFormatter = DefaultColorStringFormatter,
@@ -47,20 +39,6 @@ internal class ReactEditTextMapper(
         drawableToColorMapper = drawableToColorMapper,
     )
 
-    internal constructor(
-        reactContext: ReactContext,
-        uiManagerModule: UIManagerModule?
-    ) : this(
-        reactTextPropertiesResolver = if (uiManagerModule == null) {
-            NoopTextPropertiesResolver()
-        } else {
-            ReactTextPropertiesResolver(
-                reactContext = reactContext,
-                uiManagerModule = uiManagerModule
-            )
-        }
-    )
-
     override fun map(
         view: ReactEditText,
         mappingContext: MappingContext,
@@ -89,7 +67,6 @@ internal class ReactEditTextMapper(
             wireframes = backgroundWireframes,
             view = view,
             mappingContext = mappingContext,
-            reactTextPropertiesResolver = reactTextPropertiesResolver
         )
     }
 
@@ -102,7 +79,7 @@ internal class ReactEditTextMapper(
         mappingContext: MappingContext,
         asyncJobStatusCallback: AsyncJobStatusCallback
     ): MobileSegment.Wireframe? {
-        if (view !is ReactImageView) {
+        if (view !is ReactEditText) {
             return super.resolveBackgroundAsImageWireframe(
                 view,
                 bounds,

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/mappers/ReactTextMapper.kt

@@ -8,7 +8,6 @@ package com.datadog.reactnative.sessionreplay.mappers
 
 import android.widget.TextView
 import com.datadog.android.api.InternalLogger
-import com.datadog.android.sessionreplay.SessionReplayPrivacy
 import com.datadog.android.sessionreplay.model.MobileSegment
 import com.datadog.android.sessionreplay.recorder.MappingContext
 import com.datadog.android.sessionreplay.recorder.mapper.TextViewMapper
@@ -17,17 +16,10 @@ import com.datadog.android.sessionreplay.utils.DefaultColorStringFormatter
 import com.datadog.android.sessionreplay.utils.DefaultViewBoundsResolver
 import com.datadog.android.sessionreplay.utils.DefaultViewIdentifierResolver
 import com.datadog.android.sessionreplay.utils.DrawableToColorMapper
-import com.datadog.reactnative.sessionreplay.NoopTextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.ReactTextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
-import com.datadog.reactnative.sessionreplay.utils.TextViewUtils
-import com.facebook.react.bridge.ReactContext
-import com.facebook.react.uimanager.UIManagerModule
+import com.datadog.reactnative.sessionreplay.utils.text.TextViewUtils
 
 internal class ReactTextMapper(
-    private val reactTextPropertiesResolver: TextPropertiesResolver =
-        NoopTextPropertiesResolver(),
-    private val textViewUtils: TextViewUtils = TextViewUtils(),
+    private val textViewUtils: TextViewUtils
 ): TextViewMapper<TextView>(
     viewIdentifierResolver = DefaultViewIdentifierResolver,
     colorStringFormatter = DefaultColorStringFormatter,
@@ -35,20 +27,6 @@ internal class ReactTextMapper(
     drawableToColorMapper = DrawableToColorMapper.getDefault()
 ) {
 
-    internal constructor(
-        reactContext: ReactContext,
-        uiManagerModule: UIManagerModule?
-    ): this(
-        reactTextPropertiesResolver = if (uiManagerModule == null) {
-            NoopTextPropertiesResolver()
-        } else {
-            ReactTextPropertiesResolver(
-                reactContext = reactContext,
-                uiManagerModule = uiManagerModule
-            )
-        }
-    )
-
     override fun map(
         view: TextView,
         mappingContext: MappingContext,
@@ -56,11 +34,11 @@ internal class ReactTextMapper(
         internalLogger: InternalLogger
     ): List<MobileSegment.Wireframe> {
         val wireframes = super.map(view, mappingContext, asyncJobStatusCallback, internalLogger)
+
         return textViewUtils.mapTextViewToWireframes(
             wireframes = wireframes,
             view = view,
             mappingContext = mappingContext,
-            reactTextPropertiesResolver = reactTextPropertiesResolver
         )
     }
 }

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/utils/text/FabricTextViewUtils.kt

@@ -0,0 +1,74 @@
+package com.datadog.reactnative.sessionreplay.utils.text
+
+import android.text.Spannable
+import android.text.style.ForegroundColorSpan
+import android.view.View
+import android.widget.TextView
+import com.datadog.android.api.InternalLogger
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
+import com.datadog.reactnative.sessionreplay.utils.formatAsRgba
+import com.facebook.react.bridge.ReactContext
+import java.util.Locale
+
+internal class FabricTextViewUtils(private val reactContext: ReactContext, private val logger: InternalLogger, drawableUtils: DrawableUtils): TextViewUtils(reactContext, drawableUtils) {
+
+    override fun resolveTextStyle(
+        textWireframe: MobileSegment.Wireframe.TextWireframe,
+        pixelsDensity: Float,
+        view: TextView
+    ): MobileSegment.TextStyle {
+
+        val fontColor = getTextColor(view, textWireframe)
+        val fontSize = getFontSize(view, pixelsDensity)
+        val fontFamily = getFontFamily(textWireframe)
+
+        return MobileSegment.TextStyle(
+            family = fontFamily,
+            size = fontSize,
+            color = fontColor
+        )
+    }
+
+    private fun getTextColor(view: TextView, textWireframe: MobileSegment.Wireframe.TextWireframe): String {
+        val spanned = getFieldFromView(view, SPANNED_FIELD_NAME) as? Spannable
+        val spans = spanned?.getSpans(0, spanned.length, ForegroundColorSpan::class.java)
+        val fontColor = spans?.firstOrNull()?.foregroundColor?.let { formatAsRgba(it) } ?: textWireframe.textStyle.color
+
+        return fontColor
+    }
+
+    private fun getFontSize(view: TextView, pixelsDensity: Float): Long {
+        val fontSize = (view.textSize / pixelsDensity).toLong()
+        return fontSize
+    }
+
+    private fun getFontFamily(textWireframe: MobileSegment.Wireframe.TextWireframe): String {
+        val fontFamily = textWireframe.textStyle.family
+        return resolveFontFamily(fontFamily.lowercase(Locale.US))
+    }
+
+    internal fun getFieldFromView(view: View, value: String): Any? {
+        try {
+            val field = view.javaClass.getDeclaredField(value)
+            field.isAccessible = true
+            return field.get(view)
+        } catch (@Suppress("TooGenericExceptionCaught") e: Exception) {
+            when (e) {
+                is NoSuchFieldException -> handleError(e, RESOLVE_FABRICFIELD_ERROR)
+                is NullPointerException -> handleError(e, NULL_FABRICFIELD_ERROR)
+                else -> handleError(e, RESOLVE_FABRICFIELD_ERROR)
+            }
+            return null
+        }
+    }
+
+    private fun handleError(e: Exception, message: String) {
+        logger.log(
+            level = InternalLogger.Level.WARN,
+            targets = listOf(InternalLogger.Target.MAINTAINER, InternalLogger.Target.TELEMETRY),
+            messageBuilder = { message },
+            throwable = e
+        )
+    }
+}

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/utils/text/LegacyTextViewUtils.kt

@@ -0,0 +1,118 @@
+package com.datadog.reactnative.sessionreplay.utils.text
+
+import android.widget.TextView
+import androidx.annotation.VisibleForTesting
+import com.datadog.android.api.InternalLogger
+import com.datadog.android.internal.utils.densityNormalized
+import com.datadog.android.sessionreplay.model.MobileSegment
+import com.datadog.reactnative.sessionreplay.ShadowNodeWrapper
+import com.datadog.reactnative.sessionreplay.utils.DrawableUtils
+import com.datadog.reactnative.sessionreplay.utils.ReflectionUtils
+import com.datadog.reactnative.sessionreplay.utils.formatAsRgba
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.views.text.TextAttributes
+import java.util.Locale
+
+internal class LegacyTextViewUtils(
+    private val reactContext: ReactContext,
+    private val logger: InternalLogger,
+    private val reflectionUtils: ReflectionUtils,
+    drawableUtils: DrawableUtils,
+) : TextViewUtils(reactContext, drawableUtils) {
+
+    private val uiManager: UIManagerModule? by lazy {
+        getUiManagerModule()
+    }
+
+    override fun resolveTextStyle(
+        textWireframe: MobileSegment.Wireframe.TextWireframe,
+        pixelsDensity: Float,
+        view: TextView,
+    ): MobileSegment.TextStyle? {
+        val shadowNodeWrapper: ShadowNodeWrapper =
+            ShadowNodeWrapper.getShadowNodeWrapper(
+                reactContext = reactContext,
+                uiManagerModule = uiManager,
+                reflectionUtils = reflectionUtils,
+                viewId = view.id,
+            ) ?: return null
+
+        val fontFamily = getFontFamily(shadowNodeWrapper) ?: textWireframe.textStyle.family
+
+        val fontSize = getFontSize(shadowNodeWrapper)?.densityNormalized(pixelsDensity) ?: textWireframe.textStyle.size
+
+        val fontColor = getTextColor(shadowNodeWrapper) ?: textWireframe.textStyle.color
+
+        return MobileSegment.TextStyle(
+            family = fontFamily,
+            size = fontSize,
+            color = fontColor,
+        )
+    }
+
+    private fun getTextColor(shadowNodeWrapper: ShadowNodeWrapper?): String? {
+        if (shadowNodeWrapper == null) return null
+
+        val isColorSet =
+            shadowNodeWrapper
+                .getDeclaredShadowNodeField(IS_COLOR_SET_FIELD_NAME) as Boolean?
+
+        if (isColorSet != true) {
+            // Improvement: get default text color if different from black
+            return "#000000FF"
+        }
+        val resolvedColor =
+            shadowNodeWrapper
+                .getDeclaredShadowNodeField(COLOR_FIELD_NAME) as Int?
+        if (resolvedColor != null) {
+            return formatAsRgba(resolvedColor)
+        }
+
+        return null
+    }
+
+    private fun getFontSize(shadowNodeWrapper: ShadowNodeWrapper?): Long? {
+        if (shadowNodeWrapper == null) return null
+
+        val textAttributes =
+            shadowNodeWrapper
+                .getDeclaredShadowNodeField(TEXT_ATTRIBUTES_FIELD_NAME) as? TextAttributes?
+        if (textAttributes != null) {
+            return textAttributes.effectiveFontSize.toLong()
+        }
+
+        return null
+    }
+
+    private fun getFontFamily(shadowNodeWrapper: ShadowNodeWrapper?): String? {
+        if (shadowNodeWrapper == null) return null
+
+        val fontFamily =
+            shadowNodeWrapper
+                .getDeclaredShadowNodeField(FONT_FAMILY_FIELD_NAME) as? String
+
+        if (fontFamily != null) {
+            return resolveFontFamily(fontFamily.lowercase(Locale.US))
+        }
+
+        return null
+    }
+
+    // store to avoid calling it multiple times
+    @VisibleForTesting
+    internal fun getUiManagerModule(): UIManagerModule? {
+        return try {
+            reactContext.getNativeModule(UIManagerModule::class.java)
+        } catch (e: IllegalStateException) {
+            logger.log(
+                level = InternalLogger.Level.WARN,
+                targets = listOf(InternalLogger.Target.MAINTAINER, InternalLogger.Target.TELEMETRY),
+                messageBuilder = { RESOLVE_UIMANAGERMODULE_ERROR },
+                throwable = e,
+            )
+            return null
+        }
+    }
+}
+