noibu-react-native 0.2.12 → 0.2.14

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes of the noibu-react-native SDK release series are documented in this file using
+the [Keep a CHANGELOG](https://keepachangelog.com/) principles.
+
+## 0.2.13
+
+### Alpha support for iOS Session Replay in React Native
+
+Implemented functionality that enables session replay support for iOS in React Native. Session videos are essential for
+diagnosing errors. A video of an error occurring gives unique insight into the customer experience, and may help you
+identify the step, field, button, or process that triggers the error.
+
+### Add support for customizable PII redaction fields
+
+Implemented functionality to allow custom exact and fuzzy fields for PII redaction, configurable via ClientConfig. Added
+corresponding tests to validate redaction logic and ensure compatibility with default and custom field configurations.
+Refactored redaction logic to use dynamically retrieved configurations for better flexibility.
+
+For more details on how to configure the SDK, please refer to
+the [README.md - Configuration](./README.md#configuration).

package/README.md

@@ -72,6 +72,9 @@ That's it! First time the module is set up, it runs an init and starts listening
   - `@property [blockedElements] {string[]}` - lets you specify component ids to be ignored by SDK when collecting error information
   - `@property [enableHttpDataCollection] {boolean}` - indicates whether SDK should collect HTTP information like headers or body from requests
   - `@property [listOfUrlsToCollectHttpDataFrom] {string[]}` - is an allow list of URLs to allow HTTP data collection from, works best with `enableHttpDataCollection` enabled
+  - `@property [httpPiiBlockingPatterns] {RegExp[]}` - allows you to specify RegEx patterns for what PII information should be removed from JSON request and response data for the value in a key value pair
+  - `@property [fuzzyFieldsToRedact] {string[]}` - allows you to specify fuzzy strings for what PII information should be removed from JSON request and response data based on the key in a key value pair
+  - `@property [exactFieldsToRedact] {string[]}` - allows you to specify strict strings for what PII information should be removed from JSON request and response data based on the key in a key value pair
 
 Example:
 
@@ -81,6 +84,72 @@ setupNoibu({
   enableHttpDataCollection: true,
   listOfUrlsToCollectHttpDataFrom: ['https://react-native-app.myshop.com/backend', 'https://example.com/some-path/'],
   blockedElements: ['sensitive-info'],
+  httpPiiBlockingPatterns: [
+    // Match credit cards [https://www.regular-expressions.info/creditcard.html]
+    // Visa
+    /\b4\d{12}(?:\d{3})?\b/g,
+
+    // MasterCard
+    /\b(?:5[1-5]\d{2}|222[1-9]|22[3-9]\d|2[3-6]\d{2}|27[01]\d|2720)\d{12}\b/g,
+
+    // Amex
+    /\b3[47]\d{13}\b/g,
+
+    // Diners Club
+    /\b3(?:0[0-5]|[68]\d)\d{11}\b/g,
+
+    // Discover
+    /\b6(?:011|5\d{2})\d{12}\b/g,
+
+    // JCB
+    /\b(?:2131|1800|35\d{3})\d{11}\b/g,
+
+    // Emails [https://www.regular-expressions.info/email.html]
+    /\b[a-z0-9!#$%&'*+/=?^_‘{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_‘{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\b/g,
+
+    // US SSN with or without dashes
+    // [https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s12.html]
+    /\b(?!000|666)[0-8]\d{2}[-.● ]?(?!00)\d{2}[-.● ]?(?!0000)\d{4}\b/g,
+
+    // Canadian SIN with or without dashes [https://regexpattern.com/social-insurance-number-ca]
+    /\b(\d{3}[-.● ]?\d{3}[-.● ]?\d{3})\b/g,
+
+    // International phone numbers
+    // [https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s03.html]
+    /\+(?:\d●?){6,14}\d\b/g,
+
+    // US/Canada phone numbers
+    // [https://www.oreilly.com/library/view/regular-expressions-cookbook/9781449327453/ch04s02.html]
+    /(\b|\+)?(1[-.● ]?)?\(?(\d{3})\)?[-.● ]?(\d{3})[-.● ]?(\d{4})\b/g,
+  ],
+  fuzzyFieldsToRedact: [
+    'password',
+    'address',
+    'credit',
+    'postal',
+    'token',
+    'phone',
+    'mobile',
+    'expiry',
+    'account',
+    'email',
+  ],
+  exactFieldsToRedact: [
+    'firstname',
+    'lastname',
+    'street',
+    'fullname',
+    'creditcard',
+    'postcode',
+    'zipcode',
+    'city',
+    'town',
+    'county',
+    'cc',
+    'cardtype',
+    'cardnumber',
+    'email',
+  ],
 });
 ```
 

package/dist/api/ClientConfig.d.ts

@@ -21,6 +21,9 @@ export default class ClientConfig extends Singleton {
     readonly listOfUrlsToCollectHttpDataFrom: CustomerConfig['listOfUrlsToCollectHttpDataFrom'];
     readonly enableHttpDataCollection: CustomerConfig['enableHttpDataCollection'];
     readonly blockedElements: CustomerConfig['blockedElements'];
+    readonly httpPiiBlockingPatterns: CustomerConfig['httpPiiBlockingPatterns'];
+    readonly fuzzyFieldsToRedact: CustomerConfig['fuzzyFieldsToRedact'];
+    readonly exactFieldsToRedact: CustomerConfig['exactFieldsToRedact'];
     private alreadyPostingError;
     /**  Error handling for constructor */
     handleConstructorError(noibuErrorURL?: string, customerConfig?: CustomerConfig): void;

package/dist/api/ClientConfig.js

@@ -67,6 +67,9 @@ class ClientConfig extends Singleton {
         this.listOfUrlsToCollectHttpDataFrom = customerConfig.listOfUrlsToCollectHttpDataFrom;
         this.enableHttpDataCollection = customerConfig.enableHttpDataCollection;
         this.blockedElements = customerConfig.blockedElements;
+        this.httpPiiBlockingPatterns = customerConfig.httpPiiBlockingPatterns;
+        this.fuzzyFieldsToRedact = customerConfig.fuzzyFieldsToRedact;
+        this.exactFieldsToRedact = customerConfig.exactFieldsToRedact;
         // sets up this.browserId, this.isClientDisabled, this.pageVisitSeq
         this.configurationPromise = this._setupStorageVars();
     }

package/dist/api/MetroplexSocket.d.ts

@@ -4,7 +4,7 @@ import { NoSeqNumSlidingMessage, RetryQueueWSMessage } from '../types/Metroplex'
 /**
  * Grab the video recorder type based on the device we run the app on.
  */
-export declare function getVideoRecorderType(): Promise<VideoRecorder>;
+export declare function getVideoRecorderType(): Promise<VideoRecorder.RRWeb | VideoRecorder.AndroidNative>;
 /**
  * Implements rolling window of specified size,
  * but only makes a cut once array length exceeds 150%.

package/dist/api/MetroplexSocket.js

@@ -22,9 +22,6 @@ function getVideoRecorderType() {
         if (Platform.OS === 'android') {
             return 'AndroidNative';
         }
-        if (Platform.OS === 'ios') {
-            return 'IOSNative';
-        }
         return 'RRWeb'; // should never happen
     });
 }
@@ -250,7 +247,7 @@ class MetroplexSocket extends Singleton {
                 return;
             }
             this.currentConnectionAttempts += 1;
-            this.socket = new WebSocket(this.connectionURL, undefined, {
+            this.socket = new WebSocket(this.connectionURL, [], {
                 headers: {
                     'User-Agent': yield getUserAgent(), // must pass useragent explicitly
                 },
@@ -701,7 +698,16 @@ class MetroplexSocket extends Singleton {
         const data = response.substring(prefix.length);
         const success = /^\d{6}$/.test(data);
         if (this.helpCodeCb) {
-            this.helpCodeCb({ detail: { success, data } });
+            const event = {
+                detail: data,
+                bubbles: false,
+                cancelable: false,
+                cancelBubble: false,
+            };
+            Object.defineProperty(event, 'detail', {
+                get: () => ({ success, data }),
+            });
+            this.helpCodeCb(event);
         }
         return true;
     }

package/dist/constants.js

@@ -24,7 +24,7 @@ const CONTENT_TYPE = 'content-type';
  * Gets the script id from the cookie object, returns default if cannot be found
  */
 function GET_SCRIPT_ID() {
-    return "1.0.104-rn-sdk-0.2.12" ;
+    return "1.0.104-rn-sdk-0.2.14" ;
 }
 /**
  * Gets the max metro recon number

package/dist/mobileTransformer/mobile-replay/index.d.ts

@@ -0,0 +1,10 @@
+import { eventWithTime } from './rrweb';
+import { ErrorObject } from 'ajv';
+import { mobileEventWithTime } from './mobile.types';
+export declare function validateFromMobile(data: unknown): {
+    isValid: boolean;
+    errors: ErrorObject[] | null | undefined;
+};
+export declare function transformEventToWeb(event: unknown, validateTransformation?: boolean): eventWithTime;
+export declare function transformToWeb(mobileData: (eventWithTime | mobileEventWithTime)[]): eventWithTime[];
+export declare function validateAgainstWebSchema(data: unknown): boolean;

package/dist/mobileTransformer/mobile-replay/index.js

@@ -0,0 +1,57 @@
+import Ajv from 'ajv';
+import mobileSchema from './schema/mobile/rr-mobile-schema.json.js';
+import webSchema from './schema/web/rr-web-schema.json.js';
+import { makeFullEvent, makeIncrementalEvent, makeMetaEvent, makeCustomEvent } from './transformer/transformers.js';
+
+//import { captureException, captureMessage } from '@sentry/react'
+//@ts-ignore
+const ajv = new Ajv({
+    //@ts-ignore
+    allowUnionTypes: true,
+}); // options can be passed, e.g. {allErrors: true}
+const transformers = {
+    2: makeFullEvent,
+    3: makeIncrementalEvent,
+    4: makeMetaEvent,
+    5: makeCustomEvent,
+};
+ajv.compile(mobileSchema);
+const webSchemaValidator = ajv.compile(webSchema);
+function couldBeEventWithTime(x) {
+    return (typeof x === 'object' && x !== null && 'type' in x && 'timestamp' in x);
+}
+function transformEventToWeb(event, validateTransformation) {
+    try {
+        if (couldBeEventWithTime(event)) {
+            const transformer = transformers[event.type];
+            if (transformer) {
+                const transformed = transformer(event);
+                if (validateTransformation) ;
+                return transformed;
+            }
+            else {
+                //captureMessage(`No type in event`, { extra: { event } })
+                console.error('No type in event: ', event);
+            }
+        }
+    }
+    catch (e) {
+        //captureException(e, { extra: { event } })
+        console.error('Exception captured: ', event);
+    }
+    return event;
+}
+function validateAgainstWebSchema(data) {
+    const validationResult = webSchemaValidator(data);
+    if (!validationResult) {
+        // we are passing all data through this validation now and don't know how safe the schema is
+        // captureMessage('transformation did not match schema', {
+        //     extra: { data, errors: webSchemaValidator.errors },
+        // });
+        console.error('transformation did not match schema', data, webSchemaValidator.errors);
+    }
+    //@ts-ignore
+    return validationResult;
+}
+
+export { transformEventToWeb, validateAgainstWebSchema };

package/dist/mobileTransformer/mobile-replay/mobile.types.d.ts

@@ -0,0 +1,312 @@
+import { customEvent, EventType, IncrementalSource, removedNodeMutation } from './rrweb';
+export declare enum NodeType {
+    Document = 0,
+    DocumentType = 1,
+    Element = 2,
+    Text = 3,
+    CDATA = 4,
+    Comment = 5
+}
+export type documentNode = {
+    type: NodeType.Document;
+    childNodes: serializedNodeWithId[];
+    compatMode?: string;
+};
+export type documentTypeNode = {
+    type: NodeType.DocumentType;
+    name: string;
+    publicId: string;
+    systemId: string;
+};
+export type attributes = {
+    [key: string]: string | number | true | null;
+};
+export type elementNode = {
+    type: NodeType.Element;
+    tagName: string;
+    attributes: attributes;
+    childNodes: serializedNodeWithId[];
+    isSVG?: true;
+    needBlock?: boolean;
+    isCustom?: true;
+};
+export type textNode = {
+    type: NodeType.Text;
+    textContent: string;
+    isStyle?: true;
+};
+export type cdataNode = {
+    type: NodeType.CDATA;
+    textContent: '';
+};
+export type commentNode = {
+    type: NodeType.Comment;
+    textContent: string;
+};
+export type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
+    rootId?: number;
+    isShadowHost?: boolean;
+    isShadow?: boolean;
+};
+export type serializedNodeWithId = serializedNode & {
+    id: number;
+};
+export type MobileNodeType = 'text' | 'image' | 'screenshot' | 'rectangle' | 'placeholder' | 'web_view' | 'input' | 'div' | 'radio_group' | 'status_bar' | 'navigation_bar';
+export type MobileStyles = {
+    /**
+     * @description maps to CSS color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000
+     */
+    color?: string;
+    /**
+     * @description maps to CSS background-color. Accepts any valid CSS color value. Expects a #RGB value e.g. #000 or #000000
+     */
+    backgroundColor?: string;
+    /**
+     * @description if provided this will be used as a base64 encoded image source for the backgroundImage css property, with no other attributes it is assumed to be a PNG
+     */
+    backgroundImage?: string;
+    /**
+     * @description can be used alongside the background image property to specify how the image is rendered. Accepts a subset of the valid values for CSS background-size property. If not provided (and backgroundImage is present) defaults to 'auto'
+     */
+    backgroundSize?: 'contain' | 'cover' | 'auto';
+    /**
+     * @description if borderWidth is present, then border style is assumed to be solid
+     */
+    borderWidth?: string | number;
+    /**
+     * @description if borderRadius is present, then border style is assumed to be solid
+     */
+    borderRadius?: string | number;
+    /**
+     * @description if borderColor is present, then border style is assumed to be solid
+     */
+    borderColor?: string;
+    /**
+     * @description vertical alignment with respect to its parent
+     */
+    verticalAlign?: 'top' | 'bottom' | 'center';
+    /**
+     * @description horizontal alignment with respect to its parent
+     */
+    horizontalAlign?: 'left' | 'right' | 'center';
+    /**
+     * @description maps to CSS font-size. Accepts any valid CSS font-size value. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    fontSize?: string | number;
+    /**
+     * @description maps to CSS font-family. Accepts any valid CSS font-family value.
+     */
+    fontFamily?: string;
+    /**
+     * @description maps to CSS padding-left. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingLeft?: string | number;
+    /**
+     * @description maps to CSS padding-right. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingRight?: string | number;
+    /**
+     * @description maps to CSS padding-top. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingTop?: string | number;
+    /**
+     * @description maps to CSS padding-bottom. Expects a number (treated as pixels) or a string that is a number followed by px e.g. 16px
+     */
+    paddingBottom?: string | number;
+};
+type wireframeBase = {
+    id: number;
+    /**
+     * @description x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present this is equivalent to setting them to 0
+     */
+    x?: number;
+    y?: number;
+    width: number | '100vw';
+    height: number;
+    childWireframes?: wireframe[];
+    type: MobileNodeType;
+    style?: MobileStyles;
+};
+export type wireframeInputBase = wireframeBase & {
+    type: 'input';
+    /**
+     * @description for several attributes we technically only care about true or absent as values. They are represented as bare attributes in HTML <input disabled>. When true that attribute is added to the HTML element, when absent that attribute is not added to the HTML element. When false or absent they are not added to the element.
+     */
+    disabled: boolean;
+};
+export type wireframeCheckBox = wireframeInputBase & {
+    inputType: 'checkbox';
+    /**
+     * @description for several attributes we technically only care about true or absent as values. They are represented as bare attributes in HTML <input checked>. When true that attribute is added to the HTML element, when absent that attribute is not added to the HTML element. When false or absent they are not added to the element.
+     */
+    checked: boolean;
+    label?: string;
+};
+export type wireframeToggle = wireframeInputBase & {
+    inputType: 'toggle';
+    checked: boolean;
+    label?: string;
+};
+export type wireframeRadioGroup = wireframeBase & {
+    type: 'radio_group';
+};
+export type wireframeRadio = wireframeInputBase & {
+    inputType: 'radio';
+    /**
+     * @description for several attributes we technically only care about true or absent as values. They are represented as bare attributes in HTML <input checked>. When true that attribute is added to the HTML element, when absent that attribute is not added to the HTML element. When false or absent they are not added to the element.
+     */
+    checked: boolean;
+    label?: string;
+};
+export type wireframeInput = wireframeInputBase & {
+    inputType: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+    value?: string;
+};
+export type wireframeSelect = wireframeInputBase & {
+    inputType: 'select';
+    value?: string;
+    options?: string[];
+};
+export type wireframeTextArea = wireframeInputBase & {
+    inputType: 'text_area';
+    value?: string;
+};
+export type wireframeButton = wireframeInputBase & {
+    inputType: 'button';
+    /**
+     * @description this is the text that is displayed on the button, if not sent then you must send childNodes with the button content
+     */
+    value?: string;
+};
+export type wireframeProgress = wireframeInputBase & {
+    inputType: 'progress';
+    /**
+     * @description This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take. When bar style is rating this is the number of filled stars.
+     */
+    value?: number;
+    /**
+     * @description The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1. When bar style is rating this is the number of stars.
+     */
+    max?: number;
+    style?: MobileStyles & {
+        bar: 'horizontal' | 'circular' | 'rating';
+    };
+};
+export type wireframeInputComponent = wireframeCheckBox | wireframeRadio | wireframeInput | wireframeSelect | wireframeTextArea | wireframeButton | wireframeProgress | wireframeToggle;
+export type wireframeText = wireframeBase & {
+    type: 'text';
+    text: string;
+};
+export type wireframeImage = wireframeBase & {
+    type: 'image';
+    /**
+     * @description this will be used as base64 encoded image source, with no other attributes it is assumed to be a PNG, if omitted a placeholder is rendered
+     */
+    base64?: string;
+};
+/**
+ * @description a screenshot behaves exactly like an image, but it is expected to be a screenshot of the screen at the time of the event, when sent as a mutation it must always attached to the root of the playback, when sent as an initial snapshot it must be sent as the first or only snapshot so that it attaches to the body of the playback
+ */
+export type wireframeScreenshot = wireframeImage & {
+    type: 'screenshot';
+};
+export type wireframeRectangle = wireframeBase & {
+    type: 'rectangle';
+};
+export type wireframeWebView = wireframeBase & {
+    type: 'web_view';
+    url?: string;
+};
+export type wireframePlaceholder = wireframeBase & {
+    type: 'placeholder';
+    label?: string;
+};
+export type wireframeDiv = wireframeBase & {
+    type: 'div';
+};
+/**
+ * @description the status bar respects styling and positioning, but it is expected to be at the top of the screen with limited styling and no child elements
+ */
+export type wireframeStatusBar = wireframeBase & {
+    type: 'status_bar';
+};
+/**
+ * @description the navigation bar respects styling and positioning, but it is expected to be at the bottom of the screen with limited styling and no child elements
+ */
+export type wireframeNavigationBar = wireframeBase & {
+    type: 'navigation_bar';
+};
+export type wireframe = wireframeText | wireframeImage | wireframeScreenshot | wireframeRectangle | wireframeDiv | wireframeInputComponent | wireframeRadioGroup | wireframeWebView | wireframePlaceholder | wireframeStatusBar | wireframeNavigationBar;
+export type fullSnapshotEvent = {
+    type: EventType.FullSnapshot;
+    data: {
+        /**
+         * @description This mimics the RRWeb full snapshot event type, except instead of reporting a serialized DOM it reports a wireframe representation of the screen.
+         */
+        wireframes: wireframe[];
+        initialOffset: {
+            top: number;
+            left: number;
+        };
+    };
+};
+export type incrementalSnapshotEvent = {
+    type: EventType.IncrementalSnapshot;
+    data: any;
+} | MobileIncrementalSnapshotEvent;
+export type MobileNodeMutation = {
+    parentId: number;
+    wireframe: wireframe;
+};
+export type MobileNodeMutationData = {
+    source: IncrementalSource.Mutation;
+    /**
+     * @description An update is implemented as a remove and then an add, so the updates array contains the ID of the removed node and the wireframe for the added node
+     */
+    updates?: MobileNodeMutation[];
+    adds?: MobileNodeMutation[];
+    /**
+     * @description A mobile remove is identical to a web remove
+     */
+    removes?: removedNodeMutation[];
+};
+export type MobileIncrementalSnapshotEvent = {
+    type: EventType.IncrementalSnapshot;
+    /**
+     * @description This sits alongside the RRWeb incremental snapshot event type, mobile replay can send any of the RRWeb incremental snapshot event types, which will be passed unchanged to the player - for example to send touch events. removed node mutations are passed unchanged to the player.
+     */
+    data: MobileNodeMutationData;
+};
+export type metaEvent = {
+    type: EventType.Meta;
+    data: {
+        href?: string;
+        width: number;
+        height: number;
+    };
+};
+export type keyboardEvent = {
+    type: EventType.Custom;
+    data: {
+        tag: 'keyboard';
+        payload: {
+            open: true;
+            styles?: MobileStyles;
+            /**
+             * @description x and y are the top left corner of the element, if they are present then the element is absolutely positioned, if they are not present then the keyboard is at the bottom of the screen
+             */
+            x?: number;
+            y?: number;
+            height: number;
+            width?: number;
+        } | {
+            open: false;
+        };
+    };
+};
+export type mobileEvent = fullSnapshotEvent | metaEvent | customEvent | incrementalSnapshotEvent | keyboardEvent;
+export type mobileEventWithTime = mobileEvent & {
+    timestamp: number;
+    delay?: number;
+};
+export {};

package/dist/mobileTransformer/mobile-replay/mobile.types.js

@@ -0,0 +1,11 @@
+var NodeType;
+(function (NodeType) {
+    NodeType[NodeType["Document"] = 0] = "Document";
+    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
+    NodeType[NodeType["Element"] = 2] = "Element";
+    NodeType[NodeType["Text"] = 3] = "Text";
+    NodeType[NodeType["CDATA"] = 4] = "CDATA";
+    NodeType[NodeType["Comment"] = 5] = "Comment";
+})(NodeType || (NodeType = {}));
+
+export { NodeType };