grafana / grafana/faro-react-native-sdk
[FEATURE] WebView cross-boundary tracing and session correlation
- Dominant language
- TypeScript
- Stars
- 9
- Forks
- 4
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 9
Description
## Feature Request
Add a `FaroWebViewBridge` (or equivalent) API that propagates distributed trace context and session correlation between a React Native app and a web app running inside a WebView.
### Context
The [Faro Flutter SDK](https://github.com/grafana/faro-flutter-sdk) has implemented this as `FaroWebViewBridge` (see [PR #170](https://github.com/grafana/faro-flutter-sdk/pull/170)). The React Native SDK should offer equivalent functionality for feature parity.
### What it should do
1. **Trace propagation (Native → Web)**: Decorate a URL with a `traceparent` query parameter so the web app can continue the distributed trace started in the native app.
2. **Session correlation (Native → Web)**: Append `session.parent_id` and `session.parent_app` query parameters so the web app knows which mobile session spawned it.
3. **Session correlation (Web → Native)**: Provide a method to record a `session.linked` event when the web app sends its Faro session ID back (e.g. via a message bridge), with `session.child_id` and `session.child_app` attributes.
4. **Span lifecycle**: Create a span around the WebView lifetime that is ended when the WebView is dismissed.
### Proposed API (adapted from Flutter)
```typescript
const bridge = new FaroWebViewBridge();
// Decorate URL and start span
const instrumentedUrl = bridge.instrumentedUrl('https://my-web-app.com/login');
// When web app sends back its session info:
bridge.linkChildSession({ sessionId: webSessionId, appName: webAppName });
// When WebView is dismissed:
bridge.end();
```
### Reference implementation
- **Flutter SDK**: [`FaroWebViewBridge`](https://github.com/grafana/faro-flutter-sdk/blob/main/lib/src/webview/faro_webview_bridge.dart)
- **React web-side demo**: [`example/webview_demo/`](https://github.com/grafana/faro-flutter-sdk/tree/main/example/webview_demo) in the Flutter SDK repo
### Session correlation in Grafana
| Starting from | How to find the linked session |
|----------------|-------------------------------|
| Web session | Filter on `session.parent_id` to find the originating mobile session |
| Mobile session | Look for `session.linked` events; read `session.child_id` for spawned web sessions |
Contributor guide
Assessment
This issue has not been assessed yet.