TypeError: Cannot read property 'initialize' of null

[oakinyelure]

My team is starting to configure datadog monitoring for our React Native application. The app uses expo with no separate Android or IOS build. We currently use React 18, expo 48.0.0 and expo version 48.0.0 was installed as well

This is how DD is initialized per the doc

  useEffect(() => {
    (async () => {
      const config = new DdSdkReactNativeConfiguration(
        "<someid>",
        "<someenvironment>",
        "<someanotherid>",
        true, // track User interactions (e.g.: Tap on buttons. You can use 'accessibilityLabel' element property to give tap action the name, otherwise element type will be reported)
        true, // track XHR Resources
        true // track Errors
    );
    // Optional: Select your Datadog website ("US1", "US3", "US5", EU1", or "US1_FED"). Default is "US1".
    config.site = 'datadoghq.com';
    config.serviceName= "red.client.drivermobile";
    // Optional: Enable or disable native crash reports.
    config.nativeCrashReportEnabled = true;
    // Optional: Sample RUM sessions, for example: 80% of sessions are sent to Datadog. Default is 100%.
    config.sessionSamplingRate = 80;
    // Optional: Sample tracing integrations for network calls between your app and your backend, for example: 80% of calls to your instrumented backend are linked from the RUM view to the APM view. Default is 20%.
    // You need to specify the hosts of your backends to enable tracing with these backends.
    config.resourceTracingSamplingRate = 80;
    //config.firstPartyHosts = ['example.com']; // Matches 'example.com' and subdomains like 'api.example.com'.
    // Optional: Let the Datadog SDK print internal logs above or equal to the provided level. Default is undefined, which means no logs.
    config.verbosity = SdkVerbosity.WARN; 
    await DdSdkReactNative.initialize(config);      
    })();
  }, []);

Steps to reproduce the issue:

Expectation is for it to work based on the configuration in the documentation.

