Handle errors in value and target callbacks

src/core/context.ts

@@ -134,7 +134,11 @@ export class Context implements ErrorHandler, TargetObserverDelegate, OutletObse
   invokeControllerMethod(methodName: string, ...args: any[]) {
     const controller: any = this.controller
     if (typeof controller[methodName] == "function") {
-      controller[methodName](...args)
+      try {
+        controller[methodName](...args)
+      } catch (error: any) {
+        this.handleError(error, `invoking "${methodName}"`)
+      }
     }
   }
 }

src/core/value_observer.ts

@@ -95,12 +95,12 @@ export class ValueObserver implements StringMapObserverDelegate {
         }
 
         changedMethod.call(this.receiver, value, oldValue)
-      } catch (error) {
+      } catch (error: any) {
         if (error instanceof TypeError) {
           error.message = `Stimulus Value "${this.context.identifier}.${descriptor.name}" - ${error.message}`
         }
 
-        throw error
+        this.context.handleError(error, `invoking "${changedMethodName}"`)
       }
     }
   }

src/tests/modules/core/error_handler_target_tests.ts

@@ -0,0 +1,74 @@
+import { Controller } from "../../../core/controller"
+import { Application } from "../../../core/application"
+import { ControllerTestCase } from "../../cases/controller_test_case"
+
+class MockLogger {
+  errors: any[] = []
+  logs: any[] = []
+  warns: any[] = []
+
+  log(event: any) {
+    this.logs.push(event)
+  }
+
+  error(event: any) {
+    this.errors.push(event)
+  }
+
+  warn(event: any) {
+    this.warns.push(event)
+  }
+
+  groupCollapsed() {}
+  groupEnd() {}
+}
+
+class ErrorWhileConnectingTargetController extends Controller {
+  static targets = ["item"]
+
+  itemTargetConnected(_element: Element) {
+    throw new Error("bad target connect!")
+  }
+}
+
+class TestApplicationWithDefaultErrorBehavior extends Application {}
+
+export default class ErrorHandlerTargetTests extends ControllerTestCase(ErrorWhileConnectingTargetController) {
+  controllerConstructor = ErrorWhileConnectingTargetController
+  fixtureHTML = `
+    <div data-controller="test">
+      <div data-test-target="item"></div>
+    </div>
+  `
+
+  async setupApplication() {
+    const logger = new MockLogger()
+
+    this.application = new TestApplicationWithDefaultErrorBehavior(this.fixtureElement, this.schema)
+    this.application.logger = logger
+
+    window.onerror = function (message, source, lineno, colno, _error) {
+      logger.log(
+        `error from window.onerror. message = ${message}, source = ${source}, lineno = ${lineno}, colno = ${colno}`
+      )
+    }
+
+    super.setupApplication()
+  }
+
+  async "test errors in target connected callbacks are handled by built in logger"() {
+    const mockLogger: any = this.application.logger
+
+    this.assert.equal(1, mockLogger.errors.length)
+  }
+
+  async "test errors in target connected callbacks are handled by window.onerror"() {
+    const mockLogger: any = this.application.logger
+
+    this.assert.equal(1, mockLogger.logs.length)
+    this.assert.equal(
+      'error from window.onerror. message = Error invoking "itemTargetConnected", source = , lineno = 0, colno = 0',
+      mockLogger.logs[0]
+    )
+  }
+}

src/tests/modules/core/error_handler_value_tests.ts

@@ -0,0 +1,70 @@
+import { Controller } from "../../../core/controller"
+import { Application } from "../../../core/application"
+import { ControllerTestCase } from "../../cases/controller_test_case"
+
+class MockLogger {
+  errors: any[] = []
+  logs: any[] = []
+  warns: any[] = []
+
+  log(event: any) {
+    this.logs.push(event)
+  }
+
+  error(event: any) {
+    this.errors.push(event)
+  }
+
+  warn(event: any) {
+    this.warns.push(event)
+  }
+
+  groupCollapsed() {}
+  groupEnd() {}
+}
+
+class ErrorWhileChangingValueController extends Controller {
+  static values = { closed: Boolean }
+
+  closedValueChanged() {
+    throw new Error("bad value change!")
+  }
+}
+
+class TestApplicationWithDefaultErrorBehavior extends Application {}
+
+export default class ErrorHandlerValueTests extends ControllerTestCase(ErrorWhileChangingValueController) {
+  controllerConstructor = ErrorWhileChangingValueController
+  fixtureHTML = `<div data-controller="test" data-test-closed-value="true"></div>`
+
+  async setupApplication() {
+    const logger = new MockLogger()
+
+    this.application = new TestApplicationWithDefaultErrorBehavior(this.fixtureElement, this.schema)
+    this.application.logger = logger
+
+    window.onerror = function (message, source, lineno, colno, _error) {
+      logger.log(
+        `error from window.onerror. message = ${message}, source = ${source}, lineno = ${lineno}, colno = ${colno}`
+      )
+    }
+
+    super.setupApplication()
+  }
+
+  async "test errors in value changed callbacks are handled by built in logger"() {
+    const mockLogger: any = this.application.logger
+
+    this.assert.equal(1, mockLogger.errors.length)
+  }
+
+  async "test errors in value changed callbacks are handled by window.onerror"() {
+    const mockLogger: any = this.application.logger
+
+    this.assert.equal(1, mockLogger.logs.length)
+    this.assert.equal(
+      'error from window.onerror. message = Error invoking "closedValueChanged", source = , lineno = 0, colno = 0',
+      mockLogger.logs[0]
+    )
+  }
+}