-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: bugs related to fallbackUI #29
Conversation
simplify the solution update examples and readme
@EmEsA Thank you for the PR. This is a much needed improvement, and the PR looks great. My only concern is removing the existing behavior without a deprecation period. I know this is a zero version package, and an early one at that. What about detecting and handling the wrapper function, adding a deprecation warning? |
It might not be so easy. We could check |
I did some testing, and found that the existing implementation doesn't work with a wrapper function that returns a React Component. The intent may have been to say React Element, but the examples in the SDK doc and in https://github.com/rollbar/rollbar-react/blob/main/examples/index.js all pass a function component, not this other function signature. Based on the above, I don't think there's a meaningful legacy case to support, and this can be merged as is. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work, and thanks again.
Thanks, I'm happy I could contribute :) |
This is now published in v0.10.0. https://github.com/rollbar/rollbar-react/releases/tag/v0.10.0 |
simplify the solution update examples and readme
Description of the change
This PR fixes some bugs related to
fallbackUI
which would cause an error ( issue #19 ) caused by this line of code:
https://github.com/rollbar/rollbar-react/blob/main/src/error-boundary.js#L66
I think there was a misunderstanding of
React.isValidElement()
. It checks if a thing passed to it is an element (a result of rendering a component) not a component (function or a class withrender
method).<FallbackComponent />
passesReact.isValidElement()
but the line mentioned above tries to render it again, hence the error. What is more react doesn't like lowercase names for components, also used in line 66. I think an option of passing already rendered element doesn't bring any benefit over passing a functional component. Such an option wasn't also mentioned in the docs.const FallbackComponent = ({error, resetError}) => <div>error</div>
The problem was that both those things are of a type
function
and would go through this line:https://github.com/rollbar/rollbar-react/blob/main/src/error-boundary.js#L70
It would pass the props as positional arguments, not as a props object, resulting with a component with a regular signature
({error, resetError})
destructuring both the props asundefined
.The generator function also mentioned in the docs worked, but that's practically the same as a functional component. The difference is that a component takes params in an object
({error, resetError})
when a generator mentioned in the docs skips the object part(error, resetError)
. After the changes users will also be able to use class components as fallbackUI.WARNING: Dropping the option of passing a generator function is a breaking change.
Type of change
Related issues
Checklists
Development
Code review