**My team is constantly getting Cannot read property 'initialize' of null. The same using the Datadog provider. We dug deeper, it appears

        DdSdkReactNative.buildConfiguration(configuration);
        alert(DdSdk);
        await DdSdk.initialize(

is constantly throwing an exception because the DdSDK is null. This is in the DdSdkReactNative.tsx file**

• Version of the SDK: 48.0.0
• Version of React Native: 0.71.14
• package.json

{
  "main": "index.js",
  "detox": {
    "test-runner": "jest",
    "runnerConfig": "e2e/config.json",
    "configurations": {
      "ios.sim": {
        "binaryPath": "bin/Exponent.app",
        "type": "ios.simulator",
        "name": "iPhone 12 Pro Max"
      }
    }
  },
  "scripts": {
    "start:uat": "cp app.uat.json app.json && expo start",
    "start:prod": "cp app.prod.json app.json && expo start",
    "eject": "expo eject",
    "test": "jest --silent",
    "test_u": "jest -u",
    "test_updateSnapshot": "jest --updateSnapshot",
    "test_with_warn": "jest",
    "postinstall": "patch-package",
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-native-safe-module|galio-framework|react-clone-referenced-element|@bugsnag|@bugsnag/plugin-network-breadcrumbs|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json",
      "jsx",
      "node"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,jsx,tsx}",
      "!**/coverage/**",
      "!**/node_modules/**",
      "!**/web-build/**",
      "!**/babel.config.js",
      "!**/jest.setup.js"
    ]
  },
  "dependencies": {
    "@bugsnag/expo": "^7.3.3",
    "@datadog/mobile-react-native": "^2.0.1",
    "@datadog/mobile-react-navigation": "^2.0.1",
    "@expo-google-fonts/inter": "^0.1.0",
    "@expo-google-fonts/roboto": "^0.1.0",
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0",
    "@expo/vector-icons": "^13.0.0",
    "@gorhom/bottom-sheet": "^4.4.7",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^5.6.1",
    "@react-navigation/drawer": "^5.8.7",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.7.1",
    "@types/react-native": "^0.72.6",
    "axios": "^0.19.2",
    "deprecated-react-native-prop-types": "^4.0.0",
    "expo": "^48.0.0",
    "expo-app-loading": "^2.1.1",
    "expo-background-fetch": "~11.1.1",
    "expo-camera": "~13.2.1",
    "expo-clipboard": "~4.1.2",
    "expo-constants": "~14.2.1",
    "expo-datadog": "^48.0.0",
    "expo-file-system": "~15.2.2",
    "expo-font": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-keep-awake": "~12.0.1",
    "expo-linear-gradient": "~12.1.2",
    "expo-linking": "~4.0.1",
    "expo-location": "~15.1.1",
    "expo-media-library": "~15.2.3",
    "expo-notifications": "~0.18.1",
    "expo-secure-store": "~12.1.1",
    "expo-sharing": "~11.2.2",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-updates": "~0.16.4",
    "expo-web-browser": "~12.1.1",
    "galio-framework": "^0.7.1",
    "jest-circus": "^26.6.3",
    "js-base64": "^3.6.0",
    "libphonenumber-js": "^1.8.1",
    "lottie-react-native": "5.1.4",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.14",
    "react-native-alert-async": "^1.0.5",
    "react-native-base64": "^0.2.1",
    "react-native-confirmation-code-field": "^6.5.0",
    "react-native-confirmation-code-input": "^1.0.4",
    "react-native-device-info": "^6.0.4",
    "react-native-elements": "^2.2.1",
    "react-native-fade-in-view": "^1.1.0",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-maps": "1.3.2",
    "react-native-maps-directions": "^1.8.0",
    "react-native-paper": "^4.0.1",
    "react-native-progress": "^4.1.2",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-status-bar-height": "^2.5.0",
    "react-native-svg": "13.4.0",
    "react-native-svg-transformer": "^1.1.0",
    "react-native-swipe-list-view": "^3.2.4",
    "react-native-swipeable": "^0.6.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.18.11",
    "react-native-webview": "11.26.0",
    "react-native-windows": "^1.0.0",
    "react-native-wizard": "^2.1.0",
    "react-navigation": "^4.4.3",
    "react-navigation-transitions": "^1.0.12",
    "react-query": "^2.23.1"
  },
  "resolutions": {
    "expo-crypto": "^12.2.2",
    "expo-device": "^5.2.1",
    "@expo/prebuild-config": "~6.0.0",
    "@expo/config-plugins": "~6.0.0",
    "@expo/config": "~8.1.2"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@testing-library/jest-native": "^3.4.3",
    "@types/jest": "^26.0.20",
    "@types/react": "~18.0.27",
    "@types/react-test-renderer": "^17.0.0",
    "detox": "^18.7.0",
    "detox-expo-helpers": "^0.6.0",
    "expo-detox-hook": "^1.0.10",
    "jest-expo": "^48.0.0",
    "jest-mock-axios": "^4.3.0",
    "patch-package": "^6.5.1",
    "react-native-testing-library": "^6.0.0",
    "react-test-renderer": "^17.0.1",
    "typescript": "^4.9.4"
  },
  "private": true,
  "prettier": {
    "arrowParens": "always",
    "jsxBracketSameLine": false,
    "trailingComma": "all",
    "printWidth": 200
  }
}

[louiszawadzki]

Hi @oakinyelure, thanks for reaching out!

From your investigation I understand that DdSdk is null. This would happen if the Datadog Native Module is not registered.

This would be the case if you are using Expo Go, which cannot run any custom native code. If you are using Expo Go, we recommend switching to Expo Dev Client or mocking native modules when developing with Expo Go: https://docs.datadoghq.com/real_user_monitoring/mobile_and_tv_monitoring/setup/expo/#expo-go

If you are already using the Expo Dev Client, can you make sure to reinstall your pods and re-build your app and check if the problem is still present?

Thanks a lot!

[oakinyelure]

Thanks. My team will look at the local build approach.