Noibu React SDK

Noibu's React SDK used to allow Noibu to capture React errors.

Prerequisites

Noibu Script

The Noibu script needs to have been loaded before the React SDK can successfully send errors to Noibu.

Install the Noibu script by adding the below script in the head section of your all html pages:

<script src="https://cdn.noibu.com/collect.js"></script>

React Versions Supported

The Noibu React SDK supports React application that are at least version 16, since the Noibu React SDK leverages the ErrorBoundary mechanism to capture errors.

Installation

Once the Noibu script has been added to the necessary html pages. You can start using the React SDK knowing that Noibu will capture all errors.

NPM

npm install noibu-react

Yarn

yarn install noibu-react

Usage

Notes

Make sure to replace all ErrorBoundaries in your application with the Noibu provided Error Boundary.

Import

import * as Noibu from 'noibu-react';

Basic Usage

The below code imports the Noibu React SDK and wraps the MainContent component with the Noibu.ErrorBoundary. This makes sure that all errors thrown in the MainContent and any underlying components are captured and handled by the ErrorBoundary. Read more on the props acceptable in the ErrorBoundary Class section.

import './App.css';
import MainContent from './ErrorGenerator';
import * as Noibu from 'noibu-react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Welcome to the Noibu React SDK</p>
        <Noibu.ErrorBoundary
          fallback={
            <div>
              <h2>Something went wrong.</h2>
            </div>
          }
        >
          <MainContent />
        </Noibu.ErrorBoundary>
      </header>
    </div>
  );
}

ErrorBoundary Class

Props

A fallback component that gets rendered when the error boundary encounters an error. Can either provide a React Component or a function that returns a React Component as a valid fallback prop. If a function is provided, the function will be called with the error, the component stack, and a function that resets the error boundary on error.

type  FallbackRender = (errorData: {
  error: Error;
  componentStack: string | null;
  eventId: string | null;
  resetError(): void;
}) =>  React.ReactElement;

fallback?: React.ReactElement | FallbackRender;

Called when the error boundary encounters an error

onError?(
  error: Error,
  componentStack: string,
  eventId: string
): void;

Called on componentDidMount()

onMount?(): void;

Called if resetError() is called from the fallback render props function

onReset?(
  error: Error | null,
  componentStack: string | null,
  eventId: string | null,
): void;

Called on componentWillUnmount()

onUnmount?(
  error: Error | null,
  componentStack: string | null,
  eventId: string | null,
): void;