[WIP] Errors now caught when using async events/methods

examples/controllers/async_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "button" ]
+
+  async sleep() {
+    return new Promise(r => setTimeout(r, 1000));
+  }
+
+
+  async initialize() {
+    await this.sleep();
+    alert('async initialize complete')
+  }
+
+  async run() {
+    await this.sleep();
+    alert('Async function complete');
+  }
+
+  async throwError() {
+    await this.sleep();
+    throw Error('This error should be caught by stimulus, and stimulus should display a detailed error in the console');
+  }
+}

examples/index.js

@@ -17,3 +17,6 @@ application.register("slideshow", SlideshowController)
 
 import TabsController from "./controllers/tabs_controller"
 application.register("tabs", TabsController)
+
+import AsyncController from "./controllers/async_controller"
+application.register("async", AsyncController)

examples/server.js

@@ -23,6 +23,7 @@ const pages = [
   { path: "/slideshow", title: "Slideshow" },
   { path: "/content-loader", title: "Content Loader" },
   { path: "/tabs", title: "Tabs" },
+  { path: "/async", title: "Async" },
 ]
 
 app.get("/", (req, res) => {

examples/views/async.ejs

@@ -0,0 +1,13 @@
+<%- include("layout/head") %>
+
+<p data-controller="async">
+  <button data-action="async#run">Click me</button>
+</p>
+
+<br />
+
+<p data-controller="async">
+  <button data-action="async#throwError">Throw error</button>
+</p>
+
+<%- include("layout/tail") %>

src/core/binding.ts

@@ -72,14 +72,20 @@ export class Binding {
   }
 
   private invokeWithEvent(event: ActionEvent) {
+    const handleError = (error: any) => {
+      const { identifier, controller, element, index } = this
+      const detail = { identifier, controller, element, index, event }
+      this.context.handleError(error, `invoking action "${this.action}"`, detail)
+    }
+
     const { target, currentTarget } = event
     try {
-      this.method.call(this.controller, event)
+      Promise
+        .resolve(this.method.call(this.controller, event))
+        .catch(error => handleError(error))
       this.context.logDebugActivity(this.methodName, { event, target, currentTarget, action: this.methodName })
     } catch (error: any) {
-      const { identifier, controller, element, index } = this
-      const detail = { identifier, controller, element, index, event }
-      this.context.handleError(error, `invoking action "${this.action}"`, detail)
+      handleError(error)
     }
   }
 

src/core/context.ts

@@ -30,7 +30,9 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
     this.outletObserver = new OutletObserver(this, this)
 
     try {
-      this.controller.initialize()
+      Promise
+        .resolve(this.controller.initialize())
+        .catch(error => this.handleError(error, "initializing controller"))
       this.logDebugActivity("initialize")
     } catch (error: any) {
       this.handleError(error, "initializing controller")
@@ -44,7 +46,9 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
     this.outletObserver.start()
 
     try {
-      this.controller.connect()
+      Promise
+        .resolve(this.controller.connect())
+        .catch(error => this.handleError(error, "connecting controller"))
       this.logDebugActivity("connect")
     } catch (error: any) {
       this.handleError(error, "connecting controller")
@@ -57,7 +61,9 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
 
   disconnect() {
     try {
-      this.controller.disconnect()
+      Promise
+        .resolve(this.controller.disconnect())
+        .catch(error => this.handleError(error, "disconnecting controller"))
       this.logDebugActivity("disconnect")
     } catch (error: any) {
       this.handleError(error, "disconnecting controller")