Merge branch 'beta' into feat/components/loading

src/components/ErrorBoundary/PdapErrorBoundary.vue

@@ -1,38 +1,59 @@
 <template>
+	<slot v-if="!error$" />
 	<component
 		:is="component"
-		v-if="error"
+		v-else
 		class="pdap-flex-container-center h-[full]"
+		:v-bind="params"
 	>
 		<h1>Oops, something went wrong!</h1>
 		<p class="max-w-full" data-test="error-boundary-message">
 			If you keep seeing this message, please email
 			<a href="mailto:[email protected]">[email protected]</a> for assistance.
 		</p>
 	</component>
-	<slot v-else />
 </template>
-<script>
-export default {
-	props: {
-		component: {
-			type: String,
-			default: 'div',
-		},
-	},
-	data() {
-		return {
-			error: false,
-		};
-	},
-	/* TODO: figure out how to cover this lifecycle method in tests */
-	errorCaptured(error) {
-		this.interceptError(error);
-	},
-	methods: {
-		interceptError(error) {
-			this.error = error;
-		},
-	},
-};
+
+<script setup lang="ts">
+import { ComponentPublicInstance, onErrorCaptured, ref } from 'vue';
+import { PdapErrorBoundaryProps } from './types';
+
+const props = withDefaults(defineProps<PdapErrorBoundaryProps>(), {
+	component: 'div',
+	onError: undefined,
+	params: undefined,
+	stopPropagation: false,
+});
+
+interface PdapErrorEmitted {
+	error: Error;
+	vm: ComponentPublicInstance | null;
+	info?: string;
+}
+
+const emits = defineEmits<{
+	(event: 'error', { error, vm, info }: PdapErrorEmitted): void;
+}>();
+const error$ = ref<Error>();
+const info$ = ref<string | undefined>('');
+
+function interceptError(
+	error: Error,
+	vm: ComponentPublicInstance | null,
+	info?: string
+) {
+	error$.value = error;
+	info$.value = info;
+
+	props.onError?.(error, vm);
+	emits('error', { error: error, vm, info });
+
+	if (props.stopPropagation) return false;
+}
+
+/* Impossible and unwise to try testing this, so we remove from the coverage report */
+/* c8 ignore next 3 */
+onErrorCaptured((err, vm, info) => {
+	interceptError(err, vm, info);
+});
 </script>

src/components/ErrorBoundary/error-boundary.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import ErrorBoundary from './PdapErrorBoundary.vue';
 import { nextTick } from 'vue';
 
@@ -28,4 +28,27 @@ describe('ErrorBoundary', () => {
 		);
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	it('calls the onError callback when an error occurs', async () => {
+		const onErrorSpy = vi.fn();
+
+		wrapper = mount(ErrorBoundary, {
+			props: {
+				onError: onErrorSpy,
+			},
+			slots: {
+				default: '<div>Default Content</div>',
+			},
+		});
+
+		const testError = new Error('Test Error');
+		wrapper.vm.interceptError(testError);
+		await nextTick();
+
+		expect(onErrorSpy).toHaveBeenCalledWith({
+			error: testError,
+			vm: undefined,
+			info: undefined,
+		});
+	});
 });

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './PdapErrorBoundary.vue';

src/components/ErrorBoundary/types.ts

@@ -0,0 +1,11 @@
+import { ComponentPublicInstance } from 'vue';
+
+export interface PdapErrorBoundaryProps {
+	component: string;
+	onError?: (
+		error: Error,
+		target?: ComponentPublicInstance | null | undefined
+	) => void;
+	params?: Record<string, string>;
+	stopPropagation?: boolean;
+}