search

react-native-elements / playground

Exploring Possibilities with React Native Elements
https://react-native-elements.js.org
MIT License
19 stars 43 forks source link

playground crashes upon irrevelent input to the object parameters in development mode. #37

Open ahtrahdis7 opened 3 years ago

ahtrahdis7 commented 3 years ago

Steps to Reproduce:

  1. Start the server by yarn start
  2. Open the playground for any component
  3. Goto any object input field
  4. start typing improper input

Expected behaviour: It shows a pop-up with the error message ( which it does ) and it should not crash which happens after some delay

Actual Behaviour: https://user-images.githubusercontent.com/44672399/110827446-156f2480-82bc-11eb-8253-a9b2f9195c06.mov

ankushdutt commented 3 years ago

Hey @ahtrahdis7 saw the video, I guess it is showing the error message and is crashing after some delay. In the expected behavior, did you mean that it should not crash?

ahtrahdis7 commented 3 years ago

@ankushdutt Thanks, It was a typo. i have edited it.

mhmd21 commented 3 years ago

The website isn't crashing; it's an error overlay feature from create-react-app. This error overlay only appears in development. Whenever a runtime error happens, an overlay with the error appears in your browser. Basically what happened was react-view's error component (which is the popup you saw before the error overlay) outputted the error and then the error overlay was triggered. This is nothing to worry about. You can click the "X" on the top-right corner to close the overlay.

ahtrahdis7 commented 3 years ago

I get it @mhmd21 , what you are trying to say. The production build works fine. I issued this ticket with a view that there might be a way around in which the error screen doesn't appear and only the pop-up does. Although, if react-view is made to function that way, there is nothing one can do about it in here.

pranshuchittora commented 3 years ago

In dev, it will crash but in prod build, it won't. Adding an error boundary might fix the issue in dev are well. Feel free to raise a PR with the fix.

jugshaurya commented 3 years ago

@pranshuchittora working on it

jugshaurya commented 3 years ago

@pranshuchittora , while working on it, I found out that the react-view library has an ErrorBoundary implemented itself, which in turn catching the error seen above, now even if we put an Error Boundary above Compiler Component, an error will not come through to our ErrorBoundary because it is caught by lower implemented Errorboundary of react-view. If you got what I am saying, I think we can not implement it in our app. Because react-view library has a bug. right?

I have even added ErrorBoundary over the Root component inside App component. It is not working.