diff --git a/docs/platforms/react-native/common/configuration/webview.mdx b/docs/platforms/react-native/common/configuration/webview.mdx index 6dee56715513b..8a874f02ba0de 100644 --- a/docs/platforms/react-native/common/configuration/webview.mdx +++ b/docs/platforms/react-native/common/configuration/webview.mdx @@ -1,22 +1,91 @@ --- title: WebView -description: "Learn how to set up the Sentry React Native and Browser SDKs with React Native WebView." +description: "Learn how to connect traces and monitor errors and performance across the Sentry React Native and Browser SDKs with React Native WebView." --- -To monitor errors and performance in web views of React Native applications, you need to set up Sentry SDKs in both the mobile application and the web projects running in the web views. +To monitor errors and performance in web views of React Native applications, you set up Sentry SDKs in both the mobile application and the web projects running in the web views. You can also connect their traces, so a single distributed trace spans your React Native app and the web content it embeds. ## Application Monitoring -The Sentry React Native SDK doesn't interact with the mobile application's web views. To monitor errors and performance in the React Native part of the application follow the [Sentry React Native SDK setup instructions](/platforms/react-native/). +To monitor errors and performance in the React Native part of the application, follow the [Sentry React Native SDK setup instructions](/platforms/react-native/). The React Native SDK doesn't capture errors that happen inside a web view — those are captured by the JavaScript SDK running in the web project (see [WebView Monitoring](#webview-monitoring)). ## WebView Monitoring -To monitor errors and performance in web views choose the appropriate Sentry JavaScript SDK depending on the framework used in the web project. +To monitor errors and performance in web views, choose the appropriate Sentry JavaScript SDK depending on the framework used in the web project. - [Sentry React Native SDK](/platforms/react-native/) (if the web project uses React Native Web or Expo) - [Sentry React SDK](/platforms/javascript/guides/react/) (if the web project uses React) - [Other Sentry JavaScript SDKs](/platforms/javascript/) +## Connect Traces + + + +`sentryWebViewProps` is available from React Native SDK version `8.32.0`. + + + +Use `sentryWebViewProps` to inject the React Native app's trace into a web view. The Browser SDK running in the web page picks it up on pageload and continues the same trace, so the web page's pageload transaction and errors share the trace of your React Native app. The result is a single connected trace across the native and web parts of the user journey. + +Spread the props it returns onto your [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) ``: + +```jsx +import { sentryWebViewProps } from "@sentry/react-native"; +import { WebView } from "react-native-webview"; + +; +``` + +For the connection to take effect: + +- The web page must run a Sentry [Browser SDK](/platforms/javascript/) with tracing enabled (the `browserTracingIntegration`). It continues the trace from the injected `sentry-trace` and `baggage` `` tags automatically — no additional configuration is needed on the web page. +- `allowedHosts` declares the hosts you trust to load in this WebView. A page is matched when its hostname equals an entry or is a subdomain of it (for example, `"example.com"` matches both `example.com` and `app.example.com`). Matching is case-insensitive, and the trace context is only written on matching pages. + + + +On iOS the trace tags are written before any page script runs. On **Android**, `react-native-webview` injects them asynchronously as the page starts, so they can land slightly after the page's first synchronous `` scripts. Load and initialize `@sentry/browser` the usual way — from a `