Fix Alpine.js becoming unresponsive after uncaught exception in reactive effect callback #3279
+3
−5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thefor
loop that traversesthe job queue, the
flushing
flag is not properly reset. On any subsequent state changes, the condition forqueueFlush()
to call
flushJobs
will never betrue
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 oftypeof function
, thus ensuring that the error handler applies to this case as well.