From 8b40df36f35aad39e2fbac18c08c3be908df1c96 Mon Sep 17 00:00:00 2001 From: Peter Radko Date: Wed, 8 Jan 2025 10:24:33 +0300 Subject: [PATCH 1/2] Update options-lifecycle.md Error capturing caveats. See [issue](https://github.com/vuejs/core/issues/12575#issuecomment-2575368469). --- src/api/options-lifecycle.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md index bc3b92fd97..1e8d3168a2 100644 --- a/src/api/options-lifecycle.md +++ b/src/api/options-lifecycle.md @@ -215,6 +215,12 @@ Called when an error propagating from a descendant component has been captured. - An `errorCaptured` hook can return `false` to prevent the error from propagating further. This is essentially saying "this error has been handled and should be ignored." It will prevent any additional `errorCaptured` hooks or `app.config.errorHandler` from being invoked for this error. + **Error Capturing Caveats** + + - In components with async `setup()` function (with top-level `await`) Vue **will always** try to render component template, even if `setup()` throwed error! This will likely cause more errors because during render component's template might try to access non-existing properties of failed `setup()` context. When capturing errors in such components, be ready to handle errors from both failed async `setup()` (they will always come first) and failed render process! + + - Replacing errored child component in parent component deep inside `` will cause hydration mismatches in SSR. Instead, try to separate logic that can possibly throw from child `setup()` into separate function and execute it in the parent component's `setup()`, where you can safely `try/catch` the execution process and make replacement if needed before rendering the actual child component. + ## renderTracked {#rendertracked} Called when a reactive dependency has been tracked by the component's render effect. From 2af30fc581216e499e41e18ca1279ffbb28ab0bf Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 21 Jan 2025 09:58:36 +0100 Subject: [PATCH 2/2] Update src/api/options-lifecycle.md --- src/api/options-lifecycle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md index 1e8d3168a2..a63c304733 100644 --- a/src/api/options-lifecycle.md +++ b/src/api/options-lifecycle.md @@ -217,7 +217,7 @@ Called when an error propagating from a descendant component has been captured. **Error Capturing Caveats** - - In components with async `setup()` function (with top-level `await`) Vue **will always** try to render component template, even if `setup()` throwed error! This will likely cause more errors because during render component's template might try to access non-existing properties of failed `setup()` context. When capturing errors in such components, be ready to handle errors from both failed async `setup()` (they will always come first) and failed render process! + - In components with async `setup()` function (with top-level `await`) Vue **will always** try to render component template, even if `setup()` throwed error. This will likely cause more errors because during render component's template might try to access non-existing properties of failed `setup()` context. When capturing errors in such components, be ready to handle errors from both failed async `setup()` (they will always come first) and failed render process. - Replacing errored child component in parent component deep inside `` will cause hydration mismatches in SSR. Instead, try to separate logic that can possibly throw from child `setup()` into separate function and execute it in the parent component's `setup()`, where you can safely `try/catch` the execution process and make replacement if needed before rendering the actual child component.