[BUGFIX beta] Make assertions from on and fn more actionable.

packages/@ember/-internals/glimmer/lib/helpers/fn.ts

@@ -1,6 +1,6 @@
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
-import { CapturedArguments, VM, VMArguments } from '@glimmer/interfaces';
+import { CapturedArguments, Environment, VM, VMArguments } from '@glimmer/interfaces';
 import { HelperRootReference } from '@glimmer/reference';
 import buildUntouchableThis from '../utils/untouchable-this';
 import { INVOKE } from './mut';
@@ -79,14 +79,21 @@ const context = buildUntouchableThis('`fn` helper');
   @since 3.11.0
 */
 
-function fn({ positional }: CapturedArguments) {
+function fn({ positional }: CapturedArguments, env?: Environment<unknown>) {
   let callbackRef = positional.at(0);
 
+  assert(
+    `You must pass a function as the \`fn\` helpers first argument.`,
+    callbackRef !== undefined
+  );
+
   if (DEBUG && typeof callbackRef[INVOKE] !== 'function') {
     let callback = callbackRef.value();
 
     assert(
-      `You must pass a function as the \`fn\` helpers first argument, you passed ${callback}`,
+      `You must pass a function as the \`fn\` helpers first argument, you passed ${
+        callback === null ? 'null' : typeof callback
+      }. ${env!.getTemplatePathDebugContext(callbackRef)}`,
       typeof callback === 'function'
     );
   }
@@ -105,5 +112,12 @@ function fn({ positional }: CapturedArguments) {
 }
 
 export default function(args: VMArguments, vm: VM) {
-  return new HelperRootReference(fn, args.capture(), vm.env);
+  let callback = fn;
+  if (DEBUG) {
+    callback = (args: CapturedArguments) => {
+      return fn(args, vm.env);
+    };
+  }
+
+  return new HelperRootReference(callback, args.capture(), vm.env);
 }

packages/@ember/-internals/glimmer/lib/modifiers/on.ts

@@ -1,8 +1,11 @@
+import { Owner } from '@ember/-internals/owner';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 import { CapturedArguments, Destroyable, ModifierManager, VMArguments } from '@glimmer/interfaces';
+import { expect } from '@glimmer/util';
 import { CONSTANT_TAG, Tag } from '@glimmer/validator';
 import { SimpleElement } from '@simple-dom/interface';
+import { Renderer } from '../renderer';
 import buildUntouchableThis from '../utils/untouchable-this';
 
 const untouchableContext = buildUntouchableThis('`on` modifier');
@@ -48,6 +51,7 @@ const SUPPORTS_EVENT_OPTIONS = (() => {
 
 export class OnModifierState {
   public tag: Tag;
+  public owner: Owner;
   public element: Element;
   public args: CapturedArguments;
   public eventName!: string;
@@ -59,7 +63,8 @@ export class OnModifierState {
   public options?: AddEventListenerOptions;
   public shouldUpdate = true;
 
-  constructor(element: Element, args: CapturedArguments) {
+  constructor(owner: Owner, element: Element, args: CapturedArguments) {
+    this.owner = owner;
     this.element = element;
     this.args = args;
     this.tag = args.tag;
@@ -101,11 +106,31 @@ export class OnModifierState {
       this.shouldUpdate = true;
     }
 
-    assert(
-      'You must pass a function as the second argument to the `on` modifier',
-      args.positional.at(1) !== undefined && typeof args.positional.at(1).value() === 'function'
-    );
-    let userProvidedCallback = args.positional.at(1).value() as EventListener;
+    let userProvidedCallbackReference = args.positional.at(1);
+
+    if (DEBUG) {
+      assert(
+        `You must pass a function as the second argument to the \`on\` modifier.`,
+        args.positional.at(1) !== undefined
+      );
+
+      // hardcoding `renderer:-dom` here because we guard for `this.isInteractive` before instantiating OnModifierState, it can never be created when the renderer is `renderer:-inert`
+      let renderer = expect(
+        this.owner.lookup<Renderer>('renderer:-dom'),
+        `BUG: owner is missing renderer:-dom`
+      );
+      let stack = renderer.debugRenderTree.logRenderStackForPath(userProvidedCallbackReference);
+
+      let value = userProvidedCallbackReference.value();
+      assert(
+        `You must pass a function as the second argument to the \`on\` modifier, you passed ${
+          value === null ? 'null' : typeof value
+        }. While rendering:\n\n${stack}`,
+        typeof value === 'function'
+      );
+    }
+
+    let userProvidedCallback = userProvidedCallbackReference.value() as EventListener;
     if (userProvidedCallback !== this.userProvidedCallback) {
       this.userProvidedCallback = userProvidedCallback;
       this.shouldUpdate = true;
@@ -303,9 +328,11 @@ function addEventListener(
 export default class OnModifierManager implements ModifierManager<OnModifierState | null, unknown> {
   public SUPPORTS_EVENT_OPTIONS: boolean = SUPPORTS_EVENT_OPTIONS;
   public isInteractive: boolean;
+  private owner: Owner;
 
-  constructor(isInteractive: boolean) {
+  constructor(owner: Owner, isInteractive: boolean) {
     this.isInteractive = isInteractive;
+    this.owner = owner;
   }
 
   get counters() {
@@ -319,7 +346,7 @@ export default class OnModifierManager implements ModifierManager<OnModifierStat
 
     const capturedArgs = args.capture();
 
-    return new OnModifierState(<Element>element, capturedArgs);
+    return new OnModifierState(this.owner, <Element>element, capturedArgs);
   }
 
   getTag(state: OnModifierState | null): Tag {

packages/@ember/-internals/glimmer/lib/renderer.ts

@@ -284,7 +284,7 @@ export abstract class Renderer {
     this._builder = builder;
 
     // resolver is exposed for tests
-    let runtimeResolver = (this._runtimeResolver = new RuntimeResolver(env.isInteractive));
+    let runtimeResolver = (this._runtimeResolver = new RuntimeResolver(owner, env.isInteractive));
     let compileTimeResolver = new CompileTimeResolver(runtimeResolver);
 
     let context = (this._context = JitContext(compileTimeResolver));

packages/@ember/-internals/glimmer/lib/resolver.ts

@@ -287,12 +287,12 @@ export default class RuntimeResolver implements JitRuntimeResolver<OwnedTemplate
   public componentDefinitionCount = 0;
   public helperDefinitionCount = 0;
 
-  constructor(isInteractive: boolean) {
+  constructor(owner: Owner, isInteractive: boolean) {
     this.isInteractive = isInteractive;
 
     this.builtInModifiers = {
       action: { manager: new ActionModifierManager(), state: null },
-      on: { manager: new OnModifierManager(isInteractive), state: null },
+      on: { manager: new OnModifierManager(owner, isInteractive), state: null },
     };
   }
 

packages/@ember/-internals/glimmer/tests/integration/helpers/fn-test.js

@@ -120,14 +120,34 @@ moduleFor(
       assert.equal(this.stashedFn(), 'arg1: foo, arg2: bar');
     }
 
-    '@test asserts if the first argument is not a function'() {
+    '@test asserts if no argument given'() {
+      expectAssertion(() => {
+        this.render(`{{invoke (fn)}}`, {
+          myFunc: null,
+          arg1: 'foo',
+          arg2: 'bar',
+        });
+      }, /You must pass a function as the `fn` helpers first argument./);
+    }
+
+    '@test asserts if the first argument is undefined'() {
+      expectAssertion(() => {
+        this.render(`{{invoke (fn this.myFunc this.arg1 this.arg2)}}`, {
+          myFunc: undefined,
+          arg1: 'foo',
+          arg2: 'bar',
+        });
+      }, /You must pass a function as the `fn` helpers first argument, you passed undefined. While rendering:\n\nthis.myFunc/);
+    }
+
+    '@test asserts if the first argument is null'() {
       expectAssertion(() => {
         this.render(`{{invoke (fn this.myFunc this.arg1 this.arg2)}}`, {
           myFunc: null,
           arg1: 'foo',
           arg2: 'bar',
         });
-      }, /You must pass a function as the `fn` helpers first argument, you passed null/);
+      }, /You must pass a function as the `fn` helpers first argument, you passed null. While rendering:\n\nthis.myFunc/);
     }
 
     '@test asserts if the provided function accesses `this` without being bound prior to passing to fn'(

packages/@ember/-internals/glimmer/tests/integration/modifiers/on-test.js

@@ -309,13 +309,13 @@ moduleFor(
     '@test asserts when callback is undefined'() {
       expectAssertion(() => {
         this.render(`<button {{on 'click' this.foo}}>Click Me</button>`);
-      }, /You must pass a function as the second argument to the `on` modifier/);
+      }, /You must pass a function as the second argument to the `on` modifier, you passed undefined. While rendering:\n\nthis.foo/);
     }
 
     '@test asserts when callback is null'() {
       expectAssertion(() => {
         this.render(`<button {{on 'click' this.foo}}>Click Me</button>`, { foo: null });
-      }, /You must pass a function as the second argument to the `on` modifier/);
+      }, /You must pass a function as the second argument to the `on` modifier, you passed null. While rendering:\n\nthis.foo/);
     }
 
     '@test asserts if the provided callback accesses `this` without being bound prior to passing to on'(