Merge 8f957a6d3e into e90ef7eba2

CHANGELOG.md

@@ -32,6 +32,7 @@
 - Fix: メンションのサジェスト時に表示されるアイコン表示が画像サイズ次第で崩れる問題を修正
 - Fix: ノートの下書きをリセットする際、未アップロードのファイルについては添付予定が解除されない問題を修正
 - Fix: 画像アップロード時、フレームのキャプション付与が正しく行われないことがある問題を修正
+- Fix: 起動時のエラー画面が操作できないことがある問題を修正
 
 ### Server
 - Enhance: リモートノートクリーニングジョブのスキップ処理のパフォーマンス改善

packages/frontend-embed/@types/global.d.ts

@@ -14,7 +14,7 @@ declare const _PERF_PREFIX_: string;
 // for dev-mode
 declare const _LANGS_FULL_: string[][];
 
-// TagCanvas
 interface Window {
 	TagCanvas: any;
+	errored?: boolean;
 }

packages/frontend-embed/public/loader/boot.js

@@ -7,12 +7,16 @@
 
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
+	window.errored = false;
+
 	window.onerror = (e) => {
 		console.error(e);
+		window.errored = true;
 		renderError('SOMETHING_HAPPENED');
 	};
 	window.onunhandledrejection = (e) => {
 		console.error(e);
+		window.errored = true;
 		renderError('SOMETHING_HAPPENED_IN_PROMISE');
 	};
 

packages/frontend-embed/src/boot.ts

@@ -129,44 +129,48 @@ const rootEl = ((): HTMLElement => {
 
 postMessageToParentWindow('misskey:embed:ready');
 
-app.mount(rootEl);
+// もし、ここまでの処理でエラースクリーンが出ていた場合はマウントしない
+// （Vue側のインタフェースと干渉して操作不能になることがあるため）
+if (!window.errored) {
+	app.mount(rootEl);
 
-// boot.jsのやつを解除
-window.onerror = null;
-window.onunhandledrejection = null;
+	// boot.jsのやつを解除
+	window.onerror = null;
+	window.onunhandledrejection = null;
 
-removeSplash();
+	removeSplash();
 
-//#region Self-XSS 対策メッセージ
-console.log(
-	`%c${i18n.ts._selfXssPrevention.warning}`,
-	'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
-);
-console.log(
-	`%c${i18n.ts._selfXssPrevention.title}`,
-	'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
-);
-console.log(
-	`%c${i18n.ts._selfXssPrevention.description1}`,
-	'font-size: 16px; font-weight: 700;',
-);
-console.log(
-	`%c${i18n.ts._selfXssPrevention.description2}`,
-	'font-size: 16px;',
-	'font-size: 20px; font-weight: 700; color: #f00;',
-);
-console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
-//#endregion
+	//#region Self-XSS 対策メッセージ
+	console.log(
+		`%c${i18n.ts._selfXssPrevention.warning}`,
+		'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
+	);
+	console.log(
+		`%c${i18n.ts._selfXssPrevention.title}`,
+		'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
+	);
+	console.log(
+		`%c${i18n.ts._selfXssPrevention.description1}`,
+		'font-size: 16px; font-weight: 700;',
+	);
+	console.log(
+		`%c${i18n.ts._selfXssPrevention.description2}`,
+		'font-size: 16px;',
+		'font-size: 20px; font-weight: 700; color: #f00;',
+	);
+	console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
+	//#endregion
 
-function removeSplash() {
-	const splash = window.document.getElementById('splash');
-	if (splash) {
-		splash.style.opacity = '0';
-		splash.style.pointerEvents = 'none';
+	function removeSplash() {
+		const splash = window.document.getElementById('splash');
+		if (splash) {
+			splash.style.opacity = '0';
+			splash.style.pointerEvents = 'none';
 
-		// transitionendイベントが発火しない場合があるため
-		window.setTimeout(() => {
-			splash.remove();
-		}, 1000);
+			// transitionendイベントが発火しない場合があるため
+			window.setTimeout(() => {
+				splash.remove();
+			}, 1000);
+		}
 	}
 }

packages/frontend/@types/global.d.ts

@@ -14,7 +14,7 @@ declare const _PERF_PREFIX_: string;
 // for dev-mode
 declare const _LANGS_FULL_: string[][];
 
-// TagCanvas
 interface Window {
-	TagCanvas: any;
+	TagCanvas?: any;
+	errored?: boolean;
 }

packages/frontend/public/loader/boot.js

@@ -7,12 +7,16 @@
 
 // ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
 (async () => {
+	window.errored = false;
+
 	window.onerror = (e) => {
 		console.error(e);
+		window.errored = true;
 		renderError('SOMETHING_HAPPENED', e);
 	};
 	window.onunhandledrejection = (e) => {
 		console.error(e);
+		window.errored = true;
 		renderError('SOMETHING_HAPPENED_IN_PROMISE', e.reason || e);
 	};
 

packages/frontend/src/boot/common.ts

@@ -31,7 +31,16 @@ import { prefer } from '@/preferences.js';
 import { $i } from '@/i.js';
 import { launchPlugins } from '@/plugin.js';
 
-export async function common(createVue: () => Promise<App<Element>>) {
+type CommonBootResult = {
+	aborted: true;
+} | {
+	aborted: false;
+	isClientUpdated: boolean;
+	lastVersion: string | null;
+	app: App<Element>;
+};
+
+export async function common(createVue: () => Promise<App<Element>>): Promise<CommonBootResult> {
 	console.info(`Misskey v${version}`);
 
 	if (_DEV_) {
@@ -327,6 +336,12 @@ export async function common(createVue: () => Promise<App<Element>>) {
 		console.error('Failed to launch plugins:', error);
 	}
 
+	// もし、ここまでの処理でエラースクリーンが出ていた場合はマウントしない
+	// （Vue側のインタフェースと干渉して操作不能になることがあるため）
+	if (window.errored) {
+		return { aborted: true };
+	}
+
 	app.mount(rootEl);
 
 	// boot.jsのやつを解除
@@ -359,6 +374,7 @@ export async function common(createVue: () => Promise<App<Element>>) {
 	//#endregion
 
 	return {
+		aborted: false,
 		isClientUpdated,
 		lastVersion,
 		app,

packages/frontend/src/boot/main-boot.ts

@@ -32,7 +32,7 @@ import { unisonReload } from '@/utility/unison-reload.js';
 import { isBirthday } from '@/utility/is-birthday.js';
 
 export async function mainBoot() {
-	const { isClientUpdated, lastVersion } = await common(async () => {
+	const res = await common(async () => {
 		let uiStyle = ui;
 		const searchParams = new URLSearchParams(window.location.search);
 
@@ -62,6 +62,12 @@ export async function mainBoot() {
 		return createApp(rootComponent);
 	});
 
+	if (res.aborted) {
+		return;
+	}
+
+	const { isClientUpdated, lastVersion } = res;
+
 	reactionPicker.init();
 	emojiPicker.init();
 

packages/frontend/src/boot/sub-boot.ts

@@ -3,13 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { createApp, defineAsyncComponent } from 'vue';
+import { createApp } from 'vue';
 import { common } from './common.js';
 import { emojiPicker } from '@/utility/emoji-picker.js';
 import UiMinimum from '@/ui/minimum.vue';
 
 export async function subBoot() {
-	const { isClientUpdated } = await common(async () => createApp(UiMinimum));
+	const res = await common(async () => createApp(UiMinimum));
+
+	if (res.aborted) {
+		return;
+	}
 
 	emojiPicker.init();
 }