-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #172 from openreplay/patch-1.21
- Loading branch information
Showing
5 changed files
with
252 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,31 @@ | ||
| --- | ||
| title: "Advanced Setup" | ||
| metaTitle: "Advanced Setup & Configuration" | ||
| metaDescription: "How to set up and configure OpenReplay." | ||
| title: "How-tos" | ||
| metaTitle: "How to Set Up and Configure OpenReplay" | ||
| metaDescription: "Step-by-step how-tos for setting up and configuring OpenReplay." | ||
| --- | ||
|
|
||
| This section contains everything you need to get started with OpenReplay, from basic to advanced setup. | ||
| This section provides categorized how-tos to help you set up and configure OpenReplay, from basic installation to advanced configurations. | ||
|
|
||
| ## User setup | ||
|
|
||
| ## Main Setup Guides | ||
| - [How to identify a User](/installation/identify-user): Associate your internal user ID with the session being recorded. | ||
| - [How to send Metadata](/installation/metadata): Also referred to as traits or user variables, metadata provides additional information about users while recording sessions. | ||
|
|
||
| ## Session replay setup | ||
|
|
||
| - [How to send custom Events](/installation/custom-events): Add more intelligence by recording domain-specific events alongside session replays. | ||
| - [How to Configure Canvas and WebGL](/installation/canvas): Learn how to integrate and configure Canvas and WebGL for your project. | ||
| - [How to Set Up Cross-Domain iFrames](/installation/crossdomain-iframe): Configure cross-domain iFrames for seamless integration. | ||
| - [How to Configure WebSockets](/installation/websockets): Set up WebSockets for real-time communication in your application. | ||
| - [How to send Metadata](/installation/metadata): Also referred to as traits or user variables, metadata provides additional information about users while recording sessions. | ||
| - [How to send custom Events](/installation/custom-events): Add more intelligence by recording domain-specific events alongside session replays. | ||
|
|
||
| ## Networking and data privacy | ||
|
|
||
| - [How to Customize Network Options (Web)](/installation/network-options): Customize network configurations for your web environment. | ||
| - [How to Sanitize Data (Web)](/installation/sanitize-data): How to sanitize data at both a global and/or granular level. | ||
| - [How to Sanitize Data (iOS)](/installation/sanitize-data-ios): How to sanitize data specifically for iOS applications. | ||
| - [How to Customize Network Options (Mobile)](/installation/network-options-mobile): Customize network configurations for your iOS and Android environments. | ||
| - [How to Sanitize Data (Web)](/installation/sanitize-data): How to sanitize data at both a global and/or granular level for your web applications. | ||
| - [How to Sanitize Data (Mobile)](/installation/sanitize-data-mobile): How to sanitize data for iOS and Android applications. | ||
|
|
||
| ## Debugging and error tracking | ||
|
|
||
| - [How to do Error Tracking](/installation/error-reporting): Track errors and exceptions and troubleshoot with full context. | ||
| - [How to Upload Source-Maps](/installation/upload-sourcemaps): Make debugging easier by seeing the source code context obtained from stack traces in their original form. | ||
| - [How to Upload Source-Maps](/installation/upload-sourcemaps): Make debugging easier by seeing the source code context obtained from stack traces in their original form. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| --- | ||
| title: "Network Options (Mobile)" | ||
| metaTitle: "Network Options (Mobile)" | ||
| metaDescription: "Network options plugin for OpenReplay Mobile SDKs (iOS and Android)." | ||
| --- | ||
|
|
||
| This page describes how to intercept and sanitize network requests and responses using the OpenReplay Mobile SDKs for iOS and Android. Capturing network data can help developers understand and troubleshoot issues effectively. | ||
|
|
||
| ## iOS SDK - Intercepting the Network | ||
|
|
||
| The iOS SDK provides a `NetworkListener` class to capture network requests and responses, including headers and payloads. Here is how you can use it: | ||
|
|
||
| ```swift | ||
| import ORTracker | ||
|
|
||
| func fetchPokemonData(for name: String) { | ||
| let networkListener = NetworkListener() | ||
| let url = URL(string: "https://pokeapi.co/api/v2/pokemon/ditto")! | ||
| var request = URLRequest(url: url) | ||
| request.httpMethod = "GET" // This is the default, so it's optional in this case. | ||
|
|
||
| // Start the network listener with the request | ||
| networkListener.start(request: request) | ||
|
|
||
| // Create a data task | ||
| let task = URLSession.shared.dataTask(with: request) { data, response, error in | ||
| if let error = error { | ||
| print("Error: \(error.localizedDescription)") | ||
| return | ||
| } | ||
|
|
||
| if let data = data { | ||
| do { | ||
| let json = try JSONSerialization.jsonObject(with: data, options: []) | ||
| print(json) | ||
| } catch { | ||
| print("Error deserializing JSON: \(error)") | ||
| } | ||
| } | ||
|
|
||
| networkListener.finish(response: response, data: data) | ||
| } | ||
|
|
||
| task.resume() | ||
| } | ||
| ``` | ||
|
|
||
| ### Sanitizing the Request | ||
|
|
||
| You can sanitize request and response data by defining ignored keys for JSON bodies and ignored headers. Both request and response sanitization are supported. The body sanitization applies only to valid JSON payloads. | ||
|
|
||
| ```swift | ||
| let networkListener = NetworkListener() | ||
| networkListener.ignoredHeaders = ["mySecretToken"] | ||
| networkListener.ignoredKeys = ["password"] | ||
| ``` | ||
|
|
||
| To modify the response data before passing it to the listener: | ||
|
|
||
| ```swift | ||
| var sanitizedData | ||
| if let data = data { | ||
| do { | ||
| let json = try JSONSerialization.jsonObject(with: data, options: []) | ||
| sanitizedData = customSanitizeFunction(data) | ||
| print(json) | ||
| } catch { | ||
| print("Error deserializing JSON: \(error)") | ||
| } | ||
| } | ||
|
|
||
| networkListener.finish(response: response, data: sanitizedData) | ||
| ``` | ||
|
|
||
| ## Android SDK - Intercepting the Network | ||
|
|
||
| The Android SDK also provides a `NetworkListener` class for capturing network requests and responses. Here is an example implementation: | ||
|
|
||
| ```java | ||
| import com.openreplay.tracker.NetworkListener; | ||
|
|
||
| public void makeSampleRequest() { | ||
| new Thread(() -> { | ||
| try { | ||
| URL url = new URL("https://jsonplaceholder.typicode.com/posts/1"); | ||
| HttpURLConnection connection = (HttpURLConnection) url.openConnection(); | ||
| connection.setRequestMethod("GET"); | ||
|
|
||
| // Optionally set request headers | ||
| connection.setRequestProperty("Content-Type", "application/json"); | ||
|
|
||
| // Initialize the network listener for this connection | ||
| NetworkListener networkListener = new NetworkListener(connection); | ||
|
|
||
| BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream())); | ||
| StringBuilder response = new StringBuilder(); | ||
| String line; | ||
| while ((line = reader.readLine()) != null) { | ||
| response.append(line); | ||
| } | ||
| reader.close(); | ||
|
|
||
| // Using the network listener to log the finish event | ||
| networkListener.finish(connection, response.toString().getBytes()); | ||
| } catch (Exception e) { | ||
| e.printStackTrace(); | ||
| } | ||
| }).start(); | ||
| } | ||
| ``` | ||
|
|
||
| ### Sanitizing the Request | ||
|
|
||
| Similar to the iOS SDK, the Android SDK allows you to sanitize request and response data by defining ignored keys for JSON bodies and ignored headers. | ||
|
|
||
| ```java | ||
| NetworkListener networkListener = new NetworkListener(connection); | ||
| networkListener.setIgnoredHeaders(Arrays.asList("mySecretToken")); | ||
| networkListener.setIgnoredKeys(Arrays.asList("password")); | ||
| ``` | ||
|
|
||
| To modify the response data before passing it to the listener: | ||
|
|
||
| ```java | ||
| String sanitizedData = null; | ||
| if (responseData != null) { | ||
| sanitizedData = customSanitizeFunction(responseData); | ||
| } | ||
|
|
||
| // Pass the sanitized data to the NetworkListener | ||
| if (sanitizedData != null) { | ||
| networkListener.finish(connection, sanitizedData.getBytes()); | ||
| } else { | ||
| networkListener.finish(connection, new byte[0]); // Handle cases where sanitized data is null | ||
| } | ||
| ``` | ||
|
|
||
| ## Have Questions? | ||
|
|
||
| If you have any questions about sanitizing network requests, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| --- | ||
| title: "Sanitize Data (Mobile)" | ||
| metaTitle: "Sanitize Data (Mobile)" | ||
| metaDescription: "How to sanitize data and ensure privacy for your users in mobile applications (iOS and Android)." | ||
| --- | ||
|
|
||
| This page explains how to sanitize UI components in your mobile applications using OpenReplay's SDKs for iOS and Android. For details on sanitizing network requests, refer to [Network Options (Mobile)](/network-options-mobile). | ||
|
|
||
| ## iOS - Sanitizing UI Components | ||
|
|
||
| Sanitized views will be blurred out in the resulting replay. Components are automatically removed (to preserve memory) as soon as they are no longer visible. | ||
|
|
||
| ### SwiftUI | ||
|
|
||
| Add the `.sensitive()` modifier to the component you wish to sanitize. | ||
|
|
||
| ```swift | ||
| import ORTracker | ||
|
|
||
| Text("Sensitive Information") | ||
| .sensitive() | ||
| ``` | ||
|
|
||
| ### UIKit | ||
|
|
||
| Use the `addIgnoredView` method to mark a view as sensitive. | ||
|
|
||
| ```swift | ||
| import ORTracker | ||
|
|
||
| ORTracker.shared.addIgnoredView(view) | ||
| ``` | ||
|
|
||
| ### React Native | ||
|
|
||
| Wrap sensitive components with the `ORSanitizedView` component to blur them out in the replay. | ||
|
|
||
| ```js | ||
| import OR from '@openreplay/react-native'; | ||
|
|
||
| <OR.ORSanitizedView> | ||
| <SensitiveComponent /> | ||
| </OR.ORSanitizedView> | ||
| ``` | ||
|
|
||
| ## Android - Sanitizing UI Components | ||
|
|
||
| Sanitized views are blurred out in the resulting replay and automatically removed from memory when off-screen. | ||
|
|
||
| ### View | ||
|
|
||
| Mark a view as sensitive using the `addIgnoredView` method. | ||
|
|
||
| ```kotlin | ||
| import com.openreplay.tracker.OpenReplay | ||
|
|
||
| OpenReplay.addIgnoredView(view) | ||
| ``` | ||
|
|
||
| ## Have Questions? | ||
|
|
||
| If you have any questions about sanitizing data, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,24 @@ | ||
| --- | ||
| title: "Tutorials" | ||
| metaTitle: "OpenReplay Tutorials" | ||
| metaDescription: "Tutorials and How-tos for getting the most out of OpenReplay." | ||
| title: "Guides" | ||
| metaTitle: "OpenReplay Guides" | ||
| metaDescription: "Guides for getting the most out of OpenReplay." | ||
| --- | ||
|
|
||
| Follow these tutorials to make the most out of OpenReplay. | ||
| Follow these step-by-step guides to make the most out of OpenReplay. | ||
|
|
||
| ## General | ||
|
|
||
| - [Invite team members](/tutorials/invite-team-members): Learn how to invite team members in OpenReplay. | ||
| - [Add roles and set access permissions](/tutorials/roles-and-access): Learn how to define roles and access for team members. | ||
| - [Use OpenReplay Spot](/tutorials/spot): Record bugs directly from your browser, with all the context developers need to fix them. | ||
|
|
||
| ## Session replay | ||
| - [Use the OmniSearch bar](/tutorials/omnisearch): Learn how to get the most of OmniSearch. | ||
|
|
||
|
|
||
|
|
||
| ## Analytics | ||
| - [Create your own custom dashboards](/tutorials/custom-dashboard): Create your own metrics and dashboards. | ||
|
|
||
| ## How-tos | ||
|
|
||
| Learn from the below tutorials using real-world use cases. | ||
|
|
||
| - [How to invite team members](/tutorials/invite-team-members): Learn how to invite team members in OpenReplay. | ||
| - [How to add roles and set access permissions](/tutorials/roles-and-access): Learn how to define roles and access for team members. | ||
| - [How to use the OmniSearch bar](/tutorials/omnisearch): Learn how to get the most of OmniSearch. | ||
| - [How to create your own custom dashboards](/tutorials/custom-dashboard): Create your own metrics and dashboards. | ||
| - [How to use OpenReplay Spot](/tutorials/spot): Record bugs directly from your browser, with all the context developers need to fix them. |