Improve error handling for app extensions

app/src/components/__snapshots__/v-error-boundary.test.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`Mount component 1`] = `""`;

app/src/components/register.ts

@@ -70,6 +70,7 @@ import VDatePicker from './v-date-picker.vue';
 import VEmojiPicker from './v-emoji-picker.vue';
 import VWorkspace from './v-workspace.vue';
 import VWorkspaceTile from './v-workspace-tile.vue';
+import VErrorBoundary from './v-error-boundary.vue';
 
 export function registerComponents(app: App): void {
 	app.component('VAvatar', VAvatar);
@@ -132,6 +133,7 @@ export function registerComponents(app: App): void {
 	app.component('VEmojiPicker', VEmojiPicker);
 	app.component('VWorkspace', VWorkspace);
 	app.component('VWorkspaceTile', VWorkspaceTile);
+	app.component('VErrorBoundary', VErrorBoundary);
 
 	app.component('TransitionBounce', TransitionBounce);
 	app.component('TransitionDialog', TransitionDialog);

app/src/components/v-error-boundary.test.ts

@@ -0,0 +1,60 @@
+/* eslint-disable vue/one-component-per-file */
+
+import { mount } from '@vue/test-utils';
+import { afterAll, beforeAll, expect, test, vi } from 'vitest';
+import { defineComponent, h, nextTick } from 'vue';
+
+import VErrorBoundary from './v-error-boundary.vue';
+
+beforeAll(() => {
+	vi.spyOn(console, 'warn').mockImplementation(() => vi.fn());
+});
+
+afterAll(() => {
+	vi.restoreAllMocks();
+});
+
+test('Mount component', () => {
+	expect(VErrorBoundary).toBeTruthy();
+
+	const wrapper = mount(VErrorBoundary);
+
+	expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('Should show default component when there is no error', async () => {
+	const defaultComponent = defineComponent({ render: () => h('div', 'test') });
+	const fallbackComponent = defineComponent({ render: () => h('div', 'fallback') });
+
+	const wrapper = mount(VErrorBoundary, {
+		slots: {
+			default: defaultComponent,
+			fallback: fallbackComponent,
+		},
+	});
+
+	expect(wrapper.html()).toBe(`<div>test</div>`);
+});
+
+test('Should show fallback component when there is an error', async () => {
+	const defaultComponent = defineComponent({
+		setup: () => {
+			// intentionally throw error to break this component
+			throw new Error();
+		},
+		render: () => h('div', 'test'),
+	});
+	const fallbackComponent = defineComponent({ render: () => h('div', 'fallback') });
+
+	const wrapper = mount(VErrorBoundary, {
+		slots: {
+			default: defaultComponent,
+			fallback: fallbackComponent,
+		},
+	});
+
+	// wait for dom to update
+	await nextTick();
+
+	expect(wrapper.html()).toBe(`<div>fallback</div>`);
+});

app/src/components/v-error-boundary.vue

@@ -0,0 +1,40 @@
+<template>
+	<template v-if="hasError">
+		<template v-if="$slots.fallback">
+			<slot name="fallback" v-bind="{ error }" />
+		</template>
+	</template>
+	<slot v-else></slot>
+</template>
+
+<script setup lang="ts">
+import { getVueComponentName } from '@/utils/get-vue-component-name';
+import { kebabCase } from 'lodash';
+import { computed, onErrorCaptured, ref } from 'vue';
+
+interface Props {
+	/** Unique name to identify component wrapped by this error boundary */
+	name?: string;
+	/** Stops propagating the error to the parent */
+	stopPropagation?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	name: undefined,
+	stopPropagation: true,
+});
+
+const error = ref<Error | null>(null);
+
+const hasError = computed(() => !!error.value);
+
+onErrorCaptured((err, vm, info) => {
+	error.value = err;
+	const source = props.name ? kebabCase(props.name) : getVueComponentName(vm);
+	// eslint-disable-next-line no-console
+	console.warn(`[${source}-error] ${info}`);
+	// eslint-disable-next-line no-console
+	console.warn(err);
+	if (props.stopPropagation) return false;
+});
+</script>

app/src/components/v-form/form-field-interface.vue

@@ -7,29 +7,30 @@
 	>
 		<v-skeleton-loader v-if="loading && field.hideLoader !== true" />
 
-		<component
-			:is="
-				field.meta && field.meta.interface
-					? `interface-${field.meta.interface}`
-					: `interface-${getDefaultInterfaceForType(field.type)}`
-			"
-			v-if="interfaceExists && !rawEditorActive"
-			v-bind="(field.meta && field.meta.options) || {}"
-			:autofocus="disabled !== true && autofocus"
-			:disabled="disabled"
-			:loading="loading"
-			:value="modelValue === undefined ? field.schema?.default_value : modelValue"
-			:width="(field.meta && field.meta.width) || 'full'"
-			:type="field.type"
-			:collection="field.collection"
-			:field="field.field"
-			:field-data="field"
-			:primary-key="primaryKey"
-			:length="field.schema && field.schema.max_length"
-			:direction="direction"
-			@input="$emit('update:modelValue', $event)"
-			@set-field-value="$emit('setFieldValue', $event)"
-		/>
+		<v-error-boundary v-if="interfaceExists && !rawEditorActive" :name="componentName">
+			<component
+				:is="componentName"
+				v-bind="(field.meta && field.meta.options) || {}"
+				:autofocus="disabled !== true && autofocus"
+				:disabled="disabled"
+				:loading="loading"
+				:value="modelValue === undefined ? field.schema?.default_value : modelValue"
+				:width="(field.meta && field.meta.width) || 'full'"
+				:type="field.type"
+				:collection="field.collection"
+				:field="field.field"
+				:field-data="field"
+				:primary-key="primaryKey"
+				:length="field.schema && field.schema.max_length"
+				:direction="direction"
+				@input="$emit('update:modelValue', $event)"
+				@set-field-value="$emit('setFieldValue', $event)"
+			/>
+
+			<template #fallback>
+				<v-notice type="warning">{{ t('unexpected_error') }}</v-notice>
+			</template>
+		</v-error-boundary>
 
 		<interface-system-raw-editor
 			v-else-if="rawEditorEnabled && rawEditorActive"
@@ -88,6 +89,12 @@ const inter = useExtension(
 );
 
 const interfaceExists = computed(() => !!inter.value);
+
+const componentName = computed(() => {
+	return props.field?.meta?.interface
+		? `interface-${props.field.meta.interface}`
+		: `interface-${getDefaultInterfaceForType(props.field.type)}`;
+});
 </script>
 
 <style lang="scss" scoped>

app/src/main.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 
+import { getVueComponentName } from '@/utils/get-vue-component-name';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import { version } from '../package.json';
@@ -35,6 +36,13 @@ async function init() {
 	app.use(i18n);
 	app.use(createPinia());
 
+	app.config.errorHandler = (err, vm, info) => {
+		const source = getVueComponentName(vm);
+		console.warn(`[app-${source}-error] ${info}`);
+		console.warn(err);
+		return false;
+	};
+
 	registerDirectives(app);
 	registerComponents(app);
 	registerViews(app);

app/src/modules/insights/routes/dashboard.vue

@@ -121,18 +121,27 @@
 					>
 						{{ t('no_data') }}
 					</div>
-					<component
-						:is="`panel-${tile.data.type}`"
-						v-else
-						v-bind="tile.data.options"
-						:id="tile.id"
-						:dashboard="primaryKey"
-						:show-header="tile.showHeader"
-						:height="tile.height"
-						:width="tile.width"
-						:now="now"
-						:data="data[tile.id]"
-					/>
+					<v-error-boundary v-else :name="`panel-${tile.data.type}`">
+						<component
+							:is="`panel-${tile.data.type}`"
+							v-bind="tile.data.options"
+							:id="tile.id"
+							:dashboard="primaryKey"
+							:show-header="tile.showHeader"
+							:height="tile.height"
+							:width="tile.width"
+							:now="now"
+							:data="data[tile.id]"
+						/>
+
+						<template #fallback="{ error }">
+							<div class="panel-error">
+								<v-icon name="warning" />
+								{{ t('unexpected_error') }}
+								<v-error :error="error" />
+							</div>
+						</template>
+					</v-error-boundary>
 				</div>
 			</template>
 		</v-workspace>

app/src/modules/settings/routes/data-model/field-detail/shared/extension-options.vue

@@ -14,14 +14,18 @@
 		primary-key="+"
 	/>
 
-	<component
-		:is="`${type}-options-${extensionInfo!.id}`"
-		v-else
-		:value="optionsValues"
-		:collection="collection"
-		:field="field"
-		@input="optionsValues = $event"
-	/>
+	<v-error-boundary v-else :name="`${type}-options-${extensionInfo!.id}`">
+		<component
+			:is="`${type}-options-${extensionInfo!.id}`"
+			:value="optionsValues"
+			:collection="collection"
+			:field="field"
+			@input="optionsValues = $event"
+		/>
+		<template #fallback>
+			<v-notice type="warning">{{ t('unexpected_error') }}</v-notice>
+		</template>
+	</v-error-boundary>
 </template>
 
 <script lang="ts">