Error handling

[cjorasch]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

• feature request

Current behavior:
If an Error is thrown anywhere within a component's render() method then the app will be in an inconsistent state. One significant impact is that router navigation no longer works.

Expected behavior:
Stencil should wrap calls to the render() method in a try/catch so that it can correctly handle the resulting state. It looks like try/catch is being done at a higher level but maybe some of the error handling isn't working.

Other component methods such as PropDidChange() andComponentDidLoad() may have similar issues.

Further enhancements:

Beyond catching Errors it would be nice to be able to define UI behavior for error conditions. This could include not only errors in component code but also errors encountered by Stencil (e.g. component js file failed to load because of network error).

Since components are loaded async it would also be nice to have more control over display during loading. It can be confusing to see a blank screen (or blank section of the screen) and not know that there is some activity in progress. Async component loading could take multiple seconds over poor networks.

One example of error handling is React Error Boundaries.

[adamdbradley]

Yeah good idea, I think we can improve how we are catching errors. Thanks for the feedback.

[adamdbradley]

@cjorasch in the 0.2.0-1 release we made some error handling improvements. Would you be able to test it out and see if it works as expected?

[cjorasch]

I tried version 0.2.0-1 and still run into the same problem.

[adamdbradley]

Which methods are having the issue?

[cjorasch]

I navigate to a page that will throw an error. I throw an Error during page render and get a blank page. After the error, if I navigate back to a prior page that previously rendered correctly and then it does not render. Everything is blank until I refresh the page. Possibly an issue within the router.

[dxetech]

@adamdbradley Is there any way to log or catch errors? Your commit fixes the issue that @cjorasch originally submitted, but I don't see where to capture these errors.

I am using the component starter, and would like to log to a bug capturing web service for both expected an unexpected issues (e.g. sentry.io)

[felschr]

I'm having the same issue as @dxetech.
I have to add try catch blocks everywhere in my components just to find out where and what error occurs.
Some kind of global error handling or flag for logging errors would be nice.

[amazzoccone]

Isn't an important improvement this issue? It's a really bad experience see a blank page 😞.

[dxetech]

We have determined that this issue has left Stencil as not production ready for our environment. If we cannot trace and capture bugs and exceptions, we cannot rely on Stencil.

It's a shame, because we love everything that Stencil represents, and believe in Web Components and TypeScript as the future of the web, but this simple issue is too critical for us to ignore.

[mnemanja]

Why was this issue closed? Has there been a solution devised on how to handle errors?

[Chibionos]

Reopen this issue please, it is critical for error handling to be integrated in the framework. Without which we cannot add insights to figure out if we are hitting errors on the wild.

[johnjenkins]

@Chibionos perhaps give this PR a +1. It enables better error handling in things like ‘render’

[splitinfinities]

Hey folks! Like @johnjenkins suggests, please head over there so we can gather signal around a feature like this!