From 69fc0194bdcddce9b99c135c210712d0fb718db4 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 28 Sep 2026 14:41:43 +0200 Subject: [PATCH 1/4] docs(react-native): Document sentryWebViewProps for connecting WebView traces Add a "Connect Traces" section to the React Native WebView page covering the new `sentryWebViewProps` helper (available in SDK 8.29.0): usage, `allowedHosts` gating, the Android `onMessage` requirement, entry-pageload scope, and cross-project trace stitching. Remove the outdated statement that the SDK doesn't interact with web views. Co-Authored-By: Claude Opus 4.8 --- .../common/configuration/webview.mdx | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/docs/platforms/react-native/common/configuration/webview.mdx b/docs/platforms/react-native/common/configuration/webview.mdx index 027f1655c06dc0..a61bdd60f48923 100644 --- a/docs/platforms/react-native/common/configuration/webview.mdx +++ b/docs/platforms/react-native/common/configuration/webview.mdx @@ -1,22 +1,59 @@ --- 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.29.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` gates which pages receive the trace context. 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. Only listed hosts are instrumented, so the trace context — which can carry release and environment data in `baggage` — never reaches third-party pages loaded in the web view. + + + +If you provide your own `onMessage` handler, spread `sentryWebViewProps` **first** and set `onMessage` after it. The helper returns a no-op `onMessage`, which is required for injected JavaScript to run on Android. + + + +The trace is connected on the web page's initial load. Client-side navigations within a single-page app in the web view start their own traces, as they do in a regular browser. + +The React Native app and the web project can report to different Sentry projects — as long as they're in the same organization, the trace view stitches the transactions together by trace ID. + ## Notes - The JavaScript SDK should be initialized when the web view is created and will be closed when the web view is closed. To monitor all web views in the application, initialize the JavaScript SDK every time a web view is created. From fad01194e1a6a983151a9e95525b927d3b4b7781 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 28 Sep 2026 16:08:24 +0200 Subject: [PATCH 2/4] Update for accuracy --- .../react-native/common/configuration/webview.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/platforms/react-native/common/configuration/webview.mdx b/docs/platforms/react-native/common/configuration/webview.mdx index a61bdd60f48923..0fa204fe97b0d8 100644 --- a/docs/platforms/react-native/common/configuration/webview.mdx +++ b/docs/platforms/react-native/common/configuration/webview.mdx @@ -42,7 +42,13 @@ 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` gates which pages receive the trace context. 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. Only listed hosts are instrumented, so the trace context — which can carry release and environment data in `baggage` — never reaches third-party pages loaded in the web view. +- `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. + + + +`allowedHosts` is checked inside the WebView page as defense-in-depth for honest cross-host navigation — it is **not a strict security boundary**, since a hostile page sharing the WebView could bypass an in-page check. The injected trace context carries no secrets or PII by default; don't put sensitive data in `baggage` for WebViews that may load untrusted pages. + + From eb5cf03e02642bcfd4e66858333353b1021ee186 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 1 Oct 2026 11:47:38 +0200 Subject: [PATCH 3/4] Bump version --- docs/platforms/react-native/common/configuration/webview.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/react-native/common/configuration/webview.mdx b/docs/platforms/react-native/common/configuration/webview.mdx index 0fa204fe97b0d8..7f12e96a29d013 100644 --- a/docs/platforms/react-native/common/configuration/webview.mdx +++ b/docs/platforms/react-native/common/configuration/webview.mdx @@ -21,7 +21,7 @@ To monitor errors and performance in web views, choose the appropriate Sentry Ja -`sentryWebViewProps` is available from React Native SDK version `8.29.0`. +`sentryWebViewProps` is available from React Native SDK version `8.30.0`. From 8b08186a4005b8a683870c50cc6e7f68fbc5a15c Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 1 Oct 2026 14:10:56 +0200 Subject: [PATCH 4/4] Fix trailing slash --- docs/platforms/react-native/common/configuration/webview.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/react-native/common/configuration/webview.mdx b/docs/platforms/react-native/common/configuration/webview.mdx index 9ba140965177f3..5cbb15555d422c 100644 --- a/docs/platforms/react-native/common/configuration/webview.mdx +++ b/docs/platforms/react-native/common/configuration/webview.mdx @@ -41,7 +41,7 @@ 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. +- 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.