react-guard icon indicating copy to clipboard operation
react-guard copied to clipboard

Provide fallback

Open havenchyk opened this issue 8 years ago • 2 comments

What do you think about possible fallback for component?

E.g. We have 10 components and would like to handle their errors, but not in the same way (for error in component 1 show notification, for component 2 - red box etc)

So with current interface I don't see the way to make it possible

reactGuard(React, function (err, componentInfo) {
  return <div>Failed to render</div>
})

Possible solutions are:

  1. pass the class itself as a part of componentInfo (with static method that implements fallback)
  2. pass the class itself as a third parameter

@kossnocorp what do you think? maybe you have better idea?

havenchyk avatar Dec 12 '16 08:12 havenchyk

You can rely on displayName and put a condition to the guard function. Is it not enough? It would be helpful if you'll provide an extended example.

kossnocorp avatar Dec 12 '16 11:12 kossnocorp

@kossnocorp we can't rely on displayName, because of

  1. it doesn't work for createClass
  2. it doesn't work for functional components

But to my mind we can do something like this

class MyComponent extends React.Component {
  static guardFallback() {
    return <SomeSpecificJSX />
  }

  render() {
    throw new Error('some error')
  }
}

and handle error

reactGuard(React, function (err, componentInfo, ComponentClass) {
  if (ComponentClass.guardFallback) {
    return ComponentClass.guardFallback()
  }

  return <div>Failed to render</div>
})

it's just a suggestion, so your opinion is highly appreciated

havenchyk avatar Dec 12 '16 11:12 havenchyk