Improved error formatting

Author: zonia3000

__tests__/StandardErrorAlert.test.js

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+
+import StandardErrorAlert from '../src/lib/components/common/StandardErrorAlert.svelte';
+import { AlertError } from '../src/lib/common/errors';
+
+describe('StandardErrorAlert', () => {
+	it('AlertError with string message', async () => {
+		const result = render(StandardErrorAlert, {
+			error: new AlertError('error message')
+		});
+		expect(result.container.textContent).toContain('error message');
+	});
+
+	it('AlertError with detail message', async () => {
+		const result = render(StandardErrorAlert, {
+			error: new AlertError({ detail: 'error message' })
+		});
+		expect(result.container.textContent).toContain('error message');
+		expect(result.container.textContent).not.toContain('detail');
+		expect(result.container.textContent).not.toContain('There has been an error');
+	});
+
+	it('AlertError with generic object message', async () => {
+		const result = render(StandardErrorAlert, {
+			error: new AlertError({ foo: 'bar' })
+		});
+		expect(result.container.textContent).toMatch(/{.*"foo".*:.*"bar".*}/s);
+		expect(result.container.textContent).toContain('There has been an error');
+	});
+
+	it('AlertError with generic object message', async () => {
+		const result = render(StandardErrorAlert, {
+			error: new AlertError({ foo: 'bar' })
+		});
+		expect(result.container.textContent).toMatch(/{.*"foo".*:.*"bar".*}/s);
+		expect(result.container.textContent).toContain('There has been an error');
+	});
+
+	it('Generic error with string message', async () => {
+		const result = render(StandardErrorAlert, {
+			error: new Error('error message')
+		});
+		expect(result.container.textContent).toContain('error message');
+		expect(result.container.textContent).not.toContain('There has been an error');
+	});
+
+	it('Generic object message with detail', async () => {
+		const result = render(StandardErrorAlert, {
+			error: { detail: 'error message' }
+		});
+		expect(result.container.textContent).toContain('error message');
+		expect(result.container.textContent).not.toContain('detail');
+		expect(result.container.textContent).not.toContain('There has been an error');
+	});
+
+	it('Generic object message without detail', async () => {
+		const result = render(StandardErrorAlert, {
+			error: { foo: 'bar' }
+		});
+		expect(result.container.textContent).toMatch(/{.*"foo".*:.*"bar".*}/s);
+		expect(result.container.textContent).toContain('There has been an error');
+	});
+});

src/lib/components/common/StandardErrorAlert.svelte

@@ -3,27 +3,50 @@
 
 	export let error = undefined;
 
-	/** @type {string | undefined} */
-	$: errorString = JSON.stringify(getErrorValue(), undefined, 2);
+	let errorString = '';
+	let formatAsPre = false;
 
-	function getErrorValue() {
+	$: if (error) {
+		updateErrorMessage();
+	}
+
+	function updateErrorMessage() {
 		if (error instanceof AlertError) {
-			return error.reason;
+			if (typeof error.reason === 'string') {
+				errorString = error.reason;
+				formatAsPre = false;
+			} else if ('detail' in error.reason) {
+				errorString = /** @type {string}*/ (error.reason.detail);
+				formatAsPre = false;
+			} else {
+				errorString = JSON.stringify(error.reason, undefined, 2);
+				formatAsPre = true;
+			}
 		} else if (error instanceof Error) {
-			return error.message;
+			errorString = error.message;
+			formatAsPre = false;
+		} else if (typeof error === 'object' && 'detail' in error) {
+			errorString = error.detail;
+			formatAsPre = false;
+		} else {
+			errorString = JSON.stringify(error, undefined, 2);
+			formatAsPre = true;
 		}
-		return error;
 	}
 
 	export function hide() {
-		errorString = undefined
+		errorString = '';
 	}
 </script>
 
 {#if errorString}
 	<div class="alert alert-danger alert-dismissible" role="alert">
-		<pre>There has been an error, reason:</pre>
-		<pre>{errorString}</pre>
+		{#if formatAsPre}
+			<p>There has been an error, reason:</p>
+			<pre>{errorString}</pre>
+		{:else}
+			{errorString}
+		{/if}
 		<button class="btn-close" data-bs-dismiss="alert" on:click={hide} />
 	</div>
 {/if}

tests/v2/images.spec.js

@@ -70,7 +70,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
 		await modal.getByRole('textbox', { name: 'Zarr URL' }).fill(`${randomPath}/img1`);
 		const saveBtn = modal.getByRole('button', { name: 'Save' });
 		await saveBtn.click();
-		await modal.getByText('There has been an error').waitFor();
+		await modal.getByText(/Image with zarr_url '.*' already in Dataset/).waitFor();
 		await modal.getByRole('button', { name: 'Cancel' }).click();
 		await waitModalClosed(page);
 	});