feat(frontend): show error ID for internal server errors

Foxnouns.Frontend/src/lib/api/error.ts

@@ -14,6 +14,7 @@ export default class ApiError {
 
 	toObject(): RawApiError {
 		return {
+			error_id: this.raw?.error_id,
 			status: this.raw?.status || 500,
 			code: this.code,
 			message: this.raw?.message || "Internal server error",
@@ -23,6 +24,7 @@ export default class ApiError {
 }
 
 export type RawApiError = {
+	error_id?: string;
 	status: number;
 	message: string;
 	code: ErrorCode;

Foxnouns.Frontend/src/lib/components/Error.svelte

@@ -18,6 +18,14 @@
 	</svelte:element>
 {/if}
 <p>{errorDescription($t, error.code)}</p>
+{#if error.error_id}
+	<p>
+		{$t("error.error-id")}
+		<code>
+			{error.error_id}
+		</code>
+	</p>
+{/if}
 {#if error.errors}
 	<details>
 		<summary>{$t("error.extra-info-header")}</summary>

Foxnouns.Frontend/src/lib/i18n/locales/en.json

@@ -110,7 +110,8 @@
 		"back-to-prev-page-button": "Go back to the previous page",
 		"400-description": "Something went wrong with your request. This error should never land you on this page, so it's probably a bug.",
 		"500-description": "Something went wrong on the server. Please try again later.",
-		"unknown-status-description": "Something went wrong, but we're not sure what. Please try again."
+		"unknown-status-description": "Something went wrong, but we're not sure what. Please try again.",
+		"error-id": "If you report this error to the developers, please give them this ID:"
 	},
 	"settings": {
 		"general-information-tab": "General information",