@datadog/mobile-react-native-session-replay v2.12.0 bad recordings #987
Description
Describe the bug
In Datadog’s session replay, this screen renders incorrectly—several UI components are missing, so the recording isn’t useful. I can’t share more screenshots, but I added a comparison below (actual UI vs replay). Is this a known issue?
Recording:
Actual screen (screenshot):
Reproduction steps
Config:
SessionReplay.enable({
replaySampleRate: 100,
textAndInputPrivacyLevel:
TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS, // Defines the way text and input (e.g text fields, checkboxes) should be masked (Default: `MASK_ALL`).
imagePrivacyLevel: ImagePrivacyLevel.MASK_NONE, // Defines the way images should be masked (Default: `MASK_ALL`).
touchPrivacyLevel: TouchPrivacyLevel.SHOW, // Defines the way user touches (e.g tap) should be masked (Default: `HIDE`).
});
SDK logs
No response
Expected behavior
No response
Affected SDK versions
2.12.0
Latest working SDK version
2.12.0
Did you confirm if the latest SDK version fixes the bug?
Yes
Integration Methods
NPM
React Native Version
0.74.5
Package.json Contents
{
"name": "mobile",
"version": "1.0.0",
"main": "index.js",
"scripts": {
},
"dependencies": {
"@bam.tech/react-native-image-resizer": "^3.0.7",
"@config-plugins/react-native-blob-util": "^8.0.0",
"@config-plugins/react-native-pdf": "^8.0.0",
"@corasan/modal-sheet": "^2.0.2",
"@datadog/mobile-react-native": "2.12.0",
"@datadog/mobile-react-native-session-replay": "2.12.0",
"@dev-plugins/async-storage": "^0.0.3",
"@expo/fingerprint": "^0.11.7",
"@faker-js/faker": "^9.7.0",
"@intercom/intercom-react-native": "^7.2.0",
"@lodev09/react-native-exify": "^0.2.7",
"@lodev09/react-native-true-sheet": "^0.13.0",
"@loglayer/plugin-redaction": "^2.1.1",
"@lukemorales/query-key-factory": "^1.3.4",
"@react-native-async-storage/async-storage": "1.23.1",
"@react-native-community/datetimepicker": "8.0.1",
"@react-native-community/netinfo": "11.3.1",
"@react-native-firebase/app": "^18.4.0",
"@react-native-firebase/messaging": "^18.4.0",
"@react-native-menu/menu": "1.1.2",
"@react-native-picker/picker": "2.7.5",
"@react-navigation/elements": "^1.3.21",
"@rnmapbox/maps": "10.1.29",
"@shopify/flash-list": "1.6.4",
"@shopify/react-native-skia": "1.2.3",
"@tamagui/animate-presence": "^1.101.3",
"@tamagui/animations-moti": "^1.101.3",
"@tamagui/animations-react-native": "^1.101.3",
"@tamagui/babel-plugin": "^1.108.2",
"@tamagui/config": "^1.108.2",
"@tamagui/font-inter": "^1.108.2",
"@tamagui/linear-gradient": "^1.108.2",
"@tamagui/lucide-icons": "^1.108.2",
"@tamagui/theme-base": "^1.108.2",
"@tamagui/toast": "^1.108.2",
"@tanstack/query-core": "^5.51.21",
"@tanstack/react-query": "^5.51.23",
"@types/lodash": "^4.17.17",
"@types/supercluster": "^7.1.3",
"axios": "^1.7.3",
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
"babel-plugin-transform-remove-console": "^6.9.4",
"burnt": "^0.12.2",
"date-fns": "^3.6.0",
"dayjs": "^1.11.12",
"expo": "~51.0.28",
"expo-application": "~5.9.1",
"expo-auth-session": "~5.5.2",
"expo-blur": "~13.0.2",
"expo-build-properties": "~0.12.5",
"expo-constants": "~16.0.2",
"expo-crypto": "~13.0.2",
"expo-datadog": "~51.0.2",
"expo-dev-client": "4.0.27",
"expo-device": "~6.0.2",
"expo-document-picker": "~12.0.2",
"expo-file-system": "~17.0.1",
"expo-font": "~12.0.9",
"expo-image": "~1.12.14",
"expo-image-loader": "~4.7.0",
"expo-image-manipulator": "~12.0.5",
"expo-image-picker": "~15.0.7",
"expo-linear-gradient": "~13.0.2",
"expo-linking": "~6.3.1",
"expo-localization": "~15.0.3",
"expo-location": "~17.0.1",
"expo-media-library": "~16.0.4",
"expo-router": "~3.5.23",
"expo-sharing": "~12.0.1",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-updates": "~0.25.22",
"expo-web-browser": "~13.0.3",
"gpx-builder": "^5.5.0",
"immer": "^10.1.1",
"jotai": "^2.9.2",
"jotai-tanstack-query": "^0.8.6",
"jotai-zustand": "^0.4.0",
"lodash": "^4.17.21",
"loglayer": "^6.6.0",
"lottie-react-native": "7.0.0",
"moti": "^0.29.0",
"papaparse": "^5.5.2",
"posthog-react-native": "^3.3.9",
"posthog-react-native-session-replay": "^0.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-awesome-gallery": "^0.4.2",
"react-native-blob-util": "^0.19.11",
"react-native-console-time-polyfill": "^1.2.3",
"react-native-gesture-handler": "~2.16.2",
"react-native-get-random-values": "~1.11.0",
"react-native-image-viewing": "^0.2.2",
"react-native-ios-context-menu": "3.0.0-23",
"react-native-ios-utilities": "5.0.0-58",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-keyboard-controller": "1.12.7",
"react-native-maps": "1.14.0",
"react-native-markdown-display": "7.0.2",
"react-native-pager-view": "6.3.0",
"react-native-pdf": "6.7.4",
"react-native-persona": "2.9.4",
"react-native-picker-select": "^8.1.0",
"react-native-progress": "^5.0.1",
"react-native-reanimated": "~3.10.1",
"react-native-redash": "^18.1.3",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-star-rating-widget": "^1.8.0",
"react-native-store-review": "~0.4.3",
"react-native-stripe-api": "^0.1.0",
"react-native-svg": "15.2.0",
"supercluster": "^8.0.1",
"tamagui": "^1.108.2",
"uuid": "^3.4.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
"zeego": "^1.10.0",
"zod": "^3.23.8",
"zod-validation-error": "^3.3.1",
"zustand": "^4.5.4"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@datadog/datadog-ci": "2.41.0",
"@dev-plugins/react-query": "^0.0.6",
"@react-native-community/slider": "4.5.2",
"@testing-library/react-native": "^13.2.0",
"@types/express": "^5.0.3",
"@types/jest": "29.5.12",
"@types/papaparse": "^5.3.15",
"@types/react": "~18.2.79",
"@typescript-eslint/parser": "^5.58.0",
"babel-loader": "^8.3.0",
"babel-plugin-istanbul": "proofserve/babel-plugin-istanbul#feature/exclude_reanimated_plugin",
"eslint": "8.57.1",
"eslint-config-prettier": "^8.8.0",
"eslint-config-react-app": "^7.0.1",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-i18n-json": "^4.0.0",
"eslint-plugin-i18next": "^6.0.1",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-prefer-function-component": "^3.1.0",
"eslint-plugin-testing-library": "^6.4.0",
"express": "^5.1.0",
"istanbul-middleware-ts": "^1.1.4",
"jest": "^29.7.0",
"jest-expo": "~51.0.3",
"prettier": "^3.3.3",
"prettier-eslint-plugin": "^1.1.4",
"react-native-svg-transformer": "^1.5.0",
"react-test-renderer": "18.2.0",
"rn-flipper-async-storage-advanced": "^1.0.5",
"ts-jest": "^29.2.4",
"typescript": "5.0.4",
"typescript-eslint": "^8.13.0"
},
"private": true,
"jest": {
"preset": "jest-expo",
"collectCoverage": false,
"collectCoverageFrom": [
"**/src/**/*.{ts,tsx}",
"!**/*.types.ts"
],
"setupFilesAfterEnv": [
"<rootDir>/__tests__/setupTests.tsx"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|moti|@corasan/modal-sheet|@tamagui|@lodev09/react-native-true-sheet|supercluster|kdbush)"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
"^~api/(.*)$": "<rootDir>/src/api/$1",
"^~atlas/(.*)$": "<rootDir>/src/atlas/$1",
"^~atlas$": "<rootDir>/src/atlas",
"^~utils/logging$": "<rootDir>/src/utils/logging/index.ts",
"^~utils/logging/(.*)$": "<rootDir>/src/utils/logging/$1",
"^~utils/(.*)$": "<rootDir>/src/utils/$1",
"^~services/(.*)$": "<rootDir>/src/services/$1",
"^~models/(.*)$": "<rootDir>/src/models/$1",
"^~enums/(.*)$": "<rootDir>/src/enums/$1",
"^~analytics/(.*)$": "<rootDir>/src/analytics/$1",
"^~atoms$": "<rootDir>/src/atoms",
"^~atoms/(.*)$": "<rootDir>/src/atoms/$1",
"^~components/(.*)$": "<rootDir>/src/components/$1",
"^~components$": "<rootDir>/src/components",
"^~contexts/(.*)$": "<rootDir>/src/contexts/$1",
"^~hooks/(.*)$": "<rootDir>/src/hooks/$1",
"^~containers/(.*)$": "<rootDir>/src/containers/$1",
"^tamagui.config$": "<rootDir>/tamagui.config.ts",
"\\.svg$": "<rootDir>/__mocks__/svg-mock.ts",
"^assets/(.*)$": "<rootDir>/assets/$1",
"^theme/(.*)$": "<rootDir>/theme/$1",
"^@shopify/react-native-skia$": "<rootDir>/__mocks__/react-native-skia.ts",
"^react-native-keyboard-controller$": "<rootDir>/__mocks__/react-native-keyboard-controller.tsx"
},
"testMatch": [
"**/?(*.)+(spec|test).[tj]s?(x)"
]
},
"trustedDependencies": [
"core-js",
"es5-ext",
"protobufjs"
]
}
iOS Setup
require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
require 'json'
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
ENV['RCT_NEW_ARCH_ENABLED'] = podfile_properties['newArchEnabled'] == 'true' ? '1' : '0'
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] = podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
use_autolinking_method_symbol = ('use' + '_native' + '_modules!').to_sym
origin_autolinking_method = self.method(use_autolinking_method_symbol)
self.define_singleton_method(use_autolinking_method_symbol) do |*args|
if ENV['EXPO_UNSTABLE_CORE_AUTOLINKING'] == '1'
Pod::UI.puts('Using expo-modules-autolinking as core autolinking source'.green)
config_command = [
'node',
'--no-warnings',
'--eval',
'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
'react-native-config',
'--json',
'--platform',
'ios'
]
origin_autolinking_method.call(config_command)
else
origin_autolinking_method.call()
end
end
platform :ios, podfile_properties['ios.deploymentTarget'] || '13.4'
install! 'cocoapods',
:deterministic_uuids => false
prepare_react_native_project!
# @generated begin @rnmapbox/maps-rnmapboxmapsimpl - expo prebuild (DO NOT MODIFY) sync-dfca1829807f0ba58eab727b9c99c728231bf81f
$RNMapboxMapsDownloadToken = 'sk..7-'
$RNMapboxMapsVersion = '11.6.0'
# @generated end @rnmapbox/maps-rnmapboxmapsimpl
target 'ProofDev' do
use_expo_modules!
# @generated begin react-native-maps - expo prebuild (DO NOT MODIFY) sync-e9cc66c360abe50bc66d89fffb3c55b034d7d369
pod 'react-native-google-maps', path: File.dirname(`node --print "require.resolve('react-native-maps/package.json')"`)
# @generated end react-native-maps
config = use_native_modules!
use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
pre_install do |installer|
# @generated begin @rnmapbox/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-ea4905840bf9fcea0acc62e92aa2e784f9d760f8
$RNMapboxMaps.pre_install(installer)
# @generated end @rnmapbox/maps-pre_installer
end
# @generated end pre_installer
use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/..",
:privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
)
post_install do |installer|
# @generated begin @rnmapbox/maps-post_installer - expo prebuild (DO NOT MODIFY) sync-c4e8f90e96f6b6c6ea9241dd7b52ab5f57f7bf36
$RNMapboxMaps.post_install(installer)
# @generated end @rnmapbox/maps-post_installer
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
:ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
)
# This is necessary for Xcode 14, because it signs resource bundles by default
# when building for devices.
installer.target_installation_results.pod_target_installation_results
.each do |pod_name, target_installation_result|
target_installation_result.resource_bundle_targets.each do |resource_bundle_target|
resource_bundle_target.build_configurations.each do |config|
config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
end
end
end
end
post_integrate do |installer|
begin
expo_patch_react_imports!(installer)
rescue => e
Pod::UI.warn e
end
end
end
Android Setup
No response
Device Information
iPhone 13 Pro
iOS 18.6.2
Other relevant information
No response