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[]} - 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

Example:

setupNoibu({
   domain: 'react-native-app.myshop.com',
   enableHttpDataCollection: true,
   listOfUrlsToCollectHttpDataFrom: [
      'https://react-native-app.myshop.com/backend',
      'https://example.com/some-path/',
   ],
   blockedElements: ['sensitive-info']
});

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.

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

NoibuJS.addCustomAttribute('myNameIs', 'Jeff'); // Promise<SUCCESS>
NoibuJS.addCustomAttribute('veryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLong', 'Jeff'); // 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 2023 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.