Fix Alpine.js becoming unresponsive after uncaught exception in reactive effect callback

[ferranconde]

Fix Alpine.js unresponsive after uncaught exception in reactive effect callback

Context

Alpine.js executes reactive effects when the application state changes. Some of these reactive effects involve executing
custom methods defined by the application developers (e.g. methods for x-show, x-text) and thus may contain bugs.
When one of these callbacks raises an unexpected exception, the whole application becomes unresponsive because Alpine does not handle this gracefully.

In the following reproducible example (https://codepen.io/ferranconde/pen/PoaQJaX?editors=1010),
there's a component whose x-show method features a faulty implementation.
After clicking on the orange button, any other component, e.g. the counter text + button, stops working: the application is in an unrecoverable state.

The issue is that, in scheduler.js:flushJobs(), if there is an uncaught exception in the for loop that traverses
the job queue, the flushing flag is not properly reset. On any subsequent state changes, the condition for queueFlush()
to call flushJobs will never be true anymore. A page reload is then needed.

Fix

As per this comment, the place where this issue should be solved is in the evaluator. When the custom method for x-show, x-text... is defined as a method, Alpine's custom error handler is not being applied; it's only applied when the custom method is defined as a string.
The proposed change avoids returning early when expression is of typeof function, thus ensuring that the error handler applies to this case as well.

[SimoTod]

I believe the real issue is in the evaluator. There is a custom error handler in alpine which prints a useful debug warning in the console and keep the stack running. It seems like is not applied in all cases.
See https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L42-L48

The generateEvaluatorFromFunction (which runs in your example) doesn't use the ad hoc handler.

I suppose the code at those line it should really be something like

evaluator = (typeof expression === 'function') 
  ? generateEvaluatorFromFunction(dataStack, expression)
  : generateEvaluatorFromString(dataStack, expression, el);

return tryCatch.bind(null, el, expression, evaluator)

[ferranconde]

@SimoTod thanks for the pointer to the root cause. I've been able to confirm that your proposed change indeed fixes the issue. I've updated the PR to reflect this.

[joshhanley]

@ferranconde thanks for the PR! Could you add a test for this? Thanks!

[calebporzio]

Looks good to me. I'm not sure why the direct function evaluator wasn't put through the try catch as well.

Hopefully not for some specific reason we're about to find out when we tag the next release lol.

Thanks for digging deep on this problem @ferranconde and @SimoTod!