Merge pull request #542 from DataDog/louiszawadzki/fix-webview-new-ar…

…chitecture

Fix webview telemetry for new architecture apps

packages/react-native-webview/src/NativeDdSdk.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+/**
+ * We have to redefine the spec for the Native SDK here to be able to use the new architecture.
+ * We don't declare it in a spec file so we don't end up with a duplicate definition of the native module.
+ */
+interface PartialNativeDdSdkSpec extends TurboModule {
+    consumeWebviewEvent(message: string): Promise<void>;
+    telemetryError(message: string, stack: string, kind: string): Promise<void>;
+}
+export const NativeDdSdk = TurboModuleRegistry.get<PartialNativeDdSdkSpec>(
+    'DdSdk'
+);

packages/react-native-webview/src/__utils__/formatAllowedHosts.ts

@@ -3,14 +3,14 @@
  * This product includes software developed at Datadog (https://www.datadoghq.com/).
  * Copyright 2016-Present Datadog, Inc.
  */
-import { NativeModules } from 'react-native';
+import { NativeDdSdk } from '../NativeDdSdk';
 
 export function formatAllowedHosts(allowedHosts?: string[]): string {
     try {
         return `'${JSON.stringify(allowedHosts)}'`;
     } catch (e: any) {
-        if (NativeModules.DdSdk && NativeModules.DdSdk.telemetryError) {
-            NativeModules.DdSdk.telemetryError(
+        if (NativeDdSdk) {
+            NativeDdSdk.telemetryError(
                 getErrorMessage(e),
                 getErrorStackTrace(e),
                 'AllowedHostsError'

packages/react-native-webview/src/index.tsx

@@ -5,10 +5,9 @@
  */
 import type { WebViewMessageEvent, WebViewProps } from 'react-native-webview';
 import { WebView as RNWebView } from 'react-native-webview';
-import type { TurboModule } from 'react-native';
-import { TurboModuleRegistry } from 'react-native';
 import React, { forwardRef, useCallback } from 'react';
 
+import { NativeDdSdk } from './NativeDdSdk';
 import {
     DATADOG_MESSAGE_PREFIX,
     getInjectedJavaScriptBeforeContentLoaded
@@ -50,12 +49,3 @@ const WebViewComponent = (props: Props, ref: React.Ref<RNWebView<Props>>) => {
 export const WebView = forwardRef(WebViewComponent);
 
 export default WebView;
-
-/**
- * We have to redefine the spec for the Native SDK here to be able to use the new architecture.
- * We don't declare it in a separate file so we don't end up with a duplicate definition of the native module.
- */
-interface PartialNativeDdSdkSpec extends TurboModule {
-    consumeWebviewEvent(message: string): Promise<void>;
-}
-const NativeDdSdk = TurboModuleRegistry.get<PartialNativeDdSdkSpec>('DdSdk');