Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

🛡 A component that resiliently renders components that might fail

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 `[email protected]` 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