I am currently developing a rendering library for my Vue 3 + Vite project.
Essentially, I have a JSON array of products which I pass to a special <Render :products /> component.
This Render component reads all the JSON products and converts them into Vue components:
// Render.vue
<script setup lang="ts">
import { Product } from 'bitran';
import { resolveComponent } from 'vue';
const props = defineProps<{ products: Product[] }>();
const products = props.products;
</script>
<template>
<template v-for="product in products">
<component :is="resolveComponent(product.type)" :product />
</template>
</template>
It is possible for errors to occur during the rendering process of JSON data to components.
How can I detect these errors when rendering <component ... /> and replace them with my custom <Error :msg /> component so that the rendering process doesn't halt and the end-user can see which product caused the issue and why?
For instance, if I purposely throw an Error within my <Paragraph> component, I would like for that <Paragraph> component to be converted into <Error> component instead:
// Paragraph.vue
<script setup lang="ts">
import { Paragraph } from 'bitran';
import { getProductAttrs, useProduct } from '@lib/content/util';
import Render from '@lib/Render.vue';
const block = useProduct<Paragraph>();
throw new Error('This message should be passed to <Error> component!'); // Error here
</script>
<template>
<p v-bind="getProductAttrs(block)">
<Render :products="block.content" />
</p>
</template>