Noibu React SDK

Sometimes, errors are hidden from the NoibuJS script by JavaScript frameworks like Vue.js and React. This new Software Development Kit (SDK) works with React to uncover errors that were previously invisible to Noibu.

If your website uses React and you do not implement this SDK, a majority of errors on your site will not be captured. React dev tools, or tools like Wappalyzer, can be used to confirm if your site uses React.

Note: If your domain uses React's server side rendering, you will not need the Noibu React SDK to capture errors.

Prerequisites

The NoibuJS script must be deployed to your site's HTML <head> tag.
Your application must be running React V.16 or later. This is because the Noibu React SDK leverages the ErrorBoundary mechanism to capture errors.

Installation

NPM

npm install noibu-react

Yarn

yarn install noibu-react

Usage

Be sure to replace all ErrorBoundaries in your application with the Noibu.ErrorBoundary.

Import

import * as Noibu from 'noibu-react';

Basic Usage

The code below imports the Noibu React SDK and wraps the MainContent component with the Noibu.ErrorBoundary. This ensures all errors thrown in the MainContent and underlying components are captured and handled by the ErrorBoundary. Read more on the acceptable props 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 gets rendered when the error boundary encounters an error. This 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;