🩺🚀 React Healthy v2.0 🚀🩺

About

react-healthy provides multiple ways of alerting your users to potential API issues that might be affecting their experience in your application.

Installation

You can install the react-healthy package through any node package manager.

npm i react-healthy

or

yarn add react-healthy

Usage

react-healthy comes with two pre-built components that you can utilize in your application. If you'd like to use your own components, you can utilize the useHealthCheck hook to manage the logic for you.

💡 All components and hooks might take in specific types that will be referenced throughout this documentation. These types can be found in the src/types.ts file or at the bottom of this README

Healthy

The <Healthy /> component is a banner that will display at the top of your application, alerting your users to any issues with your APIs.

<Healthy /> takes in a HealthyConfig object and handles the rest.

Basic Usage

Simply import the <Healthy /> component in your main container (your Root file or wherever you are utilizing ReactDOM.render), and pass in the config object.

// other imports
import App from './App'
import {Healthy, HealthyConfig} from 'react-healthy'

const healthyConfig: HealthyConfig = {
  apis: [
    {
      name: 'Good API',
      endpoint: 'https://httpstat.us/200',
    },
    {
      name: 'Bad API',
      endpoint: 'https://httpstat.us/404',
    },
  ],
}

ReactDOM.render(
  <>
    <Healthy config={healthyConfig} />
    <App />
  </>,
  document.getElementById('root')
)

StatusPage

The <StatusPage /> is a page level component that displays a list of your APIs and their statuses.

The <StatusPage /> component takes in a StatusPageConfig object and handles the rest.

Basic Usage

The <StatusPage /> component can be used anywhere, including as a main route's component. However you'd like!

// other imports
import {StatusPage, StatusPageConfig} from 'react-healthy'

export const MyApp = () => {
  const statusPageConfig: StatusPageConfig = {
    apis: [
      {
        name: 'Good API',
        endpoint: 'https://httpstat.us/200',
      },
      {
        name: 'Bad API',
        endpoint: 'https://httpstat.us/404',
      },
    ],
  }

  return (
    <>
      <StatusPage config={statusPageConfig} />>
    </>
  )
}

useHealthCheck

If you want to use your own components or handle the errors in your own way, you can use the useHealthCheck hook. The hook takes in a HealthCheckConfig similar to the <Healthy /> and <StatusPage /> components. Two values are returned from this hook; pageHasErrors and apisWithErrors.

Basic Usage

// other imports
import App from './App'
import {useHealthCheck, HealthCheckConfig} from 'react-healthy'

const healthCheckConfig: HealthCheckConfig = {
  apis: [
    {
      name: 'Good API',
      endpoint: 'https://httpstat.us/200',
    },
    {
      name: 'Bad API',
      endpoint: 'https://httpstat.us/404',
    },
  ],
}

const MyApp = () => {
  const {pageHasErrors, apisWithErrors} = useHealthCheck(healthCheckConfig)

  return (
    <>
      {pageHasErrors ? <div>Errors!</div> : <div>No Errors!</div>}
      {apisWithErrors.map(api => (
        <div>{api.name} has errors!</div>
      ))}
    </>
  )
}

Docs Table of Contents

• Types
  • Api
  • ApiResponse
• Configs
  • HealthyConfig
  • StatusPageConfig
  • HealthCheckConfig

Types

Api

interface Api {
  /** Name of the API - to be displayed in the banner */
  name: string
  /** Endpoint of the API to ping */
  endpoint: string
}

ApiResponse

interface ApiResponse {
  /* The API that sent the response */
  api: Api
  /* The response object */
  response?: {
    /* The status code */
    status: number
    /* The status text */
    statusText: string
  }
}

HealthyConfig

type HealthyConfig = {
  /* An array of APIs to check */
  apis: Api[]
  /** A callback that's called after the component handles the error, for additional error handling */
  onError?: (api: ApiResponse) => void
  /** The interval at which to call the APIs in milliseconds; default is 30 seconds (30000) */
  interval?: number
  /** CSS class names to assign to the banner, banner content, and close button */
  classes?: {
    banner?: string
    content?: string
    closeButton?: string
  }
  /** Messages for the banner */
  messages?: BannerMessages
  /** Whether or not to show a close icon - default is false */
  closeable?: boolean
}

StatusPageConfig

type StatusPageConfig = {
  /* An array of APIs to check */
  apis: Api[]
  /** The interval at which to call the APIs in milliseconds; default is 30 seconds (30000) */
  interval?: number
  /** Messages for the banner and row */
  messages?: Pick<Messages, 'row' | 'statusPage'>
  /** A callback that's called after the component handles the error, for additional error handling */
  onError?: (api: ApiResponse) => void
}

HealthCheckConfig

type HealthCheckConfig = {
  /* An array of APIs to check */
  apis: Api[]
  /** The interval at which to call the APIs in milliseconds; default is 30 seconds (30000) */
  interval?: number
  /** A callback that's called after the component handles the error, for additional error handling */
  onError?: (api: ApiResponse) => void
}