NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] component, fiber: error_handling at the Fiber level

Browse Source 
Before this commit, errors triggered at the level of the fiber (as opposed to at the level
of a component's rendering), were handled as the very top level of the rendering, that is,
in the scheduler.
This was wrong because components below in the rendering tree would not have a chance to handle their
children's or their own errors.

After this commit, error triggered in willPatch, onMounted and onPatched are correctly handled
at the closest component to where they were thrown.
This commit is contained in:
Lucas Perais (lpe)
2021-11-17 11:06:24 +01:00
committed by Aaron Bohy
parent cb107cef7d
commit ed3e6dcbb6
5 changed files with 215 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/__snapshots__/error_handling.test.ts.snap
+110
View File
@@ -369,6 +369,116 @@ exports[`can catch errors can catch an error in the initial call of a component
}"
`;
exports[`can catch errors can catch an error in the mounted 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, safeOutput } = 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 mounted 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, safeOutput } = 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 mounted 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, safeOutput } = 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 willPatch 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, safeOutput } = helpers;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['props'].message;
return block1([d1]);
}
}"
`;
exports[`can catch errors can catch an error in the willPatch 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, safeOutput } = 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 willPatch 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, safeOutput } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<div><span><block-text-0/></span><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
return component(\`ErrorComponent\`, {message: ctx['state'].message}, key + \`__3\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['state'].message;
let b3 = assign(component(\`ErrorBoundary\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
return block1([d1], [b3]);
}
}"
`;
exports[`can catch errors can catch an error in the willStart call 1`] = `
"function anonymous(bdom, helpers
) {
tests/components/error_handling.test.ts
+18 -26
View File
@@ -564,33 +564,30 @@ describe("can catch errors", () => {
console.error = consoleError;
});
test.skip("can catch an error in the mounted call", async () => {
// we do not catch error in mounted anymore
console.error = jest.fn();
// env.qweb.addTemplates(`
// <templates>
// <div t-name="ErrorBoundary">
// <t t-if="state.error">Error handled</t>
// <t t-else=""><t t-slot="default" /></t>
// </div>
// <div t-name="ErrorComponent">Some text</div>
// <div t-name="App">
// <ErrorBoundary><ErrorComponent /></ErrorBoundary>
// </div>
// </templates>`);
test("can catch an error in the mounted call", async () => {
class ErrorComponent extends Component {
mounted() {
throw new Error("NOOOOO");
static template = xml`<div>Some text</div>`;
setup() {
onMounted(() => {
throw new Error("NOOOOO");
});
}
}
class ErrorBoundary extends Component {
static template = xml`<div>
<t t-if="state.error">Error handled</t>
<t t-else=""><t t-slot="default" /></t>
</div>`;
state = useState({ error: false });
catchError() {
this.state.error = true;
setup() {
onError(() => (this.state.error = true));
}
}
class App extends Component {
static template = xml`<div>
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
</div>`;
static components = { ErrorBoundary, ErrorComponent };
}
await mount(App, fixture);
@@ -600,10 +597,7 @@ describe("can catch errors", () => {
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
});
test.skip("can catch an error in the willPatch call", async () => {
// we do not catch error in willPatch anymore
const consoleError = console.error;
console.error = jest.fn();
test("can catch an error in the willPatch call", async () => {
class ErrorComponent extends Component {
static template = xml`<div><t t-esc="props.message"/></div>`;
setup() {
@@ -620,8 +614,8 @@ describe("can catch errors", () => {
</div>`;
state = useState({ error: false });
catchError() {
this.state.error = true;
setup() {
onError(() => (this.state.error = true));
}
}
class App extends Component {
@@ -640,8 +634,6 @@ describe("can catch errors", () => {
await nextTick();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>def</span><div>Error handled</div></div>");
expect(console.error).toHaveBeenCalledTimes(1);
console.error = consoleError;
});
test("catchError in catchError", async () => {