%sveltekit.status%
+%sveltekit.error.message%
+ +%sveltekit.error.message%
+ +{description ?? defaultDescription}
+ {#if requestId} +
+ {m.error_request_id()} {requestId}
+
as fallback.
@@ -14,21 +15,20 @@ vi.mock('$app/paths', () => ({
}));
// Mock storage context — provide an API that delegates to the global fetch
-vi.mock('$lib/storage/context.js', () => ({
- getStorageState: () => ({
- get api() {
- return {
- preview: (...args: unknown[]) =>
- (globalThis.fetch as typeof fetch)(...(args as Parameters)),
- archiveExtract: (...args: unknown[]) =>
- (globalThis.fetch as typeof fetch)(...(args as Parameters)),
- saveText: (...args: unknown[]) =>
- (globalThis.fetch as typeof fetch)(...(args as Parameters))
- };
- },
- bucket: 'test-bucket'
- })
-}));
+// Like the real API, non-OK responses throw a StorageError.
+vi.mock('$lib/storage/context.js', async () => {
+ const { createStorageFetch } = await import('$lib/storage/storage-fetch.js');
+ const storageFetch = createStorageFetch(() => 'conn-1');
+ const call = (...args: unknown[]) => storageFetch(...(args as Parameters));
+ return {
+ getStorageState: () => ({
+ get api() {
+ return { preview: call, archiveExtract: call, saveText: call, download: call };
+ },
+ bucket: 'test-bucket'
+ })
+ };
+});
const defaultProps = {
open: true,
@@ -716,42 +716,32 @@ describe('PreviewModal basics', () => {
await expect.element(page.getByRole('alert')).toBeInTheDocument();
});
- it('should show access denied for 403', async () => {
- vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response('{}', { status: 403 })));
- render(PreviewModal, defaultProps);
-
- await expect.element(page.getByRole('alert')).toBeInTheDocument();
- });
-
- it('should show not found for 404', async () => {
- vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response('{}', { status: 404 })));
+ it.each([
+ [403, '{}', 'You do not have permission to preview this file.'],
+ [404, '{}', 'The file could not be found.'],
+ [500, JSON.stringify({ message: 'Storage error: SlowDown' }), 'An error occurred']
+ ])('should show a readable message for a %i response', async (status, body, text) => {
+ vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response(body, { status })));
render(PreviewModal, defaultProps);
- await expect.element(page.getByRole('alert')).toBeInTheDocument();
+ await expect.element(page.getByRole('alert')).toHaveTextContent(text);
});
- it('should show generic error for other status codes', async () => {
+ it('should report a failed full download with a translated message', async () => {
vi.stubGlobal(
'fetch',
vi
.fn()
- .mockResolvedValue(
- new Response(JSON.stringify({ error: 'Server is down' }), { status: 500 })
- )
+ .mockResolvedValueOnce(mockFetchResponse('Hello', { truncated: true, totalSize: 99 }))
+ .mockResolvedValueOnce(new Response('{"message":"Access Denied"}', { status: 403 }))
);
render(PreviewModal, defaultProps);
- await expect.element(page.getByRole('alert')).toBeInTheDocument();
- });
-
- it('should handle non-JSON error response body', async () => {
- vi.stubGlobal(
- 'fetch',
- vi.fn().mockResolvedValue(new Response('Not JSON at all', { status: 500 }))
- );
- render(PreviewModal, defaultProps);
+ await page.getByRole('button', { name: 'Download full file' }).click();
- await expect.element(page.getByRole('alert')).toBeInTheDocument();
+ await expect
+ .poll(() => toasts.map((t) => t.message))
+ .toContain('Access denied. You do not have permission to download this file.');
});
});
diff --git a/src/lib/components/storage/modals/details/DirectoryDetails.svelte b/src/lib/components/storage/modals/details/DirectoryDetails.svelte
index b2f8e7ef..cad14e71 100644
--- a/src/lib/components/storage/modals/details/DirectoryDetails.svelte
+++ b/src/lib/components/storage/modals/details/DirectoryDetails.svelte
@@ -78,12 +78,6 @@
try {
const res = await storage.api.directorySize({ bucket, prefix, signal: request.signal });
- if (!res.ok) {
- error = m.storage_details_error_calc_size({ status: res.status });
- calculating = false;
- return;
- }
-
const reader = res.body?.getReader();
if (!reader) {
error = m.storage_details_error_no_body();
@@ -118,13 +112,9 @@
}
}
}
- } catch (err) {
+ } catch {
if (request.signal.aborted) return;
- if (err instanceof StorageError) {
- error = err.message;
- } else {
- error = err instanceof Error ? err.message : m.storage_details_error_unknown();
- }
+ error = m.storage_details_error_calc_size();
} finally {
if (sizeRequest === request) {
sizeRequest = null;
diff --git a/src/lib/components/storage/shared/StorageErrorPanel.svelte b/src/lib/components/storage/shared/StorageErrorPanel.svelte
deleted file mode 100644
index 17f27f10..00000000
--- a/src/lib/components/storage/shared/StorageErrorPanel.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-
-
-
-
-
- {m.storage_error_title()}
-
-
- {status}
-
-
-
- {message}
-
-
-
-
-
diff --git a/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts b/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts
deleted file mode 100644
index f96158c5..00000000
--- a/src/lib/components/storage/shared/StorageErrorPanel.svelte.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { page } from 'vitest/browser';
-import { describe, expect, it } from 'vitest';
-import { render } from 'vitest-browser-svelte';
-import StorageErrorPanel from './StorageErrorPanel.svelte';
-
-describe('StorageErrorPanel', () => {
- it('should render the status code as the heading', async () => {
- render(StorageErrorPanel, { status: 403, message: 'Access denied' });
-
- await expect.element(page.getByRole('heading', { name: '403' })).toBeInTheDocument();
- });
-
- it('should render the supplied message', async () => {
- render(StorageErrorPanel, { status: 404, message: 'No such bucket: reports' });
-
- await expect.element(page.getByText('No such bucket: reports')).toBeInTheDocument();
- });
-
- it('should tolerate an empty message', async () => {
- render(StorageErrorPanel, { status: 500, message: '' });
-
- await expect.element(page.getByRole('heading', { name: '500' })).toBeInTheDocument();
- });
-
- it('should offer a link back to storage', async () => {
- render(StorageErrorPanel, { status: 403, message: 'Access denied' });
-
- const link = page.getByRole('link', { name: /back to storage/i });
- await expect.element(link).toHaveAttribute('href', '/storage');
- });
-
- it('should offer a go-back button', async () => {
- render(StorageErrorPanel, { status: 403, message: 'Access denied' });
-
- await expect.element(page.getByRole('button', { name: /go back/i })).toBeInTheDocument();
- });
-});
diff --git a/src/lib/storage/api.spec.ts b/src/lib/storage/api.spec.ts
index d4b99387..fc4fe445 100644
--- a/src/lib/storage/api.spec.ts
+++ b/src/lib/storage/api.spec.ts
@@ -403,7 +403,7 @@ describe('createFetchStorageApi', () => {
const api = createFetchStorageApi(() => 'conn-1');
vi.spyOn(globalThis, 'fetch')
.mockResolvedValueOnce(jsonResponse({ status: 'done', items: [] }))
- .mockResolvedValueOnce(jsonResponse({ status: 'not_found' }, { status: 404 }));
+ .mockResolvedValueOnce(jsonResponse({ message: 'Job not found' }, { status: 404 }));
expect(await api.readTransferJob('job-1')).toEqual({ status: 'done', items: [] });
expect(await api.readTransferJob('job-2')).toEqual({ status: 'not_found' });
@@ -430,7 +430,7 @@ describe('createFetchStorageApi', () => {
it('reports a missing job as not_found instead of throwing', async () => {
const api = createFetchStorageApi(() => 'conn-1');
vi.spyOn(globalThis, 'fetch').mockResolvedValue(
- jsonResponse({ status: 'not_found' }, { status: 404 })
+ jsonResponse({ message: 'Job not found' }, { status: 404 })
);
await expect(api.pollJob('job-abc')).resolves.toEqual({ status: 'not_found' });
diff --git a/src/lib/storage/storage-fetch.ts b/src/lib/storage/storage-fetch.ts
index 15b49754..195d7cd8 100644
--- a/src/lib/storage/storage-fetch.ts
+++ b/src/lib/storage/storage-fetch.ts
@@ -12,6 +12,7 @@
* const fetch_ = createStorageFetch(() => connectionStore.activeConnectionId);
*/
+import { readErrorMessage } from '$lib/client/api-error.js';
import { STORAGE_CONNECTION_ID_HEADER } from '$lib/storage/connection-id-header.js';
import { StorageError } from '$lib/storage/errors.js';
@@ -55,16 +56,8 @@ export function createStorageFetch(
if (!response.ok) {
const code = mapStatusToCode(response.status);
- const body = await response
- .clone()
- .json()
- .catch(() => null);
const message =
- body && typeof body === 'object' && 'message' in body && typeof body.message === 'string'
- ? body.message
- : body && typeof body === 'object' && 'error' in body && typeof body.error === 'string'
- ? body.error
- : `Request failed with status ${response.status}`;
+ (await readErrorMessage(response)) ?? `Request failed with status ${response.status}`;
throw new StorageError(code, message);
}
diff --git a/src/routes/(app)/+error.svelte b/src/routes/(app)/+error.svelte
new file mode 100644
index 00000000..133e7c9c
--- /dev/null
+++ b/src/routes/(app)/+error.svelte
@@ -0,0 +1,8 @@
+
+
+
+
+ {#snippet actions()}
+
+ {m.storage_error_back_to_storage()}
+
+
+ {/snippet}
+
diff --git a/src/routes/(app)/storage/+layout.ts b/src/routes/(app)/storage/+layout.ts
index c82d37b4..22e81c7a 100644
--- a/src/routes/(app)/storage/+layout.ts
+++ b/src/routes/(app)/storage/+layout.ts
@@ -3,10 +3,20 @@ import { STORAGE_CONNECTION_ID_HEADER } from '$lib/storage/connection-id-header.
import { connectionStore } from '$lib/storage/connection-store.svelte.js';
import type { LayoutLoad } from './$types';
+/** Why the active connection could not be opened; the connect form shows it. */
+type BucketsError = 'access_denied' | 'unreachable' | null;
+
+// 401: the session holds no usable connection, which is not an error.
+function bucketsErrorFor(status: number): BucketsError {
+ if (status === 401) return null;
+ return status === 403 ? 'access_denied' : 'unreachable';
+}
+
const DISCONNECTED = {
connected: false,
buckets: [] as string[],
- connectionType: null
+ connectionType: null,
+ bucketsError: null as BucketsError
};
/**
@@ -65,6 +75,7 @@ export const load: LayoutLoad = async ({ fetch, data }) => {
if (!res.ok) {
return {
...DISCONNECTED,
+ bucketsError: bucketsErrorFor(res.status),
connections,
hydrating: false as const,
hasActiveConnection: false as const
@@ -76,6 +87,7 @@ export const load: LayoutLoad = async ({ fetch, data }) => {
connected: true,
buckets,
connectionType: 's3',
+ bucketsError: null,
connections,
hydrating: false as const,
hasActiveConnection: true as const
@@ -83,6 +95,7 @@ export const load: LayoutLoad = async ({ fetch, data }) => {
} catch {
return {
...DISCONNECTED,
+ bucketsError: 'unreachable' as const,
connections,
hydrating: false as const,
hasActiveConnection: false as const
diff --git a/src/routes/(app)/storage/+page.svelte b/src/routes/(app)/storage/+page.svelte
index d27b19e8..90e1b474 100644
--- a/src/routes/(app)/storage/+page.svelte
+++ b/src/routes/(app)/storage/+page.svelte
@@ -25,7 +25,12 @@
let addBucketOpen = $state(false);
const connectError = $derived(
- (page.form as { error?: string } | null)?.error ?? null
+ (page.form as { error?: string } | null)?.error ??
+ (data.bucketsError === 'access_denied'
+ ? m.storage_connect_error_access_denied()
+ : data.bucketsError === 'unreachable'
+ ? m.storage_connect_error_unreachable()
+ : null)
);
let savedTabs = $state(null);
diff --git a/src/routes/(app)/storage/error.svelte.spec.ts b/src/routes/(app)/storage/error.svelte.spec.ts
index db5e9838..098c43e8 100644
--- a/src/routes/(app)/storage/error.svelte.spec.ts
+++ b/src/routes/(app)/storage/error.svelte.spec.ts
@@ -89,6 +89,20 @@ describe('/(app)/storage/+error.svelte', () => {
.not.toBeInTheDocument();
});
+ it('offers storage-specific ways out instead of the dashboard link', async () => {
+ setPage({ pathname: '/storage', status: 502 });
+ render(ErrorPage);
+
+ await expect.element(page.getByRole('heading', { name: /Storage error/ })).toBeInTheDocument();
+ await expect
+ .element(page.getByRole('link', { name: 'Back to storage' }))
+ .toHaveAttribute('href', '/storage');
+ await expect.element(page.getByRole('button', { name: 'Go back' })).toBeInTheDocument();
+ await expect
+ .element(page.getByRole('link', { name: 'Go to dashboard' }))
+ .not.toBeInTheDocument();
+ });
+
it('does not throw on malformed percent-encoding in the URL', async () => {
setPage({ pathname: '/storage/browse/conn-1/bad%E0bucket', params: {}, status: 404 });
render(ErrorPage);
diff --git a/src/routes/(app)/trino/query-runner.svelte.ts b/src/routes/(app)/trino/query-runner.svelte.ts
index 7c485d56..9f054a15 100644
--- a/src/routes/(app)/trino/query-runner.svelte.ts
+++ b/src/routes/(app)/trino/query-runner.svelte.ts
@@ -9,6 +9,7 @@ import {
import type { SqlStatement } from '$lib/editor/split-statements.js';
import { clearCompletionCache } from '$lib/editor/completion/completion-metadata.js';
import * as m from '$lib/paraglide/messages.js';
+import { readErrorMessage } from '$lib/client/api-error.js';
export interface QueryRunner {
readonly state: QueryState;
@@ -202,8 +203,7 @@ function createQueryRunner(tabId: string): QueryRunner {
});
if (!res.ok) {
- const body = await res.json().catch(() => null);
- error = body?.error ?? m.trino_query_connection_lost();
+ error = (await readErrorMessage(res)) ?? m.trino_query_connection_lost();
state = 'FAILED';
return;
}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 00000000..efa7d4e0
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+ {#if isAuthPage}
+
+ {#snippet actions()}
+
+ {/snippet}
+
+ {:else}
+
diff --git a/src/routes/error.svelte.spec.ts b/src/routes/error.svelte.spec.ts
new file mode 100644
index 00000000..bcf69c58
--- /dev/null
+++ b/src/routes/error.svelte.spec.ts
@@ -0,0 +1,32 @@
+import { page } from 'vitest/browser';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+
+const mockPage = vi.hoisted(() => ({
+ url: new URL('http://localhost/'),
+ status: 500,
+ error: { message: 'An unexpected error occurred' } as App.Error | null
+}));
+
+vi.mock('$app/state', () => ({ page: mockPage }));
+
+import ErrorPage from './+error.svelte';
+
+describe('/+error.svelte', () => {
+ it('does not link a failing sign-in page to the dashboard, which requires sign-in', async () => {
+ mockPage.url = new URL('http://localhost/auth/login');
+ render(ErrorPage);
+
+ await expect.element(page.getByRole('button', { name: 'Try again' })).toBeInTheDocument();
+ await expect
+ .element(page.getByRole('link', { name: 'Go to dashboard' }))
+ .not.toBeInTheDocument();
+ });
+
+ it('links to the dashboard elsewhere', async () => {
+ mockPage.url = new URL('http://localhost/');
+ render(ErrorPage);
+
+ await expect.element(page.getByRole('link', { name: 'Go to dashboard' })).toBeInTheDocument();
+ });
+});