[IMP] component: re-introduce error handling in lifecycle

tests/components/__snapshots__/error_handling.test.ts.snap

@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`basics display a nice error if it cannot find component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`SomeMispelledComponent\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`basics no component catching error lead to full app destruction 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -29,3 +41,515 @@ exports[`basics no component catching error lead to full app destruction 2`] = `
   }
 }"
 `;
+
+exports[`basics simple catchError 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['a'].b.c;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics simple catchError 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['error']) {
+      b2 = text(\`Error\`);
+    } else {
+      b3 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in a component render function 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in a component render function 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in a component render function 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  const slot2 = ctx => (node, key) => {
+    return component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__3\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the constructor call of a component render function 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>Some text</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the constructor call of a component render function 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the constructor call of a component render function 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  const slot2 = ctx => (node, key) => {
+    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent mounted) 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  const slot2 = ctx => (node, key) => {
+    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the initial call of a component render function (parent updated) 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  const slot2 = ctx => (node, key) => {
+    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3;
+    if (ctx['state'].flag) {
+      b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
+    }
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the willStart call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>Some text</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the willStart call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].error) {
+      b2 = text(\`Error handled\`);
+    } else {
+      b3 = callSlot(ctx, node, key, 'default');
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors can catch an error in the willStart call 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  let assign = Object.assign;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  const slot2 = ctx => (node, key) => {
+    return component(\`ErrorComponent\`, {}, key + \`__3\`, node, ctx);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
+    return block1([], [b3]);
+  }
+}"
+`;
+
+exports[`can catch errors catchError in catchError 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['a'].b.c;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`can catch errors catchError in catchError 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`can catch errors catchError in catchError 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['error']) {
+      b2 = text(\`Error\`);
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error in a sub component will reject the mount promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error in a sub component will reject the mount promise 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error will reject the mount promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error will reject the render promise (with sub components) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error will reject the render promise (with sub components) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let d1 = ctx['x'].y;
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`errors and promises a rendering error will reject the render promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['flag']) {
+      b2 = text(this.will.crash);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`errors and promises an error in mounted call will reject the mount promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`errors and promises an error in patched call will reject the render promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['val'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`errors and promises an error in willPatch call will reject the render promise 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['val'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`errors and promises errors in mounted and in willUnmount 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/components/error_handling.test.ts

@@ -9,6 +9,7 @@ import {
   onWillStart,
   onWillUnmount,
   useState,
+  onError,
 } from "../../src/index";
 
 let fixture: HTMLElement;
@@ -48,7 +49,7 @@ describe("basics", () => {
     expect(error.message).toMatch(regexp);
   });
 
-  test.skip("display a nice error if it cannot find component", async () => {
+  test("display a nice error if it cannot find component", async () => {
     const consoleError = console.error;
     console.error = jest.fn();
 
@@ -64,12 +65,12 @@ describe("basics", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe('Cannot find the definition of component "SomeMispelledWidget"');
+    expect(error.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
     expect(console.error).toBeCalledTimes(0);
     console.error = consoleError;
   });
 
-  test.skip("simple catchError", async () => {
+  test("simple catchError", async () => {
     class Boom extends Component {
       static template = xml`<div t-esc="a.b.c"/>`;
     }
@@ -84,20 +85,21 @@ describe("basics", () => {
         </div>`;
       static components = { Boom };
 
-      error = false;
+      error: any = false;
 
-      // catchError(error) {
-      //   this.error = error;
-      //   this.render();
-      // }
+      setup() {
+        onError((err) => {
+          this.error = err;
+          this.render();
+        });
+      }
     }
-
     await mount(Parent, fixture);
     expect(fixture.innerHTML).toBe("<div>Error</div>");
   });
 });
 
-describe.skip("errors and promises", () => {
+describe("errors and promises", () => {
   test("a rendering error will reject the mount promise", async () => {
     const consoleError = console.error;
     console.error = jest.fn(() => {});
@@ -283,9 +285,8 @@ describe.skip("errors and promises", () => {
     expect(error.message).toMatch(regexp);
   });
 
-  // LPE: relevant: dead code....?
   test("errors in mounted and in willUnmount", async () => {
-    expect.assertions(1);
+    expect.assertions(2); // apparently this expect count in assertions...
     class Example extends Component {
       static template = xml`<div/>`;
       val: any;
@@ -309,12 +310,10 @@ describe.skip("errors and promises", () => {
   });
 });
 
-describe.skip("can catch errors", () => {
+describe("can catch errors", () => {
   test("can catch an error in a component render function", async () => {
     const consoleError = console.error;
     console.error = jest.fn();
-    const handler = jest.fn();
-    //env.qweb.on("error", null, handler);
     class ErrorComponent extends Component {
       static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
     }
@@ -326,8 +325,8 @@ describe.skip("can catch errors", () => {
           </div>`;
       state = useState({ error: false });
 
-      catchError() {
-        this.state.error = true;
+      setup() {
+        onError(() => (this.state.error = true));
       }
     }
     class App extends Component {
@@ -346,12 +345,9 @@ describe.skip("can catch errors", () => {
 
     expect(console.error).toBeCalledTimes(0);
     console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
   });
 
   test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
-    const handler = jest.fn();
-    //env.qweb.on("error", null, handler);
     const consoleError = console.error;
     console.error = jest.fn();
     class ErrorComponent extends Component {
@@ -365,8 +361,10 @@ describe.skip("can catch errors", () => {
           </div>`;
       state = useState({ error: false });
 
-      catchError() {
-        this.state.error = true;
+      setup() {
+        onError(() => {
+          this.state.error = true;
+        });
       }
     }
     class App extends Component {
@@ -381,12 +379,9 @@ describe.skip("can catch errors", () => {
 
     expect(console.error).toBeCalledTimes(0);
     console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
   });
 
   test("can catch an error in the initial call of a component render function (parent updated)", async () => {
-    const handler = jest.fn();
-    //env.qweb.on("error", null, handler);
     const consoleError = console.error;
     console.error = jest.fn();
     class ErrorComponent extends Component {
@@ -400,8 +395,8 @@ describe.skip("can catch errors", () => {
           </div>`;
       state = useState({ error: false });
 
-      catchError() {
-        this.state.error = true;
+      setup() {
+        onError(() => (this.state.error = true));
       }
     }
     class App extends Component {
@@ -419,12 +414,9 @@ describe.skip("can catch errors", () => {
 
     expect(console.error).toBeCalledTimes(0);
     console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
   });
 
   test("can catch an error in the constructor call of a component render function", async () => {
-    const handler = jest.fn();
-    //env.qweb.on("error", null, handler);
     const consoleError = console.error;
     console.error = jest.fn();
 
@@ -441,12 +433,12 @@ describe.skip("can catch errors", () => {
           </div>`;
       state = useState({ error: false });
 
-      catchError() {
-        this.state.error = true;
+      setup() {
+        onError(() => (this.state.error = true));
       }
     }
     class App extends Component {
-      static template = xml`<div">
+      static template = xml`<div>
               <ErrorBoundary><ErrorComponent /></ErrorBoundary>
           </div>`;
       static components = { ErrorBoundary, ErrorComponent };
@@ -456,14 +448,13 @@ describe.skip("can catch errors", () => {
 
     expect(console.error).toBeCalledTimes(0);
     console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
   });
 
   test("can catch an error in the willStart call", async () => {
     const consoleError = console.error;
     console.error = jest.fn();
     class ErrorComponent extends Component {
-      static template = xml`<div t-name="ErrorComponent">Some text</div>`;
+      static template = xml`<div>Some text</div>`;
       setup() {
         onWillStart(async () => {
           // we wait a little bit to be in a different stack frame
@@ -480,8 +471,8 @@ describe.skip("can catch errors", () => {
           </div>`;
       state = useState({ error: false });
 
-      catchError() {
-        this.state.error = true;
+      setup() {
+        onError(() => (this.state.error = true));
       }
     }
     class App extends Component {
@@ -587,9 +578,11 @@ describe.skip("can catch errors", () => {
         </div>`;
       static components = { Boom };
 
-      // catchError(error) {
-      //   throw error;
-      // }
+      setup() {
+        onError((error) => {
+          throw error;
+        });
+      }
     }
 
     class Parent extends Component {
@@ -602,12 +595,14 @@ describe.skip("can catch errors", () => {
         </div>`;
       static components = { Child };
 
-      error = false;
+      error: any = false;
 
-      // catchError(error) {
-      //   this.error = error;
-      //   this.render();
-      // }
+      setup() {
+        onError((error) => {
+          this.error = error;
+          this.render();
+        });
+      }
     }
 
     await mount(Parent, fixture);