Skip to content

PANA-8893: Enable Composition Tree recording in Session Replay #1393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gonzalezreal merged 3 commits into from
Sep 2, 2026
Merged

PANA-8893: Enable Composition Tree recording in Session Replay #1393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2457f08
PANA-8893 Enable composition tree recording
gonzalezreal Sep 1, 2026
df7e9cb
PANA-8893 Remove duplicate KDoc parameter
gonzalezreal Sep 1, 2026
0ede34a
PANA-8893 Remove redundant suppression
gonzalezreal Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions ...id/src/main/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementation.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,19 @@ class DdSessionReplayImplementation(
* @param replaySampleRate The sample rate applied for session replay.
* @param customEndpoint Custom server url for sending replay data.
* @param privacySettings Defines the way visual elements should be masked.
* @param customEndpoint Custom server url for sending replay data.
* @param startRecordingImmediately Whether the recording should start immediately when the feature is enabled.
* @param enableHeatmaps Enables heatmap identifier computation.
* @param enableCompositionTreeRecording Enables the Composition Tree recording pipeline.
Comment thread
gonzalezreal marked this conversation as resolved.
*/
@SuppressLint("VisibleForTests")
@Suppress("LongParameterList")
@Suppress("LongParameterList", "UNUSED_PARAMETER")
fun enable(
Comment thread
gonzalezreal marked this conversation as resolved.
replaySampleRate: Double,
customEndpoint: String,
privacySettings: SessionReplayPrivacySettings,
startRecordingImmediately: Boolean,
enableHeatmaps: Boolean,
enableCompositionTreeRecording: Boolean,
promise: Promise
) {
val sdkCore = Datadog.getInstance() as FeatureSdkCore
Expand Down
4 changes: 3 additions & 1 deletion ...eplay/android/src/newarch/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplay.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class DdSessionReplay(
* @param textAndInputPrivacyLevel Defines the way text and input should be masked.
* @param startRecordingImmediately Whether the recording should start immediately when the feature is enabled.
* @param enableHeatmaps Enables heatmap identifier computation.
* Currently unused on Android; reserved for heatmap support.
* @param enableCompositionTreeRecording Enables the Composition Tree recording pipeline.
Comment thread
gonzalezreal marked this conversation as resolved.
*/
@Suppress("LongParameterList")
@ReactMethod
Expand All @@ -42,6 +42,7 @@ class DdSessionReplay(
textAndInputPrivacyLevel: String,
startRecordingImmediately: Boolean,
enableHeatmaps: Boolean,
enableCompositionTreeRecording: Boolean,
promise: Promise
) {
implementation.enable(
Expand All @@ -54,6 +55,7 @@ class DdSessionReplay(
),
startRecordingImmediately,
enableHeatmaps,
enableCompositionTreeRecording,
promise
)
}
Expand Down
4 changes: 3 additions & 1 deletion ...eplay/android/src/oldarch/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplay.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class DdSessionReplay(
* @param textAndInputPrivacyLevel Defines the way text and input should be masked.
* @param startRecordingImmediately Whether the recording should start immediately when the feature is enabled.
* @param enableHeatmaps Enables heatmap identifier computation.
* Currently unused on Android; reserved for heatmap support.
* @param enableCompositionTreeRecording Enables the Composition Tree recording pipeline.
Comment thread
gonzalezreal marked this conversation as resolved.
*/
@Suppress("LongParameterList")
@ReactMethod
Expand All @@ -43,6 +43,7 @@ class DdSessionReplay(
textAndInputPrivacyLevel: String,
startRecordingImmediately: Boolean,
enableHeatmaps: Boolean,
enableCompositionTreeRecording: Boolean,
promise: Promise
) {
implementation.enable(
Expand All @@ -55,6 +56,7 @@ class DdSessionReplay(
),
startRecordingImmediately,
enableHeatmaps,
enableCompositionTreeRecording,
promise
)
}
Expand Down
7 changes: 7 additions & 0 deletions ...rc/test/kotlin/com/datadog/reactnative/sessionreplay/DdSessionReplayImplementationTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
false,
false,
mockPromise
)

Expand Down Expand Up @@ -172,6 +173,7 @@ internal class DdSessionReplayImplementationTest {
),
startRecordingImmediately,
false,
false,
mockPromise
)

Expand Down Expand Up @@ -203,6 +205,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
enableHeatmaps = true,
enableCompositionTreeRecording = false,
mockPromise
)

Expand All @@ -228,6 +231,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
enableHeatmaps = false,
enableCompositionTreeRecording = false,
mockPromise
)

Expand All @@ -253,6 +257,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
enableHeatmaps = true,
enableCompositionTreeRecording = false,
mockPromise
)

Expand Down Expand Up @@ -280,6 +285,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
enableHeatmaps = false,
enableCompositionTreeRecording = false,
mockPromise
)

