Noibu React SDK

For websites built on the React framework, a significant number of front-end errors are hidden from the NoibuJS script without an additional software development kit (SDK). This SDK works with React to allow Noibu to uncover the full breadth of errors on your site. React dev tools, or tools like Wappalyzer, can be used to confirm if your site uses React.

Note: this article covers how to implement Noibu's monitoring platform on a website built with React. To implement Noibu on a React Native-based mobile app, you must use the React Native Mobile SDK instead.

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.
If your domain uses React's server side rendering, you will not need the Noibu React SDK 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;