enhance(frontend): エラー発生時のダイアログに詳細情報を載せる (MisskeyIO#543)

packages/backend/src/server/api/ApiCallService.ts

@@ -389,12 +389,10 @@ export class ApiCallService implements OnApplicationShutdown {
 						id: err.id,
 					},
 					{
-						e: {
 						message: err.message,
 						code: err.name,
 						id: err.id,
 					},
-					},
 				);
 			} else {
 				const errId = randomUUID();
@@ -416,12 +414,10 @@ export class ApiCallService implements OnApplicationShutdown {
 						kind: 'server',
 					},
 					{
-						e: {
 						message: err.message,
 						code: err.name,
 						id: errId,
 					},
-					},
 				);
 			}
 		});

packages/backend/src/server/api/endpoint-base.ts

@@ -63,7 +63,7 @@ export abstract class Endpoint<T extends IEndpointMeta, Ps extends Schema> {
 					id: '3d81ceae-475f-4600-b2a8-2bc116157532',
 				}, {
 					param: errors[0].schemaPath,
-					reason: errors[0].message,
+					reason: errors[0].message ?? 'Invalid',
 				});
 				return Promise.reject(err);
 			}

packages/backend/src/server/api/endpoints/admin/emoji/copy.ts

@@ -85,11 +85,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						id: '5c77c4d7-0f68-48f9-8694-8453a2294840',
 					},
 					{
-						e: {
 						message: err.message,
 						code: err.name,
-						}
+					},
-					}
 				);
 			}
 

packages/backend/src/server/api/endpoints/drive/files/create.ts

@@ -191,11 +191,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						id: '6708863c-6791-4487-aa01-2d682c6e7db0',
 					},
 					{
-						e: {
 						message: err.message,
 						code: err.name,
 					},
-					},
 				);
 			} finally {
 				if (cleanup) cleanup();

packages/backend/src/server/api/error.ts

@@ -11,15 +11,15 @@ export class ApiError extends Error {
 	public id: string;
 	public kind: string;
 	public httpStatusCode?: number;
-	public info?: any;
+	public info?: Record<string, string>;
 
-	constructor(err: E, info?: any | null | undefined) {
+	constructor(err: E, info?: Record<string, string> | null | undefined) {
 		super(err.message);
 		this.message = err.message;
 		this.code = err.code;
 		this.id = err.id;
 		this.kind = err.kind ?? 'client';
 		this.httpStatusCode = err.httpStatusCode;
-		this.info = info;
+		this.info = info ?? undefined;
 	}
 }

packages/frontend/src/components/MkDialog.vue

@@ -48,6 +48,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>
 		</MkSelect>
+		<details v-if="details" class="_acrylic" style="margin: 1em 0;">
+			<summary>{{ i18n.ts.details }}</summary>
+			<div class="_gaps_s" style="text-align: initial;">
+				<MkKeyValue v-for="(value, key) in details" :key="key" :value="value">
+					<template #key>{{ key }}</template>
+					<template #value>{{ value }}</template>
+				</MkKeyValue>
+			</div>
+		</details>
 		<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
 			<MkButton v-if="showOkButton" data-cy-modal-dialog-ok inline primary rounded :autofocus="!input && !select" :disabled="okButtonDisabledReason" @click="ok">{{ okText ?? ((showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt) }}</MkButton>
 			<MkButton v-if="showCancelButton || input || select" data-cy-modal-dialog-cancel inline rounded @click="cancel">{{ cancelText ?? i18n.ts.cancel }}</MkButton>
@@ -66,6 +75,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import { i18n } from '@/i18n.js';
 
 type Input = {
@@ -89,11 +99,12 @@ type Result = string | number | true | null;
 
 const props = withDefaults(defineProps<{
 	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
+	icon?: string;
 	title?: string | null;
 	text?: string | null;
 	input?: Input;
 	select?: Select;
-	icon?: string;
+	details?: Record<string, string>;
 	actions?: {
 		text: string;
 		primary?: boolean,
@@ -107,11 +118,12 @@ const props = withDefaults(defineProps<{
 	cancelText?: string;
 }>(), {
 	type: 'info',
+	icon: undefined,
 	title: undefined,
 	text: undefined,
 	input: undefined,
 	select: undefined,
-	icon: undefined,
+	details: undefined,
 	actions: undefined,
 	showOkButton: true,
 	showCancelButton: false,

packages/frontend/src/os.ts

@@ -47,6 +47,7 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 				type: 'error',
 				title,
 				text,
+				details: err.info,
 				actions: [{
 					value: 'ok',
 					text: i18n.ts.gotIt,
@@ -81,6 +82,7 @@ export const apiWithDialog = (<E extends keyof Misskey.Endpoints = keyof Misskey
 			type: 'error',
 			title,
 			text,
+			details: err.info,
 		});
 	});
 
@@ -113,7 +115,9 @@ export function promiseDialog<T>(
 		} else {
 			alert({
 				type: 'error',
-				text: err,
+				title: err.message,
+				text: err.id,
+				details: err.info,
 			});
 		}
 	});
@@ -217,6 +221,7 @@ export function alert(props: {
 	type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
 	text?: string | null;
+	details?: Record<string, string>;
 }): Promise<void> {
 	return new Promise(resolve => {
 		popup(MkDialog, props, {
@@ -231,6 +236,7 @@ export function confirm(props: {
 	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
 	text?: string | null;
+	details?: Record<string, string>;
 	okText?: string;
 	cancelText?: string;
 }): Promise<{ canceled: boolean }> {
@@ -257,6 +263,7 @@ export function actions<T extends {
 	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
 	title?: string | null;
 	text?: string | null;
+	details?: Record<string, string>;
 	actions: T;
 }): Promise<{
 	canceled: true; result: undefined;