Expand Down Expand Up @@ -308,6 +314,7 @@ internal class DdSessionReplayImplementationTest {
SessionReplayPrivacySettings(imagePrivacy, touchPrivacy, textAndInputPrivacy),
startRecordingImmediately,
enableHeatmaps = true,
enableCompositionTreeRecording = false,
mockPromise
)
}
Expand Down
4 changes: 4 additions & 0 deletions packages/react-native-session-replay/ios/Sources/DdSessionReplay.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ @implementation DdSessionReplay
withTextAndInputPrivacyLevel:(NSString*)textAndInputPrivacyLevel
withStartRecordingImmediately:(BOOL)startRecordingImmediately
withEnableHeatmaps:(BOOL)enableHeatmaps
withEnableCompositionTreeRecording:(BOOL)enableCompositionTreeRecording
withResolver:(RCTPromiseResolveBlock)resolve
withRejecter:(RCTPromiseRejectBlock)reject)
{
Expand All @@ -34,6 +35,7 @@ @implementation DdSessionReplay
textAndInputPrivacyLevel:textAndInputPrivacyLevel
startRecordingImmediately:startRecordingImmediately
enableHeatmaps:enableHeatmaps
enableCompositionTreeRecording:enableCompositionTreeRecording
resolve:resolve
reject:reject];
}
Expand Down Expand Up @@ -76,6 +78,7 @@ - (void)enable:(double)replaySampleRate
textAndInputPrivacyLevel:(NSString *)textAndInputPrivacyLevel
startRecordingImmediately:(BOOL)startRecordingImmediately
enableHeatmaps:(BOOL)enableHeatmaps
enableCompositionTreeRecording:(BOOL)enableCompositionTreeRecording
resolve:(RCTPromiseResolveBlock)resolve
reject:(RCTPromiseRejectBlock)reject {
[self.ddSessionReplayImplementation enableWithReplaySampleRate:replaySampleRate
Expand All @@ -85,6 +88,7 @@ - (void)enable:(double)replaySampleRate
textAndInputPrivacyLevel:textAndInputPrivacyLevel
startRecordingImmediately:startRecordingImmediately
enableHeatmaps:enableHeatmaps
enableCompositionTreeRecording:enableCompositionTreeRecording
resolve:resolve
reject:reject];
}
Expand Down
62 changes: 34 additions & 28 deletions packages/react-native-session-replay/ios/Sources/DdSessionReplayImplementation.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,41 @@ internal struct SVGData: Codable {
public class DdSessionReplayImplementation: NSObject {
private lazy var sessionReplay: SessionReplayProtocol = sessionReplayProvider()
private let sessionReplayProvider: () -> SessionReplayProtocol
private let uiManager: RCTUIManager
private let fabricWrapper: RCTFabricWrapper
private let additionalNodeRecordersProvider: () -> [SessionReplayNodeRecorder]

internal init(
sessionReplayProvider: @escaping () -> SessionReplayProtocol,
uiManager: RCTUIManager,
fabricWrapper: RCTFabricWrapper
fabricWrapper: RCTFabricWrapper,
additionalNodeRecordersProvider: (() -> [SessionReplayNodeRecorder])? = nil
) {
Comment thread
gonzalezreal marked this conversation as resolved.
self.sessionReplayProvider = sessionReplayProvider
self.uiManager = uiManager
self.fabricWrapper = fabricWrapper
self.additionalNodeRecordersProvider = additionalNodeRecordersProvider ?? {
var svgMap: [String: SVGData] = [:]

if let bundle = Bundle.ddSessionReplayResources,
let url = bundle.url(forResource: "assets", withExtension: "json") {
do {
let data = try Data(contentsOf: url)
let decoder = JSONDecoder()
svgMap = try decoder.decode([String: SVGData].self, from: data)
} catch {
consolePrint("Failed to load or decode assets.json: \(error)", .debug)
}
}

return [
SvgViewRecorder(
uiManager: uiManager,
fabricWrapper: fabricWrapper,
svgMap: svgMap
),
RCTTextViewRecorder(
uiManager: uiManager,
fabricWrapper: fabricWrapper
)
]
}
}

@objc
Expand All @@ -51,6 +75,7 @@ public class DdSessionReplayImplementation: NSObject {
textAndInputPrivacyLevel: NSString,
startRecordingImmediately: Bool,
enableHeatmaps: Bool,
enableCompositionTreeRecording: Bool,
resolve:RCTPromiseResolveBlock,
reject:RCTPromiseRejectBlock
) -> Void {
Expand All @@ -72,30 +97,11 @@ public class DdSessionReplayImplementation: NSObject {
sessionReplayConfiguration.featureFlags[.heatmaps] = true
}

var svgMap: [String: SVGData] = [:]

if let bundle = Bundle.ddSessionReplayResources,
let url = bundle.url(forResource: "assets", withExtension: "json") {
do {
let data = try Data(contentsOf: url)
let decoder = JSONDecoder()
svgMap = try decoder.decode([String: SVGData].self, from: data)
} catch {
consolePrint("Failed to load or decode assets.json: \(error)", .debug)
}
if #available(iOS 13.0, tvOS 13.0, *), enableCompositionTreeRecording {
sessionReplayConfiguration.featureFlags[.compositionTreeRecording] = true
} else {
sessionReplayConfiguration.setAdditionalNodeRecorders(additionalNodeRecordersProvider())
}

sessionReplayConfiguration.setAdditionalNodeRecorders([
SvgViewRecorder(
uiManager: uiManager,
fabricWrapper: fabricWrapper,
svgMap: svgMap
),
RCTTextViewRecorder(
uiManager: uiManager,
fabricWrapper: fabricWrapper
)
])

sessionReplay.enable(with: sessionReplayConfiguration, in: CoreRegistry.default)

Expand Down
Loading