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

[ahtrahdis7]

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]

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]

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

[mhmd21]

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]

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]

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]

@pranshuchittora working on it

[jugshaurya]

@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.