Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 4 additions & 14 deletions contents/docs/libraries/kmp/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -547,29 +547,20 @@ PostHog.setup(
)
```

You can also enable experimental screenshot mode instead of the default wireframe recording:
Recordings are masked screenshots on Android and iOS. Screenshots show everything that isn't masked, including custom-drawn views, maps, and video, so make sure masking covers anything sensitive. See [how mobile replay works](/docs/session-replay/mobile#how-it-works).

```kotlin
sessionRecording = SessionRecordingConfig(
enabled = true,
screenshot = true, // capture screenshots instead of wireframes
maskAllImages = true, // recommended when using screenshots
)
```

> **Warning:** Screenshots may contain sensitive information. Make sure masking is configured appropriately before enabling screenshot mode.
> **Note:** Version 0.11.0 removes the `screenshot` option, because the native Android and iOS 4.0 SDKs always record screenshots. Delete it from your `SessionRecordingConfig` when you upgrade. Earlier versions record wireframes unless `screenshot = true`.

On Android, enable experimental mask-alignment verification to help preserve screenshot captures during pixel-only redraws, such as continuously animated content:

```kotlin
sessionRecording = SessionRecordingConfig(
enabled = true,
screenshot = true,
verifyScreenshotMaskAlignment = true,
)
```

`verifyScreenshotMaskAlignment` defaults to `false` and only affects Android screenshot mode. It adds view-hierarchy walks during capture, so evaluate its performance in your app. Windows with a Compose root already use verification regardless of this flag; setting it to `false` doesn't disable verification for those windows. Other platforms ignore this option.
`verifyScreenshotMaskAlignment` defaults to `false` and only affects Android. It adds view-hierarchy walks during capture, so evaluate its performance in your app. Windows with a Compose root already use verification regardless of this flag; setting it to `false` doesn't disable verification for those windows. Other platforms ignore this option.

## Opt out of data capture

Expand Down Expand Up @@ -705,10 +696,9 @@ Pass a `SessionRecordingConfig` to `PostHogConfig.sessionRecording`. Defaults ma
| `maskAllImages` | `Boolean` | `true` | Masks all images. |
| `captureNetworkTelemetry` | `Boolean` | `true` | Includes network requests in the recording. |
| `captureLogs` | `Boolean` | `false` | Captures console and system logs (iOS and web). |
| `screenshot` | `Boolean` | `false` | Uses screenshots instead of wireframes (experimental, Android and iOS). |
| `captureLogcat` | `Boolean` | `true` | Captures Android logcat output (Android only). |
| `debouncerDelayMs` | `Long` | `1000` | Touch event debounce delay in milliseconds (Android only). |
| `verifyScreenshotMaskAlignment` | `Boolean` | `false` | Experimental mask-alignment verification for Android screenshot mode. Adds view-hierarchy walks during capture. Compose-rooted windows always use verification. Ignored on other platforms. |
| `verifyScreenshotMaskAlignment` | `Boolean` | `false` | Experimental mask-alignment verification for Android screenshot captures. Adds view-hierarchy walks during capture. Compose-rooted windows always use verification. Ignored on other platforms. |

## Platform support

Expand Down
2 changes: 1 addition & 1 deletion contents/docs/session-replay/installation/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ Session replay enables you to record users navigating through your website or mo

<SessionReplayInstall />

> **Note:** Web has the most complete feature support. Mobile platforms have some limitations like wireframe-only mode (unless screenshot mode is enabled) and no keyboard capture. See each platform's page for details.
> **Note:** Web has the most complete feature support. Mobile platforms have some limitations, like no keyboard capture. See each platform's page for details.
24 changes: 13 additions & 11 deletions contents/docs/session-replay/mobile.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,29 @@ Mobile session replay enables you to record user sessions in mobile apps. This i

We have taken our time to make sure we provide a useful and detailed recording experience whilst keeping the performance and security of your app as a top priority. By default, the configuration is restrictive with automatic masking.

### Wireframe mode (default)
### Screenshot mode

> **Note:** Wireframe mode is available in native [Android](/docs/session-replay/installation/android) and [iOS](/docs/session-replay/installation/ios) SDKs. [React Native](/docs/session-replay/installation/react-native) and [Flutter](/docs/session-replay/installation/flutter) always record in [screenshot mode](#screenshot-mode).
The SDK takes a screenshot of the screen when it changes and masks sensitive views before the image leaves the device. Text inputs and images are masked by default, and you can mask any other view yourself. Check your platform's page for the masking options.

Mobile recording is primarily done using native APIs to grab the view hierarchy state when the screen is drawn. This is done carefully so as not to affect performance in any way a user may notice.
Screenshots show everything on screen that isn't masked, including custom-drawn views, maps, and video, so make sure you're masking all relevant views.

The view hierarchy is transformed to a JSON data structure and later rendered as an HTML [wireframe](https://www.figma.com/resource-library/what-is-wireframing/). Since it is a wireframe, the UI won't have the original look and feel but it should be close enough to understand the user's behavior.
On iOS, a `WKWebView` is masked whole when `maskAllTextInputs` or `maskAllImages` is on, and recorded in full when both are off.

Below is an example of a screen captured in wireframe mode in Android:
All SDKs record in screenshot mode: [Android](/docs/session-replay/installation/android) and [iOS](/docs/session-replay/installation/ios) from version 4.0, and [React Native](/docs/session-replay/installation/react-native) and [Flutter](/docs/session-replay/installation/flutter) in every version. This isn't configurable.

![Wireframe mode in mobile replay](https://res.cloudinary.com/dmukukwp6/image/upload/v1722436140/posthog.com/contents/Screenshot_2024-07-31_at_3.27.44_PM.png)
Below is an example of a screen captured in screenshot mode in Android:

### Screenshot mode
![Screenshot mode in mobile replay](https://res.cloudinary.com/dmukukwp6/image/upload/v1722436140/posthog.com/contents/Screenshot_2024-07-31_at_3.16.16_PM.png)

If `screenshot` (Android) or `screenshotMode` (iOS) option is enabled, the SDK will take a screenshot of the screen instead of a wireframe representation. The screenshot may contain sensitive information, so proceed with caution and ensure you're masking all relevant views.
### Wireframe mode (Android and iOS before 4.0)

The React Native and Flutter SDKs always record in screenshot mode. Currently, this is not configurable.
Versions of the native Android and iOS SDKs before 4.0 record in wireframe mode by default. The SDK reads the view hierarchy when the screen is drawn and sends it as JSON, which is rendered as an HTML [wireframe](https://www.figma.com/resource-library/what-is-wireframing/). The UI won't have the original look and feel, but it's close enough to see how people use your app. On iOS, wireframe mode doesn't record SwiftUI screens.

Below is an example of a screen captured in screenshot mode in Android:
To record screenshots on these versions, set `screenshot` (Android) or `screenshotMode` (iOS) to `true`. Version 4.0 removes wireframe mode and both options.

![Screenshot mode in mobile replay](https://res.cloudinary.com/dmukukwp6/image/upload/v1722436140/posthog.com/contents/Screenshot_2024-07-31_at_3.16.16_PM.png)
Below is an example of a screen captured in wireframe mode in Android:

![Wireframe mode in mobile replay](https://res.cloudinary.com/dmukukwp6/image/upload/v1722436140/posthog.com/contents/Screenshot_2024-07-31_at_3.27.44_PM.png)

## Next steps

Expand Down
2 changes: 1 addition & 1 deletion contents/docs/session-replay/start-here.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { IconRewindPlay, IconBolt, IconMagic, IconPerson } from '@posthog/icons'

Add a PostHog SDK to your app and enable session recording. Web needs a snippet or the JavaScript SDK; mobile apps use the React Native, iOS, Android, or Flutter SDKs. Recording is a project setting, so you also have to switch it on in [project settings](https://app.posthog.com/settings/project-replay) before anything is captured.

Web has the most complete feature support. Mobile has a few limits, like wireframe-only mode unless you turn on screenshot mode, so check your platform's page.
Web has the most complete feature support. Mobile has a few limits, like no keyboard capture, so check your platform's page.

<OSButton variant="primary" asLink to="/docs/session-replay/installation">Install session replay</OSButton>

Expand Down
Loading