grafana / grafana/faro-react-native-sdk

[FEATURE] WebView cross-boundary tracing and session correlation

Open
#19 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.