https://github.com/albertfdp/react-resilient

🛡 A component that resiliently renders components that might fail
https://github.com/albertfdp/react-resilient

error-boundaries error-handling fiber react resilent

Last synced: 3 months ago
JSON representation

🛡 A component that resiliently renders components that might fail

• Host: GitHub
• URL: https://github.com/albertfdp/react-resilient
• Owner: albertfdp
• License: mit
• Created: 2017-03-19T18:44:01.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-07-17T22:02:43.000Z (almost 9 years ago)
• Last Synced: 2025-09-01T17:56:48.559Z (10 months ago)
• Topics: error-boundaries, error-handling, fiber, react, resilent
• Language: JavaScript
• Homepage: https://albertfdp.github.io/react-resilient
• Size: 672 KB
• Stars: 40
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-resilient

[![Build Status](https://travis-ci.org/albertfdp/react-resilient.svg?branch=master)](https://travis-ci.org/albertfdp/react-resilient)

[![npm version](https://badge.fury.io/js/react-resilient.svg)](https://badge.fury.io/js/react-resilient)

A React component for resiliently render components that might fail. It wraps them around a React Fiber error boundary.

* Tries to render your component

* Renders `` after the maximum number of retries (`props.maxRetries`)

---

#### ⚠️ DISCLAIMER: Experimental

This is **experimental** and **unstable** React API. It will be fully supported with `react@16.0.0` with first-level support `componentDidCatch`: https://github.com/facebook/react/pull/10200.

---

### [Demo](https://albertfdp.github.io/react-resilient)

```js

import React from 'react'

import Resilient from 'react-resilient'

const Broken = () => {

  throw new Error('Broken!')

}

const FallbackComponent = () => (

  
This is my fallback

)


export default class Application extends React.Component {

  onError = (error) => {

    console.error('Error catched', error)

  }

  

  render () {

    return (

      

        

      

    )

  }

}

```

### API

```js

  

```

##### `props.FallbackComponent (optional, defaults to render null)`

React component displayed after the `maxRetries`

##### `props.maxRetries` (optional, defaults to 0)

Number of retries before showing the `FallbackComponent`

##### `props.onError` (optional)

Callback for when errors are thrown