enhance(frontend): 定義されていないエラーも表示できるように (MisskeyIO#738)

+登録時のAPIエラーを表示できるように

packages/frontend/src/components/MkSignupDialog.form.vue

@@ -189,7 +189,7 @@ async function onSubmit(): Promise<void> {
 	submitting.value = true;
 
 	try {
-		await misskeyApi('signup', {
+		await os.apiWithDialog('signup', {
 			username: username.value,
 			password: password.value.password,
 			emailAddress: email.value,
@@ -198,7 +198,7 @@ async function onSubmit(): Promise<void> {
 			'm-captcha-response': mCaptchaResponse.value,
 			'g-recaptcha-response': reCaptchaResponse.value,
 			'turnstile-response': turnstileResponse.value,
-		});
+		}, undefined, (res) => {
 			if (instance.emailRequiredForSignup) {
 				os.alert({
 					type: 'success',
@@ -207,26 +207,18 @@ async function onSubmit(): Promise<void> {
 				});
 				emit('signupEmailPending');
 			} else {
-			const res = await misskeyApi('signin', {
+				emit('signup', { id: res.id, i: res.token });
-				username: username.value,
-				password: password.value.password,
-			});
-			emit('signup', res);
 
 				if (props.autoSet) {
-				return login(res.i);
+					login(res.token);
 				}
 			}
+		});
 	} catch {
 		submitting.value = false;
 		hcaptcha.value?.reset?.();
 		recaptcha.value?.reset?.();
 		turnstile.value?.reset?.();
-
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
-		});
 	}
 }
 </script>

packages/frontend/src/os.ts

@@ -34,11 +34,19 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 	endpoint: E,
 	data: P = {} as P,
 	token?: string | null | undefined,
-) => {
+	onSuccess?: ((res: Misskey.api.SwitchCaseResponseType<E, P>) => void) | null | undefined,
+	onFailure?: ((err: Misskey.api.APIError) => void) | null,
+): Promise<Misskey.api.SwitchCaseResponseType<E, P>> => {
 	const promise = misskeyApi(endpoint, data, token);
-	promiseDialog(promise, null, async (err) => {
+	promiseDialog(promise, onSuccess, onFailure ?? (err => apiErrorHandler(err, endpoint)));
+
+	return promise;
+});
+
+export async function apiErrorHandler(err: Misskey.api.APIError, endpoint?: string): Promise<void> {
 	let title: string | undefined;
 	let text = err.message + '\n' + err.id;
+
 	if (err.code === 'INTERNAL_ERROR') {
 		title = i18n.ts.internalServerError;
 		text = i18n.ts.internalServerErrorDescription;
@@ -71,23 +79,32 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 	} else if (err.code === 'ROLE_PERMISSION_DENIED') {
 		title = i18n.ts.permissionDeniedError;
 		text = i18n.ts.permissionDeniedErrorDescription;
-		} else if (err.code.startsWith('TOO_MANY')) {
+	} else if (err.code?.startsWith('TOO_MANY')) {
 		title = i18n.ts.youCannotCreateAnymore;
 		text = `${i18n.ts.error}: ${err.id}`;
-		} else if (err.message.startsWith('Unexpected token')) {
+	}
+
+	// @ts-expect-error Misskey内部で定義されていない不明なエラー
+	if (!err.id && (err.statusCode ?? 0) > 499) {
 		title = i18n.ts.gotInvalidResponseError;
 		text = i18n.ts.gotInvalidResponseErrorDescription;
 	}
+
+	if (err.id && !title) {
+		title = i18n.ts.somethingHappened;
+	} else if (!title) {
+		title = i18n.ts.somethingHappened;
+		text = err.message;
+	}
+
 	alert({
 		type: 'error',
 		title,
 		text,
-			details: err.info,
+		// @ts-expect-error Misskeyのエラーならinfoを、そうでなければそのまま表示
+		details: err.id ? err.info : err as unknown,
 	});
-	});
+}
-
-	return promise;
-}) as typeof misskeyApi;
 
 export function promiseDialog<T>(
 	promise: Promise<T>,

packages/frontend/src/scripts/misskey-api.ts

@@ -44,14 +44,15 @@ export function misskeyApi<
 			},
 			signal,
 		}).then(async (res) => {
-			const body = res.status === 204 ? null : await res.json();
+			if (res.ok && res.status !== 204) {
-
+				const body = await res.json();
-			if (res.status === 200) {
 				resolve(body);
 			} else if (res.status === 204) {
 				resolve(undefined as _ResT); // void -> undefined
 			} else {
-				reject(body.error);
+				// エラー応答で JSON.parse に失敗した場合は HTTP ステータスコードとメッセージを返す
+				const body = await res.json().catch(() => ({ statusCode: res.status, message: res.statusText }));
+				reject(typeof body.error === 'object' ? body.error : body);
 			}
 		}).catch(reject);
 	});