So far, we've seen onErrorCaptured handle errors thrown from deeply nested components and at various times during those components' lifecycle. In this lesson, let's add one more superpower to onErrorCapture's list of abilities. That is the ability to catch errors from within slots. view, which powers this lesson's page, we are not calling onErrorCaptured.
Instead, we're using a new component called random error with slot and passing our random error component into that component's default slot. So the random error component is that same one that we were using a couple of lessons ago, and it just throws errors whenever any of these buttons clicked. So what does random error with slot look like? Okay, now this is looking familiar.
OnErrorCaptured is called inside of script setup, and then down inside of the template, we're displaying an error message if the error exists. Otherwise, we're gonna display what's passed in the default slot. This is essentially what we were doing at the page level before, but this time we're doing it in a little bit more flexible manner by displaying a slot content that could be passed anything at all. Over in the browser, as you might expect, this works exactly the same as we saw in the page component before.
If I throw an error by clicking on one of the buttons, random error with slots error state is set to the error caught by on error captured, and it's displayed to the page. To sum up, OnErrorCaptured can also be used to catch errors that are thrown from within a component's slots.