[FIX] error_handling: onError works if handling happens between culprit and root

Have a component implementing onError that calls a callback from one of its parent.
That parent should not be the original source of the rendering (a parent above is).

Make the callback handle the error and trigger an render()

Before this commit, the parent did not see it was handling a subtree in error,
and did not have a chance to revert that error state in its rendering stack.

After this commit, this flow works.
This commit is contained in:
Lucas Perais (lpe)
2025-09-30 15:46:18 +02:00
committed by Géry Debongnie
parent 5187f01c44
commit fb7d25ba0e
3 changed files with 85 additions and 0 deletions
+1
View File
@@ -55,6 +55,7 @@ export function handleError(params: ErrorParams) {
let current: Fiber | null = fiber;
do {
current.node.fiber = current;
fibersInError.set(current, error);
current = current.parent;
} while (current);
@@ -94,6 +94,52 @@ exports[`basics no component catching error lead to full app destruction 2`] = `
}"
`;
exports[`basics render from above on error -- handler is not a Root or MountFiber 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Parent\`, true, false, false, []);
return function template(ctx, node, key = \\"\\") {
return comp1({}, key + \`__1\`, node, this, null);
}
}"
`;
exports[`basics render from above on error -- handler is not a Root or MountFiber 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
const comp1 = app.createComponent(\`Boom\`, true, false, false, []);
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 = comp1({onError: (ctx['handleError']).bind(this)}, key + \`__1\`, node, this, null);
}
return block1([], [b2, b3]);
}
}"
`;
exports[`basics render from above on error -- handler is not a Root or MountFiber 3`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let txt1 = ctx['a'].b.c;
return block1([txt1]);
}
}"
`;
exports[`basics simple catchError 1`] = `
"function anonymous(app, bdom, helpers
) {
+38
View File
@@ -233,6 +233,44 @@ function(app, bdom, helpers) {
expect(mockConsoleError).toBeCalledTimes(0);
expect(mockConsoleWarn).toBeCalledTimes(0);
});
test("render from above on error -- handler is not a Root or MountFiber", async () => {
class Boom extends Component {
static template = xml`<div t-esc="a.b.c"/>`;
setup() {
onError((err) => {
this.props.onError(err);
});
}
}
class Parent extends Component {
static template = xml`
<div>
<t t-if="error">Error</t>
<t t-else="">
<Boom onError.bind="handleError"/>
</t>
</div>`;
static components = { Boom };
error: any = false;
handleError(err: Error) {
this.error = err;
this.render();
}
}
class GrandParent extends Component {
static template: string = xml`<Parent />`;
static components = { Parent };
}
await mount(GrandParent, fixture);
expect(fixture.innerHTML).toBe("<div>Error</div>");
expect(mockConsoleError).toBeCalledTimes(0);
expect(mockConsoleWarn).toBeCalledTimes(0);
});
});
describe("errors and promises", () => {