@datadog/mobile-react-native-webview 2.4.3 → 2.5.0

package/lib/module/utils/webview-js-utils.js

@@ -0,0 +1,115 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+import { NativeDdSdk } from '../ext-specs/NativeDdSdk';
+export const DATADOG_MESSAGE_PREFIX = '[DATADOG]';
+
+/**
+ * Internal Datadog Message Type
+ */
+
+/**
+ * Internal Datadog Message Format.
+ */
+
+/**
+ * Wraps the given JS Code in a try and catch block.
+ * @param javascriptCode The JS Code to wrap in a try and catch block.
+ * @returns the wrapped JS code.
+ */
+export const wrapJsCodeInTryAndCatch = javascriptCode => javascriptCode ? `
+    try{
+      ${javascriptCode}
+    }
+    catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        source: 'DATADOG',
+        type: 'ERROR',
+        message: errorMsg
+      }));
+      true;
+    }` : undefined;
+
+/**
+ * Legacy JS code for bridging the WebView events to DataDog native SDKs for consumption.
+ * @param allowedHosts The list of allowed hosts.
+ * @param customJavaScriptCode Custom user JS code to inject along with the Datadog bridging logic.
+ * @returns The JS code block as a string.
+ */
+export const getWebViewEventBridgingJS = (allowedHosts, customJavaScriptCode) => `
+    window.DatadogEventBridge = {
+      send(msg) {
+        window.ReactNativeWebView.postMessage(JSON.stringify({
+          source: 'DATADOG',
+          type: 'NATIVE_EVENT',
+          message: msg
+        }));
+        true;
+      },
+      getAllowedWebViewHosts() {
+        return ${formatAllowedHosts(allowedHosts)}
+      }
+    };
+    try{      
+      ${customJavaScriptCode}
+    }
+    catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        source: 'DATADOG',
+        type: 'ERROR',
+        message: errorMsg
+      }));
+      true;
+    }
+  `;
+function formatAllowedHosts(allowedHosts) {
+  try {
+    return `'${JSON.stringify(allowedHosts)}'`;
+  } catch (e) {
+    if (NativeDdSdk) {
+      NativeDdSdk.telemetryError(getErrorMessage(e), getErrorStackTrace(e), 'AllowedHostsError');
+    }
+    return "'[]'";
+  }
+}
+const getErrorMessage = error => {
+  const EMPTY_MESSAGE = 'Unknown Error';
+  let message = EMPTY_MESSAGE;
+  if (error === undefined || error === null) {
+    message = EMPTY_MESSAGE;
+  } else if (typeof error === 'object' && 'message' in error) {
+    message = String(error.message);
+  } else {
+    message = String(error);
+  }
+  return message;
+};
+const getErrorStackTrace = error => {
+  const EMPTY_STACK_TRACE = '';
+  let stack = EMPTY_STACK_TRACE;
+  try {
+    if (error === undefined || error === null) {
+      stack = EMPTY_STACK_TRACE;
+    } else if (typeof error === 'string') {
+      stack = EMPTY_STACK_TRACE;
+    } else if (typeof error === 'object') {
+      if ('stacktrace' in error) {
+        stack = String(error.stacktrace);
+      } else if ('stack' in error) {
+        stack = String(error.stack);
+      } else if ('componentStack' in error) {
+        stack = String(error.componentStack);
+      } else if ('sourceURL' in error && 'line' in error && 'column' in error) {
+        stack = `at ${error.sourceURL}:${error.line}:${error.column}`;
+      }
+    }
+  } catch (e) {
+    // Do nothing
+  }
+  return stack;
+};
+//# sourceMappingURL=webview-js-utils.js.map

package/lib/module/utils/webview-js-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NativeDdSdk","DATADOG_MESSAGE_PREFIX","wrapJsCodeInTryAndCatch","javascriptCode","undefined","getWebViewEventBridgingJS","allowedHosts","customJavaScriptCode","formatAllowedHosts","JSON","stringify","e","telemetryError","getErrorMessage","getErrorStackTrace","error","EMPTY_MESSAGE","message","String","EMPTY_STACK_TRACE","stack","stacktrace","componentStack","sourceURL","line","column"],"sourceRoot":"../../../src","sources":["utils/webview-js-utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/ext-specs/NativeDdLogs.d.ts

