Merge da68a29dbe into 4d562e7439

.config/cypress-devcontainer.yml

@@ -165,6 +165,8 @@ id: 'aidx'
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 

.config/docker_example.yml

@@ -177,6 +177,8 @@ id: 'aidx'
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 

.config/example.yml

@@ -259,6 +259,8 @@ id: 'aidx'
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 

.devcontainer/devcontainer.yml

@@ -152,6 +152,8 @@ id: 'aidx'
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### General
 - Feat: アクセストークン発行時に通知するように
+- Enhance: フロントエンドのエラートラッキングができるように
+	- `.config/default.yml`中の項目`sentryForFrontend`を適宜設定してください。
 
 ### Client
 - Feat: 投稿フォームで画像をプレビュー可能に

chart/files/default.yml

@@ -173,6 +173,8 @@ id: "aidx"
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 
 #sentryForFrontend:
+#  enableBrowserTracing: true
+#  enableReplay: true
 #  options:
 #    dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0'
 

packages/backend/package.json

@@ -189,6 +189,7 @@
 	"devDependencies": {
 		"@jest/globals": "29.7.0",
 		"@nestjs/platform-express": "10.4.7",
+		"@sentry/vue": "9.0.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> & { dsn: string }; 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": "9.0.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

@@ -5070,6 +5070,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;

pnpm-lock.yaml

@@ -532,6 +532,9 @@ importers:
       '@nestjs/platform-express':
         specifier: 10.4.7
         version: 10.4.7(@nestjs/common@10.4.7(reflect-metadata@0.2.2)(rxjs@7.8.1))(@nestjs/core@10.4.7)
+      '@sentry/vue':
+        specifier: 9.0.0
+        version: 9.0.0(vue@3.5.12(typescript@5.6.3))
       '@simplewebauthn/types':
         specifier: 10.0.0
         version: 10.0.0
@@ -706,6 +709,9 @@ importers:
       '@rollup/pluginutils':
         specifier: 5.1.3
         version: 5.1.3(rollup@4.26.0)
+      '@sentry/vue':
+        specifier: 9.0.0
+        version: 9.0.0(vue@3.5.12(typescript@5.6.3))
       '@syuilo/aiscript':
         specifier: 0.19.0
         version: 0.19.0
@@ -3459,10 +3465,34 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
+  '@sentry-internal/browser-utils@9.0.0':
+    resolution: {integrity: sha512-J5aBL0RV42WNx9xlw2a2MK1BBXAOwxYT2Hc9VNkuygwGzVEFimZEUKlaYKaDbM/XRUA0TRcYQaKkmGKqpDbxxw==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/feedback@9.0.0':
+    resolution: {integrity: sha512-4k4MxnvNFYbA8mPBOgY0gbK/e6dFA8JTDmt88NppSuBowu1uIYnVEFB3DWyaLvi60RXcbT4LnKvo70LTCpIEfQ==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/replay-canvas@9.0.0':
+    resolution: {integrity: sha512-KjN7Dx9CctwU06xfTEQjWz/MK00fDbHF2GUStDYe83Rt+8CmYXUHMRTr/UEMQxL8rH1O4JEGUH5fFWxTWu2gxw==}
+    engines: {node: '>=18'}
+
+  '@sentry-internal/replay@9.0.0':
+    resolution: {integrity: sha512-TqcOA6QhEqq4afR34rb/e0rpusafGh3XujW6hO0AIuv0inpfWhCN6i71hGR0Qt0gJNJaStiNu4Rrwj1AsebGTQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/browser@9.0.0':
+    resolution: {integrity: sha512-+BgusObsLnHwiA+xLm9d3YmdzRXFSUTG7YSSZYZ94NpQdnQlEb6a0ER6abCzmxmKAhNykf5MzLrPRz65bL83WQ==}
+    engines: {node: '>=18'}
+
   '@sentry/core@8.38.0':
     resolution: {integrity: sha512-sGD+5TEHU9G7X7zpyaoJxpOtwjTjvOd1f/MKBrWW2vf9UbYK+GUJrOzLhMoSWp/pHSYgvObkJkDb/HwieQjvhQ==}
     engines: {node: '>=14.18'}
 
+  '@sentry/core@9.0.0':
+    resolution: {integrity: sha512-oaOOC1rQ5NHuOJ5ciw5NjdvmgG+q3UJS5v+s1d2eFzi/n5OpxULvqce4aG3XDBJ/Hu+fxW+fbVW96JwAKNk2Tg==}
+    engines: {node: '>=18'}
+
   '@sentry/node@8.38.0':
     resolution: {integrity: sha512-nwW0XqZFQseXYn0i6i6nKPkbjgHMBEFSF9TnK6mHHqJHHObHIZ6qu5CfvGKgxATia8JPIg9NN8XcyYOnQMi07w==}
     engines: {node: '>=14.18'}
@@ -3490,6 +3520,16 @@ packages:
     resolution: {integrity: sha512-3X7MgIKIx+2q5Al7QkhaRB4wV6DvzYsaeIwdqKUzGLuRjXmNgJrLoU87TAwQRmZ6Wr3IoEpThZZMNrzYPXxArw==}
     engines: {node: '>=14.18'}
 
+  '@sentry/vue@9.0.0':
+    resolution: {integrity: sha512-uXfiX4pFXQ5BvOp8/i+eDE1dWuyXHCgi4H32NG5uKt+y5XKNjpZ0Iz2kaqLiBY2ypcoQKzplDveieGZZh3OvCA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      pinia: 2.x
+      vue: 2.x || 3.x
+    peerDependenciesMeta:
+      pinia:
+        optional: true
+
   '@shikijs/core@1.22.2':
     resolution: {integrity: sha512-bvIQcd8BEeR1yFvOYv6HDiyta2FFVePbzeowf5pPS1avczrPK+cjmaxxh0nx5QzbON7+Sv0sQfQVciO7bN72sg==}
 
@@ -13625,11 +13665,39 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
+  '@sentry-internal/browser-utils@9.0.0':
+    dependencies:
+      '@sentry/core': 9.0.0
+
+  '@sentry-internal/feedback@9.0.0':
+    dependencies:
+      '@sentry/core': 9.0.0
+
+  '@sentry-internal/replay-canvas@9.0.0':
+    dependencies:
+      '@sentry-internal/replay': 9.0.0
+      '@sentry/core': 9.0.0
+
+  '@sentry-internal/replay@9.0.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 9.0.0
+      '@sentry/core': 9.0.0
+
+  '@sentry/browser@9.0.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 9.0.0
+      '@sentry-internal/feedback': 9.0.0
+      '@sentry-internal/replay': 9.0.0
+      '@sentry-internal/replay-canvas': 9.0.0
+      '@sentry/core': 9.0.0
+
   '@sentry/core@8.38.0':
     dependencies:
       '@sentry/types': 8.38.0
       '@sentry/utils': 8.38.0
 
+  '@sentry/core@9.0.0': {}
+
   '@sentry/node@8.38.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -13700,6 +13768,12 @@ snapshots:
     dependencies:
       '@sentry/types': 8.38.0
 
+  '@sentry/vue@9.0.0(vue@3.5.12(typescript@5.6.3))':
+    dependencies:
+      '@sentry/browser': 9.0.0
+      '@sentry/core': 9.0.0
+      vue: 3.5.12(typescript@5.6.3)
+
   '@shikijs/core@1.22.2':
     dependencies:
       '@shikijs/engine-javascript': 1.22.2