npm - @neroom/nevision - Versions diffs - 0.1.0 - Mend

@neroom/nevision 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,71 @@
+# ne-room-react
+React SDK for Ne-Room session recording.
+## Installation
+```bash
+npm install ne-room-react
+```
+## Usage
+Add the `NeRoomRecorder` component to your app's root layout:
+```tsx
+import { NeRoomRecorder } from 'ne-room-react';
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <NeRoomRecorder
+          siteId="your-site-id"
+          apiKey="your-api-key"
+        />
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+## Props
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `siteId` | `string` | Yes | Your Ne-Room site ID |
+| `apiKey` | `string` | Yes | Your Ne-Room API key |
+| `apiUrl` | `string` | No | Custom API URL (default: `https://api.ne-room.io`) |
+| `sampling` | `object` | No | Sampling options for performance |
+| `privacy` | `object` | No | Privacy masking options |
+| `onStart` | `(sessionId: string) => void` | No | Callback when recording starts |
+| `onError` | `(error: Error) => void` | No | Callback on error |
+## Privacy Masking
+By default, password and email inputs are masked. You can customize this:
+```tsx
+<NeRoomRecorder
+  siteId="your-site-id"
+  apiKey="your-api-key"
+  privacy={{
+    maskAllInputs: true,
+    maskTextSelector: '.sensitive-data',
+    blockSelector: '.do-not-record',
+  }}
+/>
+```
+### CSS Classes
+Add these classes to elements for privacy control:
+- `.rr-mask` - Masks text content (shows asterisks)
+- `.rr-block` - Blocks the entire element from recording
+- `.rr-ignore` - Ignores changes to this element
+## License
+MIT

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,32 @@
+interface NeRoomRecorderProps {
+    siteId: string;
+    apiKey: string;
+    apiUrl?: string;
+    /** Sampling options for performance */
+    sampling?: {
+        mousemove?: boolean | number;
+        mouseInteraction?: boolean;
+        scroll?: number;
+        media?: number;
+        input?: "all" | "last";
+    };
+    /** Privacy masking options */
+    privacy?: {
+        maskAllInputs?: boolean;
+        maskInputOptions?: {
+            password?: boolean;
+            email?: boolean;
+            text?: boolean;
+            tel?: boolean;
+        };
+        maskTextSelector?: string;
+        blockSelector?: string;
+    };
+    /** Callback when recording starts */
+    onStart?: (sessionId: string) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+declare function NeRoomRecorder({ siteId, apiKey, apiUrl, sampling, privacy, onStart, onError, }: NeRoomRecorderProps): null;
+export { NeRoomRecorder, type NeRoomRecorderProps, NeRoomRecorder as default };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+interface NeRoomRecorderProps {
+    siteId: string;
+    apiKey: string;
+    apiUrl?: string;
+    /** Sampling options for performance */
+    sampling?: {
+        mousemove?: boolean | number;
+        mouseInteraction?: boolean;
+        scroll?: number;
+        media?: number;
+        input?: "all" | "last";
+    };
+    /** Privacy masking options */
+    privacy?: {
+        maskAllInputs?: boolean;
+        maskInputOptions?: {
+            password?: boolean;
+            email?: boolean;
+            text?: boolean;
+            tel?: boolean;
+        };
+        maskTextSelector?: string;
+        blockSelector?: string;
+    };
+    /** Callback when recording starts */
+    onStart?: (sessionId: string) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+declare function NeRoomRecorder({ siteId, apiKey, apiUrl, sampling, privacy, onStart, onError, }: NeRoomRecorderProps): null;
+export { NeRoomRecorder, type NeRoomRecorderProps, NeRoomRecorder as default };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,180 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  NeRoomRecorder: () => NeRoomRecorder,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var DEFAULT_API_URL = "https://api.ne-room.io";
+var CHUNK_INTERVAL = 1e4;
+var MAX_EVENTS_PER_CHUNK = 100;
+function NeRoomRecorder({
+  siteId,
+  apiKey,
+  apiUrl = DEFAULT_API_URL,
+  sampling,
+  privacy,
+  onStart,
+  onError
+}) {
+  const sessionIdRef = (0, import_react.useRef)(null);
+  const eventsBufferRef = (0, import_react.useRef)([]);
+  const stopFnRef = (0, import_react.useRef)(null);
+  const chunkIndexRef = (0, import_react.useRef)(0);
+  (0, import_react.useEffect)(() => {
+    let intervalId;
+    const init = async () => {
+      try {
+        const { record } = await import("rrweb");
+        const startResponse = await fetch(`${apiUrl}/public/recordings/start`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            siteId,
+            apiKey,
+            url: window.location.href,
+            userAgent: navigator.userAgent,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight
+          })
+        });
+        if (!startResponse.ok) {
+          throw new Error(`Failed to start recording: ${startResponse.status}`);
+        }
+        const { sessionId } = await startResponse.json();
+        sessionIdRef.current = sessionId;
+        onStart?.(sessionId);
+        const recordConfig = {
+          emit: (event) => {
+            eventsBufferRef.current.push(event);
+          },
+          sampling: sampling ? {
+            mousemove: sampling.mousemove,
+            mouseInteraction: sampling.mouseInteraction,
+            scroll: sampling.scroll,
+            media: sampling.media,
+            input: sampling.input
+          } : {
+            mousemove: 50,
+            scroll: 150
+          },
+          maskAllInputs: privacy?.maskAllInputs ?? true,
+          maskInputOptions: privacy?.maskInputOptions ?? {
+            password: true,
+            email: true
+          },
+          maskTextSelector: privacy?.maskTextSelector,
+          blockSelector: privacy?.blockSelector
+        };
+        const stopFn = record(recordConfig);
+        if (stopFn) {
+          stopFnRef.current = stopFn;
+        }
+        intervalId = setInterval(() => {
+          sendChunk(apiUrl, sessionId);
+        }, CHUNK_INTERVAL);
+        const handleUnload = () => {
+          if (sessionIdRef.current && eventsBufferRef.current.length > 0) {
+            sendChunk(apiUrl, sessionIdRef.current, true);
+            endSession(apiUrl, sessionIdRef.current);
+          }
+        };
+        window.addEventListener("beforeunload", handleUnload);
+        document.addEventListener("visibilitychange", () => {
+          if (document.visibilityState === "hidden") {
+            handleUnload();
+          }
+        });
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    };
+    const sendChunk = async (url, sessionId, isBeacon = false) => {
+      if (eventsBufferRef.current.length === 0) return;
+      const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
+      const chunkIndex = chunkIndexRef.current++;
+      const payload = JSON.stringify({
+        sessionId,
+        siteId,
+        apiKey,
+        events,
+        chunkIndex
+      });
+      if (isBeacon && navigator.sendBeacon) {
+        navigator.sendBeacon(
+          `${url}/public/recordings/chunk`,
+          new Blob([payload], { type: "application/json" })
+        );
+      } else {
+        try {
+          await fetch(`${url}/public/recordings/chunk`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: payload
+          });
+        } catch {
+          eventsBufferRef.current.unshift(...events);
+        }
+      }
+    };
+    const endSession = (url, sessionId) => {
+      navigator.sendBeacon?.(
+        `${url}/public/recordings/end`,
+        new Blob(
+          [JSON.stringify({ sessionId, siteId, apiKey })],
+          { type: "application/json" }
+        )
+      );
+    };
+    init();
+    return () => {
+      clearInterval(intervalId);
+      stopFnRef.current?.();
+      if (sessionIdRef.current) {
+        sendChunk(apiUrl, sessionIdRef.current, true);
+        endSession(apiUrl, sessionIdRef.current);
+      }
+    };
+  }, [siteId, apiKey, apiUrl, sampling, privacy, onStart, onError]);
+  return null;
+}
+var index_default = NeRoomRecorder;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NeRoomRecorder
+});

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,146 @@
+"use client";
+// src/index.tsx
+import { useEffect, useRef } from "react";
+var DEFAULT_API_URL = "https://api.ne-room.io";
+var CHUNK_INTERVAL = 1e4;
+var MAX_EVENTS_PER_CHUNK = 100;
+function NeRoomRecorder({
+  siteId,
+  apiKey,
+  apiUrl = DEFAULT_API_URL,
+  sampling,
+  privacy,
+  onStart,
+  onError
+}) {
+  const sessionIdRef = useRef(null);
+  const eventsBufferRef = useRef([]);
+  const stopFnRef = useRef(null);
+  const chunkIndexRef = useRef(0);
+  useEffect(() => {
+    let intervalId;
+    const init = async () => {
+      try {
+        const { record } = await import("rrweb");
+        const startResponse = await fetch(`${apiUrl}/public/recordings/start`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            siteId,
+            apiKey,
+            url: window.location.href,
+            userAgent: navigator.userAgent,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight
+          })
+        });
+        if (!startResponse.ok) {
+          throw new Error(`Failed to start recording: ${startResponse.status}`);
+        }
+        const { sessionId } = await startResponse.json();
+        sessionIdRef.current = sessionId;
+        onStart?.(sessionId);
+        const recordConfig = {
+          emit: (event) => {
+            eventsBufferRef.current.push(event);
+          },
+          sampling: sampling ? {
+            mousemove: sampling.mousemove,
+            mouseInteraction: sampling.mouseInteraction,
+            scroll: sampling.scroll,
+            media: sampling.media,
+            input: sampling.input
+          } : {
+            mousemove: 50,
+            scroll: 150
+          },
+          maskAllInputs: privacy?.maskAllInputs ?? true,
+          maskInputOptions: privacy?.maskInputOptions ?? {
+            password: true,
+            email: true
+          },
+          maskTextSelector: privacy?.maskTextSelector,
+          blockSelector: privacy?.blockSelector
+        };
+        const stopFn = record(recordConfig);
+        if (stopFn) {
+          stopFnRef.current = stopFn;
+        }
+        intervalId = setInterval(() => {
+          sendChunk(apiUrl, sessionId);
+        }, CHUNK_INTERVAL);
+        const handleUnload = () => {
+          if (sessionIdRef.current && eventsBufferRef.current.length > 0) {
+            sendChunk(apiUrl, sessionIdRef.current, true);
+            endSession(apiUrl, sessionIdRef.current);
+          }
+        };
+        window.addEventListener("beforeunload", handleUnload);
+        document.addEventListener("visibilitychange", () => {
+          if (document.visibilityState === "hidden") {
+            handleUnload();
+          }
+        });
+      } catch (error) {
+        onError?.(error instanceof Error ? error : new Error(String(error)));
+      }
+    };
+    const sendChunk = async (url, sessionId, isBeacon = false) => {
+      if (eventsBufferRef.current.length === 0) return;
+      const events = eventsBufferRef.current.splice(0, MAX_EVENTS_PER_CHUNK);
+      const chunkIndex = chunkIndexRef.current++;
+      const payload = JSON.stringify({
+        sessionId,
+        siteId,
+        apiKey,
+        events,
+        chunkIndex
+      });
+      if (isBeacon && navigator.sendBeacon) {
+        navigator.sendBeacon(
+          `${url}/public/recordings/chunk`,
+          new Blob([payload], { type: "application/json" })
+        );
+      } else {
+        try {
+          await fetch(`${url}/public/recordings/chunk`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: payload
+          });
+        } catch {
+          eventsBufferRef.current.unshift(...events);
+        }
+      }
+    };
+    const endSession = (url, sessionId) => {
+      navigator.sendBeacon?.(
+        `${url}/public/recordings/end`,
+        new Blob(
+          [JSON.stringify({ sessionId, siteId, apiKey })],
+          { type: "application/json" }
+        )
+      );
+    };
+    init();
+    return () => {
+      clearInterval(intervalId);
+      stopFnRef.current?.();
+      if (sessionIdRef.current) {
+        sendChunk(apiUrl, sessionIdRef.current, true);
+        endSession(apiUrl, sessionIdRef.current);
+      }
+    };
+  }, [siteId, apiKey, apiUrl, sampling, privacy, onStart, onError]);
+  return null;
+}
+var index_default = NeRoomRecorder;
+export {
+  NeRoomRecorder,
+  index_default as default
+};

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "@neroom/nevision",
+  "version": "0.1.0",
+  "description": "React SDK for Neroom session recording",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts --external react",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "dependencies": {
+    "rrweb": "^2.0.0-alpha.11"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "session-recording",
+    "rrweb",
+    "react",
+    "analytics",
+    "user-behavior"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/nevision-app"
+  }
+}