Merge pull request #170 from openreplay/integrations-patch

src/components/LeftSidebar/SidebarContent.astro

@@ -30,7 +30,7 @@ const currentPageNoLangNoVer =
 {
 	sidebarSections.map((section) => (
 		// (removeSubpageSegment(currentPageMatch).endsWith(removeSubpageSegment(slug)) && 'active')
-		<li class:list={['menu-item', (currentPageNoLangNoVer.indexOf(section.slug) == 0 || (currentPageNoLangNoVer.includes('tutorials') && section.slug.includes('installation'))) && "active"]}>
+		<li class:list={['menu-item', (currentPageNoLangNoVer.indexOf(section.slug) == 0 ) && "active"]}>
 			<a
 				href={categoryLinkPrefix + section.slug}
 				class:list={[

src/i18n/en/nav.ts

@@ -55,24 +55,28 @@ export default [
 	{ text: 'Secure OpenReplay', slug: 'configuration/secure-or', key: 'concepts/islands' },
 	{ text: 'Single Sign-On (SSO)', slug: 'configuration/sso', key: 'concepts/islands' },
 
-
-	{ text: 'How-tos', slug: 'installation/', header: true, type: 'learn', key: 'how-tos', icon: 'features' },
-	{ text: 'Overview', slug: 'installation', key: 'blog-tutorial' },
+	{ text: 'Advanced Setup', slug: 'installation/', header: true, type: 'learn', key: 'blog-installation', icon: 'features' },
+	{ text: 'Overview', slug: 'installation', key: 'blog-installation' },
 	{ text: 'Identify a User', slug: 'installation/identify-user', key: 'blog-installation' },
 	{ text: 'Canvas and WebGL', slug: 'installation/canvas', key: 'canvas-recording'},
-	{ text: 'Cross-domain iFrames', slug: 'tutorials/crossdomain-iframe', key: 'iframe-crossdomain' },
+	{ text: 'Cross-domain iFrames', slug: 'installation/crossdomain-iframe', key: 'iframe-crossdomain' },
 	{ text: 'WebSockets', slug: 'installation/websockets', key: 'websockets' },
-	{ text: 'Add users to your team', slug: 'tutorials/adding-users', key: 'blog-installation' },
-	{ text: 'Metadata', slug: 'installation/metadata', key: 'blog-installation' },
-	{ text: 'Custom Events', slug: 'installation/custom-events', key: 'blog-tutorial' },
-	{ text: 'Error reporting', slug: 'installation/error-reporting', key: 'blog-installation' },
-	{ text: 'Upload Source maps', slug: 'installation/upload-sourcemaps', key: 'blog-installation' },
+	{ text: 'Send Metadata', slug: 'installation/metadata', key: 'blog-installation' },
+	{ text: 'Custom Events', slug: 'installation/custom-events', key: 'blog-installation' },
+	{ text: 'Network Options (Web)', slug: 'installation/network-options', key: 'blog-installation' },
 	{ text: 'Sanitize Data (Web)', slug: 'installation/sanitize-data', key: 'blog-installation' },
 	{ text: 'Sanitize Data (iOS)', slug: 'installation/sanitize-data-ios', key: 'blog-installation' },
-	{ text: 'Custom Heuristics', slug: 'tutorials/custom-heuristics', key: 'blog-installation' },
-	{ text: 'OmniSearch', slug: 'tutorials/omnisearch', key: 'blog-installation' },
-	{ text: 'Custom Dashboards', slug: 'tutorials/custom-dashboard', key: 'blog-installation' },
-	{ text: 'Network Options (Web)', slug: 'installation/network-options', key: 'blog-installation' },
+	{ text: 'Error tracking', slug: 'installation/error-reporting', key: 'blog-installation' },
+	{ text: 'Upload Source maps', slug: 'installation/upload-sourcemaps', key: 'blog-installation' },
+
+
+	{ text: 'How-tos', slug: 'tutorials/', header: true, type: 'learn', key: 'blog-tutorial', icon: 'tutorials' },
+	{ text: 'Overview', slug: 'tutorials', key: 'blog-tutorial' },
+	{ text: 'Team Management', slug: 'tutorials/invite-team-members', key: 'blog-tutorial' },
+	{ text: 'Roles and Access', slug: 'tutorials/roles-and-access', key: 'blog-tutorial' },
+	{ text: 'Custom Heuristics', slug: 'tutorials/custom-heuristics', key: 'blog-tutorial' },
+	{ text: 'OmniSearch', slug: 'tutorials/omnisearch', key: 'blog-tutorial' },
+	{ text: 'Custom Dashboards', slug: 'tutorials/custom-dashboard', key: 'blog-tutorial' },
 	{ text: 'Spot (Chrome Extension)', slug: 'tutorials/spot', key: 'blog-tutorial' },
 
 	//{ text: 'Setup OpenReplay', slug: 'installation/setup-or', key: 'blog-installation' },

src/pages/en/installation.mdx

@@ -1,21 +1,20 @@
 ---
-title: "How-tos"
-metaTitle: "How-tos"
-metaDescription: "How to setup and get started with OpenReplay."
+title: "Advanced Setup"
+metaTitle: "Advanced Setup & Configuration"
+metaDescription: "How to set up and configure OpenReplay."
 ---
 
 This section contains everything you need to get started with OpenReplay, from basic to advanced setup.
 
-## Main How-To's
+## Main Setup Guides
 - [How to identify a User](/installation/identify-user): Associate your internal user ID with the session being recorded.
-- [How to add users to your team](/tutorials/adding-users): Learn how to add users to your team.
+- [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.
-- [How to do Error Reporting](/installation/error-reporting): Report errors and exceptions and see them under the 'Errors' tab.
+- [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 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 Sanitize Data](/installation/sanitize-data): How to sanitize data at both a global and/or granular level.
-- [How to create custom heuristic](/tutorials/custom-heuristics): Learn how to add custom logic to the backend to test for custom use behavior.
-- [How to use the OmniSearch bar](/tutorials/omnisearch): Learn how to get the most of our powerful search bar.
-- [How to create your own custom dashboards](/tutorials/custom-dashboard): Create your own metrics and dashboards with this tutorial.
-- [How to use OpenReplay Spot](/tutorials/spot): Record bugs directly from your browser, with all the context developers need to fix them.
-

src/pages/en/installation/error-reporting.mdx

@@ -1,78 +1,103 @@
 ---
-title: "Error Reporting"
-metaTitle: "Error Reporting"
-metaDescription: "How error reporting works, what gets sent to the 'Errors' tab and how to report errors and exceptions manually"
+title: "Error Tracking"
+metaTitle: "Error Tracking"
+metaDescription: "Learn how to track and resolve errors with OpenReplay. Get detailed visibility into errors across your web applications and troubleshoot with full context."
 ---
 
-Error reporting is very important for monitoring your app's stability, spotting regressions ahead of time and knowing which issues occur the most to your users. By default, any uncaught exception is logged under the 'Errors' tab:
+Gain high-level and granular visibility into errors within your web applications. With OpenReplay, you can troubleshoot with full context, enabling faster resolution of issues.
 
-![Errors Tab](/static/errors-tab.jpg#center)
+## Error tracking insights across different views
 
-Additionally, logged errors will also appear in the session recording under the 'Console' tab in DevTools:
+### From the Sessions view
 
-![Exceptions Tab](/static/exceptions-tab-in-recording.jpg#center)
+1. Navigate to the session view > **Errors** tab
+2. **Use Omnisearch**: select the event **“Error Message”** and enter the specific error message.
 
-## Manually Logging Exceptions
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <img src="./images/error-tracking/errors_sessions_view.gif" alt="Errors in sessions" style={{ width: '600px', height: 'auto' }} />
+</div>
 
-The OpenReplay tracker supports logging 3 types of errors:
-* Caught Exceptions - [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
-* Rejected Promises - [PromiseRejectionEvent](https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent)
-* Error Events (onError) - [ErrorEvent](https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent)
+### Inside a single Session
 
-All of the above can be reported using a single method:
+1. Navigate to **Console > Errors Tab**
+2. Open the error to view full sourcemaps.
+3. Click on **"Find all sessions with this error"** to see the list of sessions where the error occurred.
 
-```js
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <img src="./images/error-tracking/errors_session_view.gif" alt="Session error" style={{ width: '600px', height: 'auto' }} />
+</div>
+
+### From the Cards view
+
+1. Navigate to Cards > Add Card > Monitors
+2. Select **Table of Errors** card
+
+{/* <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <img src="./images/error-tracking/errors_cards_view.gif" alt="Table of errors" style={{ width: '600px', height: 'auto' }} />
+</div> */}
+
+## Manually logging exceptions
+
+The OpenReplay tracker supports logging three types of errors:
+
+1. **Caught Exceptions** - [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
+2. **Rejected Promises** - [PromiseRejectionEvent](https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent)
+3. **Error Events (onError)** - [ErrorEvent](https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent)
+
+All of these can be reported using a single method:
+
+```javascript
 tracker.handleError(error, metaObject); // metaObject is optional and is a flat object
 ```
 
-Let's review an example for each type of error:
+Let’s review examples for each type of error:
 
 ### Caught Exceptions (Error)
 
-By default, caught exceptions are not logged to the 'Console' tab. In order to report an error, we can do as following:
+By default, caught exceptions are not logged to the ‘Console’ tab. To report an error, use the following pattern:
 
-```js
+```javascript
 try {
     // application code
-}
-catch(err) {
+} catch (err) {
     // application code that handles the error
-    tracker.handleError(error, metaObject); // metaObject is optional and is a flat object
+    tracker.handleError(err, metaObject); // metaObject is optional and is a flat object
 }
 ```
+
 ### Rejected Promises (PromiseRejectionEvent)
 
-If a Promise is rejected and we want to report the error to OpenReplay, we can do as following:
+If a promise is rejected and needs to be reported to OpenReplay, use this approach:
 
-```js
+```javascript
 function myFunc() {
     doSomeAsyncStuff()
-    .then((result) => {
-        // application code
-    })
-    .catch(promiseRejectionErr => {
-        // application code to handle the error
-        tracker.handleError(promiseRejectionErr, metaObject); // metaObject is optional and is a flat object     
-    })
+        .then((result) => {
+            // application code
+        })
+        .catch(promiseRejectionErr => {
+            // application code to handle the error
+            tracker.handleError(promiseRejectionErr, metaObject); // metaObject is optional and is a flat object
+        });
 }
 ```
 
 ### onError (ErrorEvent)
 
-This example will show how to report an error in case an ```<img>``` element did not load:  
+Report errors triggered by events, such as an `<img>` element failing to load:
 
-```html
+```javascript
 <img id="myImg" src="image.gif">
 <p id="demo"></p>
-```
 
-```js
+<script>
 document.getElementById("myImg").addEventListener("error", myFunction);
 
 function myFunction(errorEvent) {
-  document.getElementById("demo").innerHTML = "The image could not be loaded.";
-  tracker.handleError(errorEvent, { context: "demo" });
+    document.getElementById("demo").innerHTML = "The image could not be loaded.";
+    tracker.handleError(errorEvent, { context: "demo" });
 }
+</script>
 ```
 
 ## Have questions?

src/pages/en/installation/metadata.mdx

@@ -1,30 +1,42 @@
 ---
-title: "Metadata"
+title: "Send Metadata"
 metaTitle: "Metadata"
 metaDescription: "How to pass user metadata to OpenReplay. Also known as traits or user variables in other platforms."
 ---
 import Aside from '~/components/Aside.astro'
 
-Additional information about users can be provided with metadata (also known as traits or user variables). They take the form of key/value pairs, and are useful for filtering and searching for specific session replays.
+Metadata allows you to add additional information about users to session replays in the form of key-value pairs. This feature enhances your ability to filter and search session recordings, making it easier to identify relevant sessions.  Refer to this [tutorial](/tutorials/metadata) for more details on how to send metadata.
+
+<Aside>
+
+**Metadata keys are project-specific**: Metadata keys must be defined in the dashboard before you can send metadata to OpenReplay. Each project can have its own set of metadata keys.
 
-<Aside type="tip">
-  We also have a detailed tutorial on how to send metadata as part of your session, you can check it out [here](/tutorials/metadata).
 </Aside>
 
+## Adding Metadata keys to a project  
+
+To set up metadata keys:  
 
-## 1. Explicitly specify the Metadata
+1. Navigate to **Preferences > Metadata** in OpenReplay.  
+2. Choose the project to which you want to add metadata.  
+3. Click **Add Metadata**.  
+4. Enter the desired key name in the **Field Name** input.  
+5. Click **Add** to save the metadata key.  
 
-Metadata must be explicitly specified from the dashboard from 'Preferences > Metadata'. You can add up to 10 keys. In the below example, we use `plan`.
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <img src="./images/send-metadata/send_metadata.gif" alt="Send Metadata" style={{ width: '600px', height: 'auto' }} />
+</div>
 
-![Add Metadata](/static/metadata-1.png#center)
 
-## 2. Inject Metadata when recording sessions
+> **Limit:** You can add up to 10 metadata keys per project.  
 
-Once the key(s) added (in this example `plan`) then you can inject the metadata on tracker' start in the form of a key/value pair (`string`).
+## Injecting Metadata into Session Replays  
 
-### With NPM
+Once your metadata keys are defined, you can send metadata when recording sessions. Below are the available implementation methods:  
 
-Inject the metadata on tracker' start (in this example `plan`).
+### 1. Using NPM  
+
+Inject metadata when starting the tracker:  
 
 ```js
 const tracker = new OpenReplay({
@@ -40,66 +52,68 @@ tracker.start({
 });
 ```
 
-If that's not possible (some or all metadata may be set/known only later in the navigation flow, so way after the tracker starts), then call the `setMetadata` method to do so: 
+If metadata is only available after the tracker starts, use the `setMetadata` method:  
 
-```js
+```javascript
 tracker.setMetadata('plan', 'free'); // after tracker.start()
 ```
 
-### With JavaScript snippet
+### 2. Using JavaScript Snippet  
 
-Below is an example on how to inject the metadata (in this example `plan`) using the snippet. Note the `startOpts` variable/line added, also the parameters change in the second line.
+To include metadata with the snippet, modify the `startOpts` variable:  
 
 ```js
 <!-- OpenReplay Tracking Code -->
 <script>
-var initOpts = { projectKey: "GxPpaDARdn2345fgt321" };
-var startOpts = { userID: getUserID(), metadata: { plan: getPlan()} } // use startOpts variable to inject metadata
-(function(A,s,a,y,e,r){
-  r=window.OpenReplay=[e,r,y,[s-1, e]];
-  s=document.createElement('script');s.src=A;s.async=!a;
-  ...
-})(0, "GxPpaDARdn2345fgt321", "//static.openreplay.com/3.5.0/openreplay.js",1,29);
+  var initOpts = {
+    projectKey: "project_key",
+    defaultInputMode: 2,
+    obscureTextNumbers: false,
+    obscureTextEmails: true,
+  };
+  const yourMetadata = { yourKey: 'yourValue' };
+  var startOpts = { userID: "", metadata: yourMetadata };
+  (function(A,s,a,y,e,r){
+    r=window.OpenReplay=[e,r,y,[s-1, e]];
+    s=document.createElement('script');s.src=A;s.async=!a;
+    ...
+  })("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
+
 </script>
 ```
 
-If that's not possible (metadata is known later in the navigation flow, so way after the tracker starts), then instead call the `setMetadata` method to identify your users. The identity of the user can be changed anytime during the session by calling `setMetadata`. However, OpenReplay will only keep the last injected user ID.
+If metadata becomes available later:  
 
-```js
-<!-- OpenReplay Tracking Code -->
+```html
 <script>
-var initOpts = { projectKey: "GxPpaDARdn2345fgt321" };
-var startOpts = { userID: "" };
-(function(A,s,a,y,e,r){
-  r=window.OpenReplay=[e,r,y,[s-1, e]];
-  s=document.createElement('script');s.src=A;s.async=!a;
-  ...
-})("//static.openreplay.com/latest/openreplay.js", 1, 0, initOpts, startOpts);
+  OpenReplay.setMetadata("plan", "free");
 </script>
-  ...
-  OpenReplay.setMetadata("plan", "free"); // set metadata later in your code
-  ...
 ```
 
-### With iOS app
+### 3. Using iOS SDK  
+
+Inject metadata in your iOS app:  
 
 ```swift
 import ORTracker
 
 ORTracker.shared.setMetadata(key: String, value: String)
 ```
 
-## 3. Search for Sessions Recordings using Metadata
+## Filtering and searching sessions with Metadata  
 
-Clicking on the omni-search bar will show you the list of available filters, including the metadata key(s) you added. You can now filter sessions recordings by any key/value.
+Metadata keys allow you to filter and search sessions in OpenReplay:  
 
-![Search using Metadata](/static/metadata-2.png#center)
+1. Open the **Omni-Search** in the Sessions view.  
+2. Select your metadata key (e.g., `plan`).  
+3. Enter the metadata value (e.g., `free`) to filter session recordings.  
 
-## 4. See Metadata in Session Replay
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <img src="./images/send-metadata/filter_metatdata.gif" alt="Filter Metadata" style={{ width: '600px', height: 'auto' }} />
+</div>
 
-Metadata key/value pairs are displayed in the session replay page, in the user identification card. Sessions with similar metadata values can be found by clicking on the *loop* icon.
-
-![Metadata in Session Replay](/static/metadata-3.png#center)
+This feature enables quick and precise identification of sessions based on user-specific details.  
 
 ## Have questions?
-If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com).
+If you have any questions about this process, feel free to reach out to us on our [Slack](https://slack.openreplay.com) or check out our [Forum](https://forum.openreplay.com).
+