noibu-react-native

Noibu React-Native public SDK

Noibu's React Native SDK allows customers to easily track checkout errors in their Android and iOS apps written in React Native.

Table of Contents

• Installation
• Usage
• Configuration
• API Reference
• Contributing
• License

Installation

Requirements

For alpha version there are no strong limitations, except for:

• react-native version should be >=0.63.0

Installing the SDK

Install using favourite node package manager (npm, yarn, etc.):

npm install noibu-react-native --save

Additionally, for iOS target do:

npx pod-install

Usage

Call a setup method and wrap your root App component into SDK ErrorBoundary:

import React from 'react';
import { View, Text } from 'react-native';
import { ErrorBoundary, setupNoibu } from 'noibu-react-native';

setupNoibu({ domain: 'react-native-app.myshop.com' });

export default function App() {
  return (
    <ErrorBoundary
      fallback={() => (
        <View>
          <Text>Oh no!</Text>
        </View>
      )}
    >
      <View>
        <Text>Hello world!</Text>
      </View>
    </ErrorBoundary>
  );
}

That's it! First time the module is set up, it runs an init and starts listening to errors.

Configuration

setupNoibu(config): void method accepts following parameters:

• config which consists of
  • @property domain {string} - indicates which Noibu dashboard session recordings should go to (learn more about domains)
  • @property [blockedElements] {string[]} - defaults see below; lets you specify component ids to be ignored by SDK when collecting error information
  • @property [enableHttpDataCollection] {boolean} - default false; indicates whether SDK should collect HTTP information like headers or body from requests
  • @property [enableWebViewCapture] {boolean} - default true; indicates whether SDK should capture and record React Native WebView/WKWebView DOM content in session replay
  • @property [listOfUrlsToCollectHttpDataFrom] {string[]} - is an allowlist of URLs to allow HTTP data collection from, works best with enableHttpDataCollection enabled
  • @property [httpPiiBlockingPatterns] {RegExp[]} - defaults see below; 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[]} - defaults see below; 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[]} - defaults see below; 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

Note on overriding properties

The properties blockedElements, httpPiiBlockingPatterns, fuzzyFieldsToRedact, and exactFieldsToRedact have default values. If you want to override them or add new ones, you must also pass the original values, as seen below.

Example:

setupNoibu({
  domain: 'react-native-app.myshop.com',
  enableWebViewCapture: false,
  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',
  ],
});

ErrorBoundary component has a few useful properties described here https://help.noibu.com/hc/en-us/articles/9562254753677-Noibu-React-SDK under the section ErrorBoundary Class -> Props.

API Reference

Apart from exporting ErrorBoundary component, noibu-react-native module has NoibuJS object export with useful methods.

NoibuJS

requestHelpCode(): Promise<string>

Requests a help code from the HelpCode instance. To read more about help codes, refer to the page: https://help.noibu.com/hc/en-us/articles/14051818012813-How-to-Find-a-Session-with-Help-Code

• @returns {Promise<string>} - A promise that resolves with the requested help code.

import { NoibuJS } from 'noibu-react-native';
import { useCallback, useState } from 'react';
import { Alert, Text, Pressable, View } from 'react-native';

const AlertHelpCode = () => {
  const triggerHelpCodeAlert = useCallback(async () => {
    const response = await NoibuJS.requestHelpCode();
    if (response) {
      Alert.alert('Help Code delivered:', response);
    }
  }, []);
  return (
    <View>
      <Pressable onPress={triggerHelpCodeAlert}>
        <View>
          <Text>Tap to view Help Code</Text>
        </View>
      </Pressable>
    </View>
  );
};

addCustomAttribute(name: string, value: string) => Promise<string>

Adds a custom attribute to the session.

• @param {string} name - Name of a custom attribute.
• @param {any} value - It's value, should be a JSON.stringify-able type.
• @returns {Promise<string>} - A success message, or validation failure cause.

Example custom attributes we recommend

• appVersion The version of your application the user's session is running.
• customerId The ID of the customer the user's session is associated with.
• orderId The ID of the order associated with the user's session.
• voC The Voice of Customer survey ID the user's session is associated with.

Limitations on attribute name lengths

If the character length of the attribute name exceeds 50 characters, the attribute will fail to be added. See example below:

import { NoibuJS } from 'noibu-react-native';

NoibuJS.addCustomAttribute('stripeApiKey', 'some-api-key'); // Promise<SUCCESS>
NoibuJS.addCustomAttribute('system_configuration_payment_gateway_stripe_api_key_prod', 'some-api-key'); // Promise<NAME_TOO_LONG>

addError(customError: Error) => string

Adds a custom Error to the session.

• @param {{ message: string, stack: string }} customError - an Error-like object to be reported with the session.
• @returns {string} - A success message, or validation failure cause.

import { NoibuJS } from 'noibu-react-native';

NoibuJS.addError(new Error('My Error'));

addJsSdkError(customError: Error, errorSource: string) => string

Adds an error from a JS SDK to the session, this method is used by ErrorBoundary internally. Similar to addError(), but additionally allows to set a cause.

• @param {{ message: string, stack: string }} error - an Error-like object to be reported with the session.
• @param {string} errorSource - source of an error.
• @returns {string} - A success message, or validation failure cause.

import { NoibuJS } from 'noibu-react-native';

NoibuJS.addJsSdkError(new Error('My Error'), 'myModule.js');

License

Copyright 2024 Noibu.com

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.