enhance: implement sentryForFrontend

.config/cypress-devcontainer.yml

@@ -165,6 +165,8 @@ id: 'aidx'
 #    dsn: 'https://[email protected]/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://[email protected]/0'
 

.config/docker_example.yml

@@ -177,6 +177,8 @@ id: 'aidx'
 #    dsn: 'https://[email protected]/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://[email protected]/0'
 

.config/example.yml

@@ -259,6 +259,8 @@ id: 'aidx'
 #    dsn: 'https://[email protected]/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://[email protected]/0'
 

.devcontainer/devcontainer.yml

@@ -152,6 +152,8 @@ id: 'aidx'
 #    dsn: 'https://[email protected]/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://[email protected]/0'
 

CHANGELOG.md

@@ -1,7 +1,7 @@
 ## Unreleased
 
 ### General
--
+- Enhance: フロントエンドのエラートラッキングができるように
 
 ### Client
 - Enhance: 投稿フォームの「迷惑になる可能性があります」のダイアログを表示する条件においてCWを考慮するように

chart/files/default.yml

@@ -173,6 +173,8 @@ id: "aidx"
 #    dsn: 'https://[email protected]/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://[email protected]/0'
 

packages/backend/package.json

@@ -189,6 +189,7 @@
 	"devDependencies": {
 		"@jest/globals": "29.7.0",
 		"@nestjs/platform-express": "10.4.7",
+		"@sentry/vue": "8.54.0",
 		"@simplewebauthn/types": "10.0.0",
 		"@swc/jest": "0.2.37",
 		"@types/accepts": "1.3.7",

packages/backend/src/config.ts

@@ -7,7 +7,8 @@ import * as fs from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, resolve } from 'node:path';
 import * as yaml from 'js-yaml';
-import * as Sentry from '@sentry/node';
+import type * as Sentry from '@sentry/node';
+import type * as SentryVue from '@sentry/vue';
 import type { RedisOptions } from 'ioredis';
 
 type RedisOptionsSource = Partial<RedisOptions> & {
@@ -62,7 +63,7 @@ type Source = {
 		scope?: 'local' | 'global' | string[];
 	};
 	sentryForBackend?: { options: Partial<Sentry.NodeOptions>; enableNodeProfiling: boolean; };
-	sentryForFrontend?: { options: Partial<Sentry.NodeOptions> };
+	sentryForFrontend?: { options: Partial<SentryVue.BrowserOptions>; enableBrowserTracing: boolean; enableReplay: boolean; };
 
 	publishTarballInsteadOfProvideRepositoryUrl?: boolean;
 
@@ -196,7 +197,7 @@ export type Config = {
 	redisForTimelines: RedisOptions & RedisOptionsSource;
 	redisForReactions: RedisOptions & RedisOptionsSource;
 	sentryForBackend: { options: Partial<Sentry.NodeOptions>; enableNodeProfiling: boolean; } | undefined;
-	sentryForFrontend: { options: Partial<Sentry.NodeOptions> } | undefined;
+	sentryForFrontend: { options: Partial<SentryVue.BrowserOptions> & { dsn: string }; enableBrowserTracing: boolean; enableReplay: boolean; } | undefined;
 	perChannelMaxNoteCacheCount: number;
 	perUserNotificationsMaxCount: number;
 	deactivateAntennaThreshold: number;

packages/backend/src/core/entities/MetaEntityService.ts

@@ -128,6 +128,7 @@ export class MetaEntityService {
 
 			policies: { ...DEFAULT_POLICIES, ...instance.policies },
 
+			sentryForFrontend: this.config.sentryForFrontend ?? null,
 			mediaProxy: this.config.mediaProxy,
 			enableUrlPreview: instance.urlPreviewEnabled,
 			noteSearchableScope: (this.config.meilisearch == null || this.config.meilisearch.scope !== 'local') ? 'global' : 'local',

packages/backend/src/models/json-schema/meta.ts

@@ -207,6 +207,31 @@ export const packedMetaLiteSchema = {
 			type: 'boolean',
 			optional: false, nullable: false,
 		},
+		sentryForFrontend: {
+			type: 'object',
+			optional: false, nullable: true,
+			properties: {
+				options: {
+					type: 'object',
+					optional: false, nullable: false,
+					properties: {
+						dsn: {
+							type: 'string',
+							optional: false, nullable: false,
+						},
+					},
+					additionalProperties: true,
+				},
+				enableBrowserTracing: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+				enableReplay: {
+					type: 'boolean',
+					optional: false, nullable: false,
+				},
+			},
+		},
 		mediaProxy: {
 			type: 'string',
 			optional: false, nullable: false,

packages/frontend/package.json

@@ -23,6 +23,7 @@
 		"@rollup/plugin-json": "6.1.0",
 		"@rollup/plugin-replace": "5.0.7",
 		"@rollup/pluginutils": "5.1.3",
+		"@sentry/vue": "8.54.0",
 		"@syuilo/aiscript": "0.19.0",
 		"@tabler/icons-webfont": "https://github.com/misskey-dev/tabler-icons/archive/refs/tags/3.29.0-mi.1913+5921534bc.tar.gz",
 		"@twemoji/parser": "15.1.1",

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

@@ -4,7 +4,7 @@
  */
 
 import { createApp, defineAsyncComponent, markRaw } from 'vue';
-import { ui } from '@@/js/config.js';
+import { apiUrl, ui } from '@@/js/config.js';
 import { common } from './common.js';
 import * as Misskey from 'misskey-js';
 import type { Component } from 'vue';
@@ -27,7 +27,7 @@ import type { Keymap } from '@/scripts/hotkey.js';
 import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom-emojis.js';
 
 export async function mainBoot() {
-	const { isClientUpdated } = await common(() => {
+	const { isClientUpdated, app } = await common(() => {
 		let uiStyle = ui;
 		const searchParams = new URLSearchParams(window.location.search);
 
@@ -60,6 +60,34 @@ export async function mainBoot() {
 		return createApp(rootComponent);
 	});
 
+	if (instance.sentryForFrontend) {
+		const Sentry = await import('@sentry/vue');
+		Sentry.init({
+			app,
+			integrations: [
+				...(instance.sentryForFrontend.enableBrowserTracing ? [Sentry.browserTracingIntegration()] : []),
+				...(instance.sentryForFrontend.enableReplay ? [Sentry.replayIntegration()] : []),
+			],
+
+			// Set tracesSampleRate to 1.0 to capture 100%
+			tracesSampleRate: 1.0,
+
+			// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+			...(instance.sentryForFrontend.enableBrowserTracing ? {
+				tracePropagationTargets: [apiUrl],
+			} : {}),
+
+			// Capture Replay for 10% of all sessions,
+			// plus for 100% of sessions with an error
+			...(instance.sentryForFrontend.enableReplay ? {
+				replaysSessionSampleRate: 0.1,
+				replaysOnErrorSampleRate: 1.0,
+			} : {}),
+
+			...instance.sentryForFrontend.options,
+		});
+	}
+
 	reactionPicker.init();
 	emojiPicker.init();
 

packages/misskey-js/src/autogen/types.ts

@@ -5063,6 +5063,14 @@ export type components = {
       enableEmail: boolean;
       enableServiceWorker: boolean;
       translatorAvailable: boolean;
+      sentryForFrontend: {
+        options: {
+          dsn: string;
+          [key: string]: unknown;
+        };
+        enableBrowserTracing: boolean;
+        enableReplay: boolean;
+      } | null;
       mediaProxy: string;
       enableUrlPreview: boolean;
       backgroundImageUrl: string | null;