search

DataDog / dd-sdk-reactnative

Datadog SDK for ReactNative
Apache License 2.0
122 stars 42 forks source link

WARNING in ./node_modules/@datadog/mobile-react-native/lib/module/sdk/FileBasedConfiguration/FileBasedConfiguration.js #646

Closed ChristopherDcosta closed 5 months ago

ChristopherDcosta commented 7 months ago

Stack trace

RN Web - Google Chrome 4_2_2024 1_06_46 PM

Reproduction steps

1) Install react-native-web 2) Configure webpack file and other necessary files 3) Add the following scripts in package.json

Volume

100

Affected SDK versions

^2.1.1

Latest working SDK version

^2.1.1

Does the crash manifest in the latest SDK version?

Yes

React Native Version

0.72.6

Package.json Contents

{ "name": "openforce", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest", "postinstall": "patch-package", "build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js", "web": "webpack serve --mode=development --config webpack.config.js" }, "dependencies": { "@apollo/client": "^3.8.10", "@datadog/mobile-react-native": "^2.1.1", "@datadog/mobile-react-native-apollo-client": "^2.1.1", "@datadog/mobile-react-navigation": "^2.1.1", "@gorhom/bottom-sheet": "^4.6.0", "@notifee/react-native": "^7.8.2", "@react-native-async-storage/async-storage": "^1.21.0", "@react-native-community/datetimepicker": "^7.6.2", "@react-native-community/netinfo": "^11.2.1", "@react-native-community/slider": "^4.5.0", "@react-native-firebase/app": "^19.0.0", "@react-native-firebase/messaging": "^19.0.0", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "@reduxjs/toolkit": "^2.1.0", "axios": "^1.6.5", "graphql": "^16.8.1", "i18next": "^23.7.16", "moment": "^2.30.1", "react": "18.2.0", "react-i18next": "^14.0.0", "react-native": "0.72.6", "react-native-auth0": "^3.1.0", "react-native-blob-util": "0.19.1", "react-native-compressor": "^1.8.24", "react-native-config": "^1.5.1", "react-native-document-picker": "^9.1.1", "react-native-drag-sort": "^2.4.4", "react-native-draggable-flatlist": "^4.0.1", "react-native-gesture-handler": "^2.14.1", "react-native-image-crop-picker": "^0.40.3", "react-native-image-to-pdf": "^1.2.0", "react-native-image-zoom-viewer": "^3.0.1", "react-native-linear-gradient": "^2.8.3", "react-native-modal-datetime-picker": "^17.1.0", "react-native-pdf": "^6.7.4", "react-native-permissions": "^4.1.4", "react-native-reanimated": "^3.6.1", "react-native-safe-area-context": "^4.9.0", "react-native-screens": "^3.29.0", "react-native-select-dropdown": "^3.4.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^14.1.0", "react-native-swiper": "^1.6.0", "react-native-toast-message": "^2.2.0", "react-native-vector-icons": "^10.0.3", "react-native-web": "^0.19.10", "react-native-zendesk-messaging": "^0.2.1", "react-redux": "^9.1.0", "redux-persist": "^6.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@svgr/webpack": "^8.1.0", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-native-vector-icons": "^6.4.18", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "babel-loader": "^9.1.3", "babel-plugin-react-native-web": "^0.19.10", "eslint": "^8.19.0", "html-webpack-plugin": "^5.6.0", "identity-obj-proxy": "^3.0.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "patch-package": "^8.0.0", "postinstall-postinstall": "^2.1.0", "prettier": "^2.4.1", "react-dom": "^18.2.0", "react-test-renderer": "18.2.0", "typescript": "4.8.4", "url-loader": "^4.1.1", "webpack": "^5.91.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" }, "engines": { "node": ">=16" } }

iOS Setup

No response

Android Setup

No response

Device Information

Browser

Other relevant information

No response

marco-saia-datadog commented 7 months ago

We are investigating this issue and we will get back to you soon! In the meantime, would it be possible for you to share your webpack.config.js?

ChristopherDcosta commented 7 months ago

We are investigating this issue and we will get back to you soon! In the meantime, would it be possible for you to share your webpack.config.js?

const path = require('path');

const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin');

const appDirectory = path.resolve(__dirname); const {presets} = require(${appDirectory}/babel.config.js);

const compileNodeModules = [ // Add every react-native package that needs compiling 'react-native-gesture-handler', 'react-native-reanimated', '@datadog/mobile-react-native', '@datadog/mobile-react-native-apollo-client', '@datadog/mobile-react-navigation', 'react-native-compressor', 'react-native-document-picker', 'react-native-drag-sort', 'react-native-image-zoom-viewer', 'react-native-linear-gradient', 'react-native-pdf', 'react-native-select-dropdown', 'react-native-swiper', 'react-native-toast-message', 'react-native-vector-icons', 'react-native', '@react-native' ].map((moduleName) => path.resolve(appDirectory, node_modules/${moduleName}));

const babelLoaderConfiguration = { test: /.js$|tsx?$/, // Add every directory that needs to be compiled by Babel during the build. include: [ path.resolve(dirname, 'index.web.js'), path.resolve(dirname, 'App.web.tsx'), path.resolve(__dirname, 'src'), ...compileNodeModules, ], use: { loader: 'babel-loader', options: { cacheDirectory: true, presets, plugins: ['react-native-web'], }, }, };

const svgLoaderConfiguration = { test: /.svg$/, use: [ { loader: '@svgr/webpack', }, ], };

const imageLoaderConfiguration = { test: /.(gif|jpe?g|png)$/, use: { loader: 'url-loader', options: { name: '[name].[ext]', }, }, };

const ttfLoaderConfiguration = { test: /.ttf$/, use: [ { loader: 'url-loader', }, ], };

module.exports = { entry: { app: path.join(__dirname, 'index.web.js'), }, output: { path: path.resolve(appDirectory, 'dist'), publicPath: '/', filename: 'rnw_blogpost.bundle.js', }, resolve: { extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'], alias: { 'react-native$': 'react-native-web', '../Components/AccessibilityInfo/legacySendAccessibilityEvent': 'identity-obj-proxy', '../Utilities/Platform': 'react-native-web/dist/exports/Platform', '../../Utilities/Platform': 'react-native-web/dist/exports/Platform', './Platform': 'react-native-web/dist/exports/Platform', './RCTAlertManager': 'react-native-web/dist/exports/Alert', '../../Image/Image': 'react-native-web/dist/exports/Image', '../../StyleSheet/PlatformColorValueTypes': 'react-native-web/dist/exports/Animated', './PlatformColorValueTypes': 'react-native-web/dist/exports/StyleSheet', '../Utilities/BackHandler': 'react-native-web/dist/exports/BackHandler', './BaseViewConfig': 'identity-obj-proxy', './RCTNetworking': 'identity-obj-proxy', '../DevToolsSettings/DevToolsSettingsManager': 'identity-obj-proxy', '../../../../../../datadog-configuration.json': 'identity-obj-proxy', 'react-native-linear-gradient': 'react-native-web-linear-gradient' }, }, module: { rules: [ babelLoaderConfiguration, imageLoaderConfiguration, svgLoaderConfiguration, ttfLoaderConfiguration ], }, plugins: [ new HtmlWebpackPlugin({ template: path.join(dirname, 'index.html'), }), new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ DEV__: JSON.stringify(true), }), new webpack.ProvidePlugin({ process: 'process/browser', }), ], };

marco-saia-datadog commented 7 months ago

Hello @ChristopherDcosta

Unfortunately we don't officially support react-native-web, but an upgrade and a cache clean-up should fix this specific compilation issue.

Here are the steps I recommend:

Update Datadog SDK

-"@datadog/mobile-react-native": "^2.1.1",
-"@datadog/mobile-react-native-apollo-client": "^2.1.1",
-"@datadog/mobile-react-navigation": "^2.1.1",
+"@datadog/mobile-react-native": "^2.3.2",
+"@datadog/mobile-react-native-apollo-client": "^2.3.2",
+"@datadog/mobile-react-navigation": "^2.3.2",

Clean-up cache

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules

Install the dependencies

npm install # or yarn

Restart the bundler using the reset-cache flag

npx react-native start --reset-cache

Please let us know if this solves your compilation issue.

PrasathRV commented 6 months ago

Hi @marco-saia-datadog , I am using React Native version 0.65.2 and have one app running in production. During the initial release of the dd-sdk-reactnative(version ^1.0.0-beta3), I installed it in my application, but when I tried to upgrade to a recent version my app crashed in the simulator with the same issue.

Additional Info:

I checked the issue part, located in the path (node_module/@datadog/mobile-react-native/src/sdk/FileBasedConfiguration/FileBasedConfiguration.ts)

In line 65, a file path(datadog-configuration.json) is mentioned that is not found in the consent directory. Is it automatically created during the project build?


const resolveJSONConfiguration = (
    userSpecifiedConfiguration: unknown
): Record<string, any> => {
    if (
        userSpecifiedConfiguration === undefined ||
        userSpecifiedConfiguration === null
    ) {
        try {
            // This corresponds to a file located at the root of a RN project.
            // /!\ We have to write the require this way as dynamic requires are not supported by Hermes.
            // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires

> /* -----> The issue is trigger from here --->*/
           const jsonContent = require('../../../../../../datadog-configuration.json');

            if (
                typeof jsonContent !== 'object' ||
                !jsonContent['configuration']
            ) {
                console.error(`Failed to parse the Datadog configuration file located at the root of the project.
Your configuration must validate the node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json JSON schema.
You can use VSCode to check your configuration by adding the following line to your JSON file:
{
    "$schema": "./node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json",
}`);

                return {};
            }

            return jsonContent.configuration as Record<string, any>;
        } catch (error) {
            console.error(`Failed to read Datadog configuration file at the root of the project.
If you don't have a datadog-configuration.json file at the same level as your node_modules directory,\
please use the following syntax:\n
new FileBasedConfiguration({configuration: require('./file/to/configuration-file.json')})
`);
            return {};
        }
    }
    if (
        typeof userSpecifiedConfiguration !== 'object' ||
        !(userSpecifiedConfiguration as any)['configuration']
    ) {
        console.error(`Failed to parse the Datadog configuration file you provided.
Your configuration must validate the node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json JSON schema.
You can use VSCode to check your configuration by adding the following line to your JSON file:
{
    "$schema": "./node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json",
}`);

        return {};
    }

    return (userSpecifiedConfiguration as any)['configuration'] as Record<
        string,
        any
    >;
};

Can you suggest which version of datadog will work, with this React native version?

marco-saia-datadog commented 6 months ago

Hey @PrasathRV, can you show me how you are initialising the SDK?

The datadog-configuration.json file is supposed to be created by you in the root folder of your project when using the file-based initialisation.

Normally, you would create the datadog-configuration.json file and set it up like this:

{
  "$schema": "./node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json",
  "configuration": {
  }
}

You would then define your configuration parameters.

The "$schema" attribute allows modern IDEs to show errors if the configuration is incomplete or invalid and add autocompletion.

This change was introduced in version 2.3.0 to allow native initialization, therefore I believe you should be able to use v2.2.0 to avoid this issue.

However, I strongly recommend refactoring your implementation to keep Datadog SDK up to date - you can still use the old approach with v2.3.0, but there must be something wrong with the way you are currently initializing the SDK, and it has to be addressed.

PrasathRV commented 6 months ago

Thanks @marco-saia-datadog for the suggestion. I will update my dd-sdk-reactnative version to the latest version 👍 Can you provide me a sample datadog-configuration.json for my reference, please

marco-saia-datadog commented 6 months ago

@PrasathRV

No problem!

Here is an example:

{
  "$schema": "./node_modules/@datadog/mobile-react-native/datadog-configuration.schema.json",
  "configuration": {
    "applicationId": "<app-id>",
    "clientToken": "<client-token>",
    "env": "<env>",
    "verbosity": "DEBUG",
    "batchSize": "SMALL",
    "uploadFrequency": "FREQUENT",
    "trackingConsent": "GRANTED",
    "trackInteractions": true,
    "longTaskThresholdMs": 100,
    "nativeCrashReportEnabled": true,
    "trackResources": true,
    "trackErrors": true,
    "telemetrySampleRate": 100,
    "serviceName": "com.myapp.test"
  }
}

Also, feel free to show me how you are initialising the SDK - after redacting your App ID and Client Token.

marco-saia-datadog commented 5 months ago

Hi 👋 I am closing this issue since there has been no activity for a while. Feel free to re-open it if the issue persists on your side!