diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
index 51572f2940b6a..f1e63d1e39caf 100644
--- a/site/src/api/errors.ts
+++ b/site/src/api/errors.ts
@@ -115,18 +115,21 @@ export const getErrorDetail = (error: unknown): string | undefined => {
 		return error.detail;
 	}
 
-	if (error instanceof Error) {
-		return "Please check the developer console for more details.";
-	}
-
-	if (isApiError(error)) {
+	// APIErrors that are empty still benefit from checking the developer
+	// console if no detail is provided. So only use the detail field if
+	// it is not empty.
+	if (isApiError(error) && error.response.data.detail) {
 		return error.response.data.detail;
 	}
 
-	if (isApiErrorResponse(error)) {
+	if (isApiErrorResponse(error) && error.detail) {
 		return error.detail;
 	}
 
+	if (error instanceof Error) {
+		return "Please check the developer console for more details.";
+	}
+
 	return undefined;
 };
 
diff --git a/site/src/components/Alert/ErrorAlert.stories.tsx b/site/src/components/Alert/ErrorAlert.stories.tsx
index 2b2a6b3f0b6c3..5cf8ddd39958e 100644
--- a/site/src/components/Alert/ErrorAlert.stories.tsx
+++ b/site/src/components/Alert/ErrorAlert.stories.tsx
@@ -34,6 +34,15 @@ export const WithOnlyMessage: Story = {
 	},
 };
 
+export const APIErrorWithDetail: Story = {
+	args: {
+		error: mockApiError({
+			message: "Magic dust is missing",
+			detail: "without magic dust, the requested operation will never work",
+		}),
+	},
+};
+
 export const WithDismiss: Story = {
 	args: {
 		dismissible: true,