feedback on to big error

client/src/lib/api.ts

@@ -12,15 +12,23 @@ type CallOptions = {
 	body?: any
 }
 
+export class PayloadToLargeError extends Error {}
+
 async function call(options: CallOptions) {
-	return fetch('/api/' + options.url, {
+	const response = await fetch('/api/' + options.url, {
 		method: options.method,
 		body: options.body === undefined ? undefined : JSON.stringify(options.body),
 		mode: 'cors',
 		headers: {
 			'Content-Type': 'application/json',
 		},
-	}).then((r) => r.json())
+	})
+
+	if (!response.ok) {
+		if (response.status === 413) throw new PayloadToLargeError()
+		else throw new Error('API call failed')
+	}
+	return response.json()
 }
 
 export async function create(note: Note) {

client/src/lib/views/Create.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Note } from '$lib/api'
+	import { Note, PayloadToLargeError } from '$lib/api'
 	import { create } from '$lib/api'
 	import { getKeyFromString, encrypt, Hex, getRandomBytes } from '$lib/crypto'
 
@@ -51,8 +51,11 @@
 				id: response.id,
 			}
 		} catch (e) {
-			console.error(e)
-			error = 'could not create note.'
+			if (e instanceof PayloadToLargeError) {
+				error = 'could not create not. note is to big'
+			} else {
+				error = 'could not create note. please try again.'
+			}
 		} finally {
 			loading = false
 		}
@@ -167,4 +170,8 @@
 	.advanced.hidden {
 		max-height: 0;
 	}
+
+	.error-text {
+		margin-top: 0.5rem;
+	}
 </style>