SFC still trying to render template after throwing error in async setup

[PindaPixel]

Hi, I'm trying to use onErrorCaptured to catch specific errors. In my case I have a page that checks for authorization before fetching data:

<script setup lang="ts">
checkForPermissions("read", "write"); // throws UnauthorizedError

const data = await useFetch("api/data");
</script>

<!-- I don't expect this to attempt to render -->
<template>
    <SomePage :data="data" />
</template>

In a parent component I wish to handle these errors:

onErrorCaptured((e) => {
    if (e instanceof UnauthorizedError || e instanceof NotFoundError) {
        error.value = e;
        return false;
    }

    return true;
});

But instead my application crashes and doesn't render my fallback for the UnauthorizedError because the component rendering still continues and throws different errors. Is there a way to implement this behaviour with little to no boilerplate?

This only happens with async setup as far as I can tell.

I should mention the errors thrown are:

Uncaught (in promise) TypeError: Node.insertBefore: Argument 1 is not an object.

and:

Uncaught (in promise) TypeError: $setup.data is undefined

[PindaPixel]

More detailed example: https://github.com/PindaPixel/vue-dir-routing/blob/main/src/modules/Reports/Pages/Capacity/CapacityPage.vue at URL /check/reports/capacity

[PindaPixel]

Okay so the problem was that my error boundary component was inside the suspense component. Instead the suspense should be inside the error boundary component.