fix(frontend): fix build failure due to dependency setting

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

@@ -13,6 +13,7 @@ declare const _PERF_PREFIX_: string;
 declare const _DATA_TRANSFER_DRIVE_FILE_: string;
 declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
 declare const _DATA_TRANSFER_DECK_COLUMN_: string;
+declare const _SENTRY_FOR_FRONTEND_DSN_: string | undefined;
 
 // for dev-mode
 declare const _LANGS_FULL_: string[][];

packages/frontend/package.json

@@ -24,6 +24,7 @@
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-replace": "5.0.5",
 		"@rollup/pluginutils": "5.1.0",
+		"@sentry/vue": "8.7.0",
 		"@syuilo/aiscript": "0.18.0",
 		"@tabler/icons-webfont": "3.3.0",
 		"@twemoji/parser": "15.1.1",
@@ -73,7 +74,8 @@
 		"v-code-diff": "1.11.0",
 		"vite": "5.2.11",
 		"vue": "3.4.26",
-		"vuedraggable": "next"
+		"vuedraggable": "next",
+		"yaml": "2.4.2"
 	},
 	"devDependencies": {
 		"@misskey-dev/eslint-plugin": "1.0.0",

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

@@ -4,8 +4,9 @@
  */
 
 import { createApp, defineAsyncComponent, markRaw } from 'vue';
+import * as Sentry from '@sentry/vue';
 import { common } from './common.js';
-import { ui } from '@/config.js';
+import { apiUrl, ui } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { alert, confirm, popup, post, toast } from '@/os.js';
 import { useStream } from '@/stream.js';
@@ -23,14 +24,40 @@ import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mainRouter } from '@/router/main.js';
 
 export async function mainBoot() {
-	const { isClientUpdated } = await common(() => createApp(
+	const { isClientUpdated, app } = await common(() => createApp(
 		new URLSearchParams(window.location.search).has('zen') || (ui === 'deck' && deckStore.state.useSimpleUiForNonRootPages && location.pathname !== '/') ? defineAsyncComponent(() => import('@/ui/zen.vue')) :
 		!$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) :
 		ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) :
 		ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
 		defineAsyncComponent(() => import('@/ui/universal.vue')),
 	));
 
+	if (_SENTRY_FOR_FRONTEND_DSN_) {
+		Sentry.init({
+			app,
+			// @ts-expect-error なんかエラー出る
+			dsn: _SENTRY_FOR_FRONTEND_DSN_,
+			integrations: [
+				Sentry.browserTracingIntegration(),
+				// @ts-expect-error なんかエラー出る
+				Sentry.replayIntegration(),
+			],
+
+			// Set tracesSampleRate to 1.0 to capture 100%
+			// of transactions for performance monitoring.
+			// We recommend adjusting this value in production
+			tracesSampleRate: 1.0,
+
+			// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+			tracePropagationTargets: [apiUrl],
+
+			// Capture Replay for 10% of all sessions,
+			// plus for 100% of sessions with an error
+			replaysSessionSampleRate: 0.1,
+			replaysOnErrorSampleRate: 1.0,
+		});
+	}
+
 	reactionPicker.init();
 	emojiPicker.init();
 
@@ -96,7 +123,7 @@ export async function mainBoot() {
 					}).render();
 				}
 			}
-		}	
+		}
 	} catch (error) {
 		// console.error(error);
 		console.error('Failed to initialise the seasonal screen effect canvas context:', error);

packages/frontend/vite.config.ts

@@ -1,7 +1,9 @@
+import fs from 'fs';
 import path from 'path';
 import pluginReplace from '@rollup/plugin-replace';
 import pluginVue from '@vitejs/plugin-vue';
 import { type UserConfig, defineConfig } from 'vite';
+import { parseDocument } from 'yaml';
 
 import locales from '../../locales/index.js';
 import meta from '../../package.json';
@@ -116,6 +118,10 @@ export function getConfig(): UserConfig {
 			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
 			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
 			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
+			_SENTRY_FOR_FRONTEND_DSN_: JSON.stringify(
+				parseDocument(fs.readFileSync(path.relative(__dirname, '../../.config/default.yml'), 'utf-8'))
+					.getIn(['sentryForFrontend', 'options', 'dsn']),
+			),
 			__VUE_OPTIONS_API__: true,
 			__VUE_PROD_DEVTOOLS__: false,
 		},