chore: miscellaneous-updates (#85)

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;
+}