@@ -0,0 +1,16 @@
+import type { TurboModule } from 'react-native';
+/**
+ * Do not import this Spec directly, use DdNativeLogsType instead.
+ */
+export interface Spec extends TurboModule {
+    readonly getConstants: () => {};
+    /**
+     * Send a log with ERROR level.
+     * @param message: The message to send.
+     * @param context: The additional context to send.
+     */
+    readonly error: (message: string, context: Object) => Promise<void>;
+}
+declare const _default: Spec | null;
+export default _default;
+//# sourceMappingURL=NativeDdLogs.d.ts.map

package/lib/typescript/ext-specs/NativeDdLogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDdLogs.d.ts","sourceRoot":"","sources":["../../../src/ext-specs/NativeDdLogs.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,IAAK,SAAQ,WAAW;IACrC,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACvE;;AAGD,wBAAuD"}

package/lib/typescript/ext-specs/NativeDdSdk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDdSdk.d.ts","sourceRoot":"","sources":["../../../src/ext-specs/NativeDdSdk.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACvD,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/E;AAED,eAAO,MAAM,WAAW,+BAEvB,CAAC"}

package/lib/typescript/index.d.ts

@@ -2,11 +2,31 @@ import type { WebViewProps } from 'react-native-webview';
 import { WebView as RNWebView } from 'react-native-webview';
 import React from 'react';
 type Props = WebViewProps & {
+    /**
+     * The list of allowed hosts for Datadog WebView tracking.
+     */
     allowedHosts?: string[];
+    /**
+     * Whether injected User JS Code errors should be logged to Datadog (default: false).
+     */
+    logUserCodeErrors?: boolean;
+    /**
+     * Custom JS Code to inject before the WebView content is loaded.
+     */
     injectedJavaScriptBeforeContentLoaded?: string;
 };
 export declare const WebView: React.ForwardRefExoticComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
+    /**
+     * The list of allowed hosts for Datadog WebView tracking.
+     */
     allowedHosts?: string[] | undefined;
+    /**
+     * Whether injected User JS Code errors should be logged to Datadog (default: false).
+     */
+    logUserCodeErrors?: boolean | undefined;
+    /**
+     * Custom JS Code to inject before the WebView content is loaded.
+     */
     injectedJavaScriptBeforeContentLoaded?: string | undefined;
 } & React.RefAttributes<RNWebView<Props>>>;
 export default WebView;

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAuB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAkC,MAAM,OAAO,CAAC;AAQvD,KAAK,KAAK,GAAG,YAAY,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,qCAAqC,CAAC,EAAE,MAAM,CAAC;CAClD,CAAC;AA8BF,eAAO,MAAM,OAAO;;;0CAA+B,CAAC;AAEpD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAuB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAkC,MAAM,OAAO,CAAC;AAYvD,KAAK,KAAK,GAAG,YAAY,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;CAClD,CAAC;AAyEF,eAAO,MAAM,OAAO;IArFhB;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;0CA2E4C,CAAC;AAEpD,eAAe,OAAO,CAAC"}

package/lib/typescript/specs/NativeDdWebView.d.ts

@@ -0,0 +1,4 @@
+import type { CommonNativeWebViewProps } from 'react-native-webview/lib/WebViewTypes';
+declare const NativeDdWebView: import("react-native").HostComponent<CommonNativeWebViewProps> | undefined;
+export { NativeDdWebView };
+//# sourceMappingURL=NativeDdWebView.d.ts.map

package/lib/typescript/specs/NativeDdWebView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeDdWebView.d.ts","sourceRoot":"","sources":["../../../src/specs/NativeDdWebView.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AAKtF,QAAA,MAAM,eAAe,4EAEN,CAAC;AAEhB,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/typescript/utils/env-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isNewArchitecture: () => boolean;
+//# sourceMappingURL=env-utils.d.ts.map

package/lib/typescript/utils/env-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"env-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/env-utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,QAAO,OAEpC,CAAC"}

package/lib/typescript/utils/webview-js-utils.d.ts

@@ -0,0 +1,34 @@
+export declare const DATADOG_MESSAGE_PREFIX = "[DATADOG]";
+/**
+ * Internal Datadog Message Type
+ */
+export type DatadogMessageType = 
+/**
+ * Signals errors that occured during the execution of JavaScript code in the WebView.
+ */
+'ERROR'
+/**
+ * Signals events that should be forwarded and consumed by the native SDK.
+ */
+ | 'NATIVE_EVENT';
+/**
+ * Internal Datadog Message Format.
+ */
+export type DatadogMessageFormat = {
+    type: DatadogMessageType;
+    message: string;
+};
+/**
+ * Wraps the given JS Code in a try and catch block.
+ * @param javascriptCode The JS Code to wrap in a try and catch block.
+ * @returns the wrapped JS code.
+ */
+export declare const wrapJsCodeInTryAndCatch: (javascriptCode?: string) => string | undefined;
+/**
+ * Legacy JS code for bridging the WebView events to DataDog native SDKs for consumption.
+ * @param allowedHosts The list of allowed hosts.
+ * @param customJavaScriptCode Custom user JS code to inject along with the Datadog bridging logic.
+ * @returns The JS code block as a string.
+ */
+export declare const getWebViewEventBridgingJS: (allowedHosts?: string[], customJavaScriptCode?: string) => string;
+//# sourceMappingURL=webview-js-utils.d.ts.map

package/lib/typescript/utils/webview-js-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webview-js-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/webview-js-utils.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,sBAAsB,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,kBAAkB;AAC1B;;GAEG;AACD,OAAO;AACT;;GAEG;GACD,cAAc,CAAC;AAErB;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAC/B,IAAI,EAAE,kBAAkB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,oBACf,MAAM,KACxB,MAAM,GAAG,SAeO,CAAC;AAEpB;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,kBACnB,MAAM,EAAE,yBACA,MAAM,KAC9B,MA2BA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datadog/mobile-react-native-webview",
-    "version": "2.4.3",
+    "version": "2.5.0",
     "description": "A client-side React Native module to interact with react-native-webview and Datadog",
     "keywords": [
         "datadog",
@@ -23,7 +23,16 @@
     "main": "lib/commonjs/index",
     "files": [
         "src/**",
-        "lib/**"
+        "lib/**",
+        "android/build.gradle",
+        "android/detekt.yml",
+        "android/gradle.properties",
+        "android/src/**",
+        "ios/Sources/**",
+        "ios/DatadogSDKReactNativeWebView.xcodeproj/project.xcworkspace/xcsharedata",
+        "ios/DatadogSDKReactNativeWebView.xcodeproj/project.xcworkspace/*.xcworkspacedata",
+        "ios/DatadogSDKReactNativeWebView.xcodeproj/*.pbxproj",
+        "DatadogSDKReactNativeWebView.podspec"
     ],
     "types": "lib/typescript/index.d.ts",
     "react-native": "src/index",
@@ -39,7 +48,8 @@
     },
     "devDependencies": {
         "@testing-library/react-native": "7.0.2",
-        "react-native-builder-bob": "0.26.0"
+        "react-native-builder-bob": "0.26.0",
+        "react-native-webview": "^13.12.2"
     },
     "peerDependencies": {
         "@datadog/mobile-react-native": "^2.0.1",
@@ -76,5 +86,13 @@
             ]
         ]
     },
-    "gitHead": "d3b0fcb425c34d787de79ee8241fef84cd88d1a0"
+    "codegenConfig": {
+        "name": "DdSdkReactNativeWebView",
+        "type": "all",
+        "jsSrcsDir": "./src/specs",
+        "android": {
+            "javaPackageName": "com.datadog.reactnative.webview"
+        }
+    },
+    "gitHead": "2ef793eaf02bf1ac20d49932ff13762177142430"
 }

package/src/__tests__/WebviewDatadog.test.tsx

@@ -3,62 +3,58 @@
  * This product includes software developed at Datadog (https://www.datadoghq.com/).
  * Copyright 2016-Present Datadog, Inc.
  */
-import { fireEvent, render } from '@testing-library/react-native';
-import type { WebView as RNWebView } from 'react-native-webview';
-import { NativeModules } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+import { WebView as RNWebView } from 'react-native-webview';
 import React from 'react';
 
-import { DATADOG_MESSAGE_PREFIX } from '../__utils__/getInjectedJavaScriptBeforeContentLoaded';
 import { WebView } from '../index';
+import { NativeDdWebView } from '../specs/NativeDdWebView';
+
+jest.mock('react-native-webview', () => {
+    return {
+        WebView: jest.fn()
+    };
+});
+
+jest.mock('../specs/NativeDdWebView', () => {
+    return {
+        NativeDdWebView: jest.fn()
+    };
+});
 
 describe('WebView', () => {
     beforeEach(() => {
         jest.clearAllMocks();
     });
-    const DdMessage = 'custom datadog event';
-    const datadogEvent = {
-        nativeEvent: {
-            data: `${DATADOG_MESSAGE_PREFIX} ${DdMessage}`
-        }
-    };
-    const userDefinedEvent = {
-        nativeEvent: {
-            data: 'custom user-defined message'
-        }
-    };
-    it('calls provided onMessage props', async () => {
-        const onMessage = jest.fn();
-        const { findByTestId } = render(
-            <WebView onMessage={onMessage} testID="webView" allowedHosts={[]} />
-        );
 
-        const webView = await findByTestId('webView');
+    it('WebView is rendered with native component', () => {
+        // Given
+        const allowedHosts = ['example.com', 'localhost'];
 
-        fireEvent(webView, 'message', userDefinedEvent);
-        expect(onMessage).toHaveBeenCalledWith(userDefinedEvent);
+        // When
+        render(<WebView allowedHosts={allowedHosts} />);
 
-        fireEvent(webView, 'message', datadogEvent);
-        expect(onMessage).toHaveBeenCalledTimes(1);
-        expect(onMessage).not.toHaveBeenCalledWith(datadogEvent);
-    });
-    it('calls consumeWebviewEvent with Datadog logs', async () => {
-        const { findByTestId } = render(
-            <WebView testID="webView" allowedHosts={[]} />
-        );
-        const webView = await findByTestId('webView');
-        fireEvent(webView, 'message', datadogEvent);
+        // Then
+        const mockedWebView = jest.mocked(RNWebView);
+        const component =
+            mockedWebView.mock.calls[0][0].nativeConfig?.component;
+        const mockedNativeWebView = jest.mocked(NativeDdWebView);
 
-        expect(NativeModules.DdSdk.consumeWebviewEvent).toHaveBeenCalledWith(
-            DdMessage
-        );
+        expect(component).toBe(mockedNativeWebView);
     });
-    it('forwards ref to the actual RN Webview component', async () => {
-        const ref = React.createRef<RNWebView>();
 
-        const { findByTestId } = render(
-            <WebView testID="webView" allowedHosts={[]} ref={ref} />
-        );
-        await findByTestId('webView');
-        expect(ref.current?.injectJavaScript).toBeDefined();
+    it('Datadog WebView allowedHosts are forwarded to WebView nativeConfig props', () => {
+        // Given
+        const allowedHosts = ['example.com', 'localhost'];
+
+        // When
+        render(<WebView allowedHosts={allowedHosts} />);
+
+        // Then
+        const mockedWebView = jest.mocked(RNWebView);
+        const props = mockedWebView.mock.calls[0][0].nativeConfig?.props as any;
+
+        expect(props?.allowedHosts).toBe(allowedHosts);
     });
 });

package/src/__tests__/WebviewDatadogInjectedJS.test.tsx

@@ -3,26 +3,45 @@
  * This product includes software developed at Datadog (https://www.datadoghq.com/).
  * Copyright 2016-Present Datadog, Inc.
  */
+
 import { render } from '@testing-library/react-native';
+import { WebView as RNWebView } from 'react-native-webview';
 import React from 'react';
 
 import { WebView } from '../index';
 
+import { dedent } from './__utils__/string-utils';
+
 jest.mock('react-native-webview', () => {
     return {
         WebView: jest.fn(props => {
             // eslint-disable-next-line no-eval
             eval(props.injectedJavaScriptBeforeContentLoaded);
-            return null;
+            // eslint-disable-next-line no-eval
+            eval(props.injectedJavaScript);
+            return undefined;
         })
     };
 });
+
 const callfunction = jest.fn();
+const postMessageMock = jest.fn();
+
+window['ReactNativeWebView'] = {
+    postMessage: postMessageMock
+};
 
 describe('Webview', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it('should pass injectedJavaScriptBeforeContentLoaded prop to WebView component', () => {
+        // Given
         const injectedJavaScriptBeforeContentLoaded = 'callfunction()';
         const allowedHosts = ['example.com', 'localhost'];
+
+        // When
         render(
             <WebView
                 allowedHosts={allowedHosts}
@@ -31,6 +50,186 @@ describe('Webview', () => {
                 }
             />
         );
+
+        // Then
+        expect(callfunction).toHaveBeenCalled();
+    });
+
+    it('should pass injectedJavaScript prop to WebView component', () => {
+        // Given
+        const injectedJavaScript = 'callfunction()';
+        const allowedHosts = ['example.com', 'localhost'];
+
+        // When
+        render(
+            <WebView
+                allowedHosts={allowedHosts}
+                injectedJavaScript={injectedJavaScript}
+            />
+        );
+
+        // Then
+        expect(callfunction).toHaveBeenCalled();
+    });
+
+    it('should pass injectedJavaScriptBeforeContentLoaded prop to WebView component W { injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true }', () => {
+        // Given
+        const injectedJavaScript = 'callfunction()';
+        const allowedHosts = ['example.com', 'localhost'];
+
+        // When
+        render(
+            <WebView
+                allowedHosts={allowedHosts}
+                injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true}
+                injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
+            />
+        );
+
+        // Then
+        expect(callfunction).toHaveBeenCalled();
+    });
+
+    it('should pass injectedJavaScript prop to WebView component W { injectedJavaScriptForMainFrameOnly = true }', () => {
+        // Given
+        const injectedJavaScript = 'callfunction()';
+        const allowedHosts = ['example.com', 'localhost'];
+
+        // When
+        render(
+            <WebView
+                allowedHosts={allowedHosts}
+                injectedJavaScriptForMainFrameOnly={true}
+                injectedJavaScript={injectedJavaScript}
+            />
+        );
+
+        // Then
         expect(callfunction).toHaveBeenCalled();
     });
+
+    it('should wrap injectedJavaScript in try & catch block', () => {
+        // Given
+        const onMessage = jest.fn();
+        const allowedHosts = ['localhost', 'example.com'];
+        const injectedJavaScript = 'testInjectedJavaScript()';
+
+        // When
+        render(
+            <WebView
+                onMessage={onMessage}
+                allowedHosts={allowedHosts}
+                injectedJavaScript={injectedJavaScript}
+            />
+        );
+
+        // Then
+        const mockedWebView = jest.mocked(RNWebView);
+        const realInjectedJs = dedent(
+            mockedWebView.mock.calls[0][0].injectedJavaScript ?? ''
+        );
+        const expected = dedent(`
+            try{
+              testInjectedJavaScript()
+            }
+            catch (error) {
+              const errorMsg = error instanceof Error ? error.message : String(error);
+              window.ReactNativeWebView.postMessage(JSON.stringify({
+                source: 'DATADOG',
+                type: 'ERROR',
+                message: errorMsg
+              }));
+              true;
+            }`);
+
+        expect(realInjectedJs).toBe(expected);
+    });
+
+    it('should wrap injectedJavaScriptBeforeContentLoaded in try & catch block', () => {
+        // Given
+        const onMessage = jest.fn();
+        const allowedHosts = ['localhost', 'example.com'];
+        const injectedJavaScript = 'testInjectedJavaScript()';
+
+        // When
+        render(
+            <WebView
+                onMessage={onMessage}
+                allowedHosts={allowedHosts}
+                injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
+            />
+        );
+
+        // Then
+        const mockedWebView = jest.mocked(RNWebView);
+        const realInjectedJs = dedent(
+            mockedWebView.mock.calls[0][0]
+                .injectedJavaScriptBeforeContentLoaded ?? ''
+        );
+        const expected = dedent(`
+            try{
+              testInjectedJavaScript()
+            }
+            catch (error) {
+              const errorMsg = error instanceof Error ? error.message : String(error);
+              window.ReactNativeWebView.postMessage(JSON.stringify({
+                source: 'DATADOG',
+                type: 'ERROR',
+                message: errorMsg
+              }));
+              true;
+            }`);
+
+        expect(realInjectedJs).toBe(expected);
+    });
+
+    it('should call postMessage with datadog error event W injectedJavaScript has errors', () => {
+        // Given
+        const onMessage = jest.fn();
+        const allowedHosts = ['localhost', 'example.com'];
+        const injectedJavaScript = 'testInjectedJavaScript()';
+
+        // When
+        render(
+            <WebView
+                onMessage={onMessage}
+                allowedHosts={allowedHosts}
+                injectedJavaScript={injectedJavaScript}
+            />
+        );
+
+        // Then
+        expect(postMessageMock).toHaveBeenCalledWith(
+            JSON.stringify({
+                source: 'DATADOG',
+                type: 'ERROR',
+                message: 'testInjectedJavaScript is not defined'
+            })
+        );
+    });
+
+    it('should call postMessage with datadog error event W injectedJavaScriptBeforeContentLoaded has errors', () => {
+        // Given
+        const onMessage = jest.fn();
+        const allowedHosts = ['localhost', 'example.com'];
+        const injectedJavaScript = 'testInjectedJavaScript()';
+
+        // When
+        render(
+            <WebView
+                onMessage={onMessage}
+                allowedHosts={allowedHosts}
+                injectedJavaScriptBeforeContentLoaded={injectedJavaScript}
+            />
+        );
+
+        // Then
+        expect(postMessageMock).toHaveBeenCalledWith(
+            JSON.stringify({
+                source: 'DATADOG',
+                type: 'ERROR',
+                message: 'testInjectedJavaScript is not defined'
+            })
+        );
+    });
 });

package/src/__tests__/WebviewDatadogPerformance.test.tsx

@@ -3,6 +3,7 @@
  * This product includes software developed at Datadog (https://www.datadoghq.com/).
  * Copyright 2016-Present Datadog, Inc.
  */
+
 import { render } from '@testing-library/react-native';
 import { WebView as RNWebView } from 'react-native-webview';
 import React from 'react';
@@ -20,8 +21,15 @@ describe('WebView performance', () => {
         jest.clearAllMocks();
     });
     it('should update the onMessage prop of the RNWebView component', () => {
+        /**
+         * GIVEN
+         */
         const onMessage = jest.fn();
         const allowedHosts = ['localhost', 'example.com'];
+
+        /**
+         * WHEN
+         */
         const { rerender } = render(
             <WebView onMessage={onMessage} allowedHosts={allowedHosts} />
         );
@@ -34,6 +42,10 @@ describe('WebView performance', () => {
         rerender(
             <WebView onMessage={newOnMessage} allowedHosts={allowedHosts} />
         );
+
+        /**
+         * THEN
+         */
         const mockedWebView = jest.mocked(RNWebView);
         // Verify that the onMessage prop of the RNWebView component has changed
         expect(mockedWebView.mock.calls[0][0].onMessage).toBe(