@react-nitro/error-boundary

    0.0.2 • Public • Published

    error-boundary

    An Error Boundary HOC for React Projects

    Screenshot

    Installation

    npm i -S @react-nitro/error-boundary

    Documentation

    HOC

    A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

    For more information on creating HOC's, checkout HOC-React.

    Error Boundary

    A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.

    For more information on creating error boundaries, checkout Error Boundary React.

    Usage

    // Banner Component 
    import React from 'react';
    import ReactDOM from 'react-dom';
    ...
    import { withErrorBoundary } from '@react-nitro/error-boundary';
    
    class Banner extends React.PureComponent {
      render() {
        /* istanbul ignore next */
        const {
          cms: { bannerType }
        } = this.props;
        /* istanbul ignore else if */
        if (bannerType === BANNER_TYPE_SITE) {
          return <SiteBanner {...this.props} />;
        } else if (bannerType === BANNER_TYPE_PAGE) {
          return <PageBanner {...this.props} />;
        }
        /* istanbul ignore next */
        return <div />;
      }
    }
    
    Banner.propTypes = {
      cms: PropTypes.object.isRequired
    };
    
    const BannerWrapped = withErrorBoundary(Banner, null, 'Banner');
    
    export default BannerWrapped;

    API

    withErrorBoundary(WrappedComponent, paths, [comonentName])

    Arguments

    • WrappedComponent (Object): The React component to be wrapped by the HOC.
    • path (Array|string): The path(s) of the properties to test from this.props.
    • [comonentName] (string): The name of the component to be shown in the error.
    // Banner Component
    
    const BannerWrapped = withErrorBoundary(Banner, ['a.b', 'a.c[0]', 'd.e.f.g'], 'Banner');

    Utils

    This package comes with two addtional utilities

    1. get(object, path, [defaultValue])

    Wrapper over lodash.get to have fallbacks for deep objects paths. Also throws errors in the console for paths that were not reachable without causing problems in execution.

    Arguments

    • object (Object): The object to query.
    • path (Array|string): The path of the property to get.
    • [defaultValue] (*): The value returned for undefined resolved values.
    // Example usage
    ...
    import { get } from '@react-nitro/error-boundary';
    ...
    class TextComp extends PureComponent {
        render() {
            return (<div>{get(this.props, 'a.b.c[0].d', 'fallback')}</div>)
        }
    }
    1. Storage

    Static class to do the read/write to session storage, reading/writing cookies etc.

    import { Storage } from '@react-nitro/error-boundary';
    /**
     * This function sets the data to session storage per the key provided
     * @param {String} key The key to set into session storage
     * @param {Object} value The value to be set against the key in session storage
     */
    Storage.setSessionStorage('foo', 'bar');
    /**
     * This function gets the value/data from session storage based on the key provided.
     * @param {String} key The key identifier to get data from session storage
     */
    Storage.getSessionStorage('foo');
    /**
     * This function removes the session storage key and its data
     * @param {String} key The key identifier to remove data from session storage
     */
    Storage.removeSessionStorage('foo');
    /**
     * This function is able to get the cookie data based on the cookie name provided.
     * If the cookie name not found, it will return blank string.
     * @param {*} cName
     */
     Storage.getCookie('foo');
     /**
     * This function to set a cookie
     * @param {String} key 
     * @param {String} value 
     * @param {String} expiry 
     */
     Storage.setCookie('foo', 'bar');

    Install

    npm i @react-nitro/error-boundary

    DownloadsWeekly Downloads

    9

    Version

    0.0.2

    License

    ISC

    Unpacked Size

    44.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • areai51
    • nisheed2016
    • vinaymavi