So now you know how onErrorCaptured works, but I want to dive into it a little further in this lesson by showing you an example that I have put up on StackBlitz. This example is going to demonstrate when different errors can be thrown within a nested component and then still be caught with the onErrorCaptured I cycle hook. So in this first component that we're displaying on the page, called error in setup. If I open that component up, you'll see that it's calling split on a variable that doesn't actually exist.
So this is going to throw a reference error from inside directly inside of script setup. view, you'll see that we're using on error captured in order to capture information about the error when it's thrown inside of one of the child components. over in my page, we're displaying the result essentially of that error. So here you can see, yes, we can catch errors that are thrown inside of script setup.
The error itself here, as I mentioned, is going to be a reference error, test is not defined. We can even get access to the component that threw the error. Notice here on error captured, not only provides the error, but it also provides the component instance itself, which I'm using to grab the name of right down here in order to set that to some local state that we're displaying to the page. So onErrorCapture provides the actual error instance, but it also provides the component instance.
Lastly, it provides a variable called info. Info is a string that tells us more about when the error was thrown. In this case, it was thrown within the setup function. And there are various different info codes that could be passed here.
If you go to this page in the official VGS docs that I've left a link to in the description below, then you will have a reference for all of the different error messages that are possible for this info variable. This info variable will be the human friendly message in development. But during production, it will be the code in the left hand column of the table. Right here, you can see the setup function message that we just saw.
But there's also render function, meaning we could catch errors from the rendering process with on error captured. Same thing for watcher getter, directive hook, transition hook, all of these different times from within the components lifecycle that we could catch. Let's take a look at a few others just as examples. So not only can we catch errors that are thrown synchronously within setup, we can also catch errors that are thrown asynchronously within setup.
One caveat is that this does require suspense, since async setup functions just by themselves require suspense. But let's take a look at what async error in setup looks like. Here is the code. We're just awaiting a new promise that rejects with a message of async error after a hundred milliseconds.
So over in the browser, you can see it gets the correct component, but the info is still setup function because we are throwing the error inside of setup, although this time asynchronously. Okay, that's great that onErrorCaptured handles async errors too. We can of course also capture errors that are thrown in events. We saw this in the last lesson.
But just to prove it to you here, notice this time the info is native event handler. And the last demo here shows that we can also catch errors within view component lifecycle hooks. The error in lifecycle hook component will throw an error on mounted. So in the parent, when onErrorCaptured runs, the info it gets is mounted hook.
In conclusion, onErrorCaptured is able to handle basically any error that a child component is able to throw at any point in time during that child component's lifecycle.