mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] component: improve error handling
In the following situation: A parent of B, B parent of C, with an error when C is mounted, caught by B and retriggering a rendering in B, then the onMounted hook of A wasn't properly called. This commit fixes this problem.
This commit is contained in:
Géry Debongnie
committed by
Lucas Perais - lpe@odoo
Lucas Perais - lpe@odoo
parent
18fb67eaad
commit
240259568e
@@ -364,6 +364,101 @@ 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 (in child of child) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = 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 (in child of child) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = 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/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].error) {
|
||||
b2 = text(\`Error handled\`);
|
||||
} else {
|
||||
b3 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors can catch an error in the mounted call (in child of child) 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors can catch an error in the mounted call (in child of child) 4`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`B\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors can catch an error in the mounted call (in root component) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = 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 (in root component) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component, comment } = 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/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].error) {
|
||||
b2 = text(\`Error handled\`);
|
||||
} else {
|
||||
b3 = component(\`ErrorComponent\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`can catch errors can catch an error in the mounted call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
|
||||
@@ -9,7 +9,13 @@ import {
|
||||
useState,
|
||||
} from "../../src/index";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
import {
|
||||
logStep,
|
||||
makeTestFixture,
|
||||
nextTick,
|
||||
snapshotEverything,
|
||||
useLogLifecycle,
|
||||
} from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
@@ -550,7 +556,9 @@ describe("can catch errors", () => {
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>Some text</div>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onMounted(() => {
|
||||
logStep("boom");
|
||||
throw new Error("NOOOOO");
|
||||
});
|
||||
}
|
||||
@@ -563,20 +571,156 @@ describe("can catch errors", () => {
|
||||
state = useState({ error: false });
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onError(() => (this.state.error = true));
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
class Root extends Component {
|
||||
static template = xml`<div>
|
||||
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
|
||||
</div>`;
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
await mount(App, fixture);
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
await mount(Root, fixture);
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
expect([
|
||||
"Root:setup",
|
||||
"Root:willStart",
|
||||
"Root:willRender",
|
||||
"ErrorBoundary:setup",
|
||||
"ErrorBoundary:willStart",
|
||||
"Root:rendered",
|
||||
"ErrorBoundary:willRender",
|
||||
"ErrorComponent:setup",
|
||||
"ErrorComponent:willStart",
|
||||
"ErrorBoundary:rendered",
|
||||
"ErrorComponent:willRender",
|
||||
"ErrorComponent:rendered",
|
||||
"ErrorComponent:mounted",
|
||||
"boom",
|
||||
"ErrorBoundary:willRender",
|
||||
"ErrorBoundary:rendered",
|
||||
"ErrorBoundary:mounted",
|
||||
"Root:mounted",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
test("can catch an error in the mounted call (in root component)", async () => {
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>Some text</div>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onMounted(() => {
|
||||
logStep("boom");
|
||||
throw new Error("NOOOOO");
|
||||
});
|
||||
}
|
||||
}
|
||||
class Root extends Component {
|
||||
static template = xml`<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><ErrorComponent /></t>
|
||||
</div>`;
|
||||
static components = { ErrorComponent };
|
||||
state = useState({ error: false });
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onError(() => (this.state.error = true));
|
||||
}
|
||||
}
|
||||
await mount(Root, fixture);
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>Error handled</div>");
|
||||
expect([
|
||||
"Root:setup",
|
||||
"Root:willStart",
|
||||
"Root:willRender",
|
||||
"ErrorComponent:setup",
|
||||
"ErrorComponent:willStart",
|
||||
"Root:rendered",
|
||||
"ErrorComponent:willRender",
|
||||
"ErrorComponent:rendered",
|
||||
"ErrorComponent:mounted",
|
||||
"boom",
|
||||
"Root:willRender",
|
||||
"Root:rendered",
|
||||
"Root:mounted",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
test("can catch an error in the mounted call (in child of child)", async () => {
|
||||
class Boom extends Component {
|
||||
static template = xml`<div>Some text</div>`;
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onMounted(() => {
|
||||
logStep("boom");
|
||||
throw new Error("NOOOOO");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class C extends Component {
|
||||
static template = xml`<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><Boom/></t>
|
||||
</div>`;
|
||||
static components = { Boom };
|
||||
state = useState({ error: false });
|
||||
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
onError(() => (this.state.error = true));
|
||||
}
|
||||
}
|
||||
|
||||
class B extends Component {
|
||||
static template = xml`<div><C/></div>`;
|
||||
static components = { C };
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
class A extends Component {
|
||||
static template = xml`<B/>`;
|
||||
static components = { B };
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
}
|
||||
await mount(A, fixture);
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
expect([
|
||||
"A:setup",
|
||||
"A:willStart",
|
||||
"A:willRender",
|
||||
"B:setup",
|
||||
"B:willStart",
|
||||
"A:rendered",
|
||||
"B:willRender",
|
||||
"C:setup",
|
||||
"C:willStart",
|
||||
"B:rendered",
|
||||
"C:willRender",
|
||||
"Boom:setup",
|
||||
"Boom:willStart",
|
||||
"C:rendered",
|
||||
"Boom:willRender",
|
||||
"Boom:rendered",
|
||||
"Boom:mounted",
|
||||
"boom",
|
||||
"C:willRender",
|
||||
"C:rendered",
|
||||
"C:mounted",
|
||||
"B:mounted",
|
||||
"A:mounted",
|
||||
]).toBeLogged();
|
||||
});
|
||||
|
||||
test("can catch an error in the willPatch call", async () => {
|
||||
|
||||
Reference in New Issue
Block a user