diff --git a/.config/cypress-devcontainer.yml b/.config/cypress-devcontainer.yml index 3907615f73..8356f32bd1 100644 --- a/.config/cypress-devcontainer.yml +++ b/.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' diff --git a/.config/docker_example.yml b/.config/docker_example.yml index ad9ae4fd9a..633b276a1a 100644 --- a/.config/docker_example.yml +++ b/.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' diff --git a/.config/example.yml b/.config/example.yml index 349c2e9730..1fbc2589d8 100644 --- a/.config/example.yml +++ b/.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' diff --git a/.devcontainer/devcontainer.yml b/.devcontainer/devcontainer.yml index 3eb4fc2879..921018870b 100644 --- a/.devcontainer/devcontainer.yml +++ b/.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' diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d4c4643e1..318bf8ec1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ### General - Feat: アクセストークン発行時に通知するように +- Enhance: フロントエンドのエラートラッキングができるように + - `.config/default.yml`中の項目`sentryForFrontend`を適宜設定してください。 ### Client - Feat: 投稿フォームで画像をプレビュー可能に diff --git a/chart/files/default.yml b/chart/files/default.yml index 4d17131c25..c03c847e67 100644 --- a/chart/files/default.yml +++ b/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' diff --git a/packages/backend/package.json b/packages/backend/package.json index 757912755a..a8e8ac7b1d 100644 --- a/packages/backend/package.json +++ b/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", diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts index c0b1484804..7e0dac96d4 100644 --- a/packages/backend/src/config.ts +++ b/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 & { @@ -62,7 +63,7 @@ type Source = { scope?: 'local' | 'global' | string[]; }; sentryForBackend?: { options: Partial; enableNodeProfiling: boolean; }; - sentryForFrontend?: { options: Partial }; + sentryForFrontend?: { options: Partial & { dsn: string }; enableBrowserTracing: boolean; enableReplay: boolean; }; publishTarballInsteadOfProvideRepositoryUrl?: boolean; @@ -196,7 +197,7 @@ export type Config = { redisForTimelines: RedisOptions & RedisOptionsSource; redisForReactions: RedisOptions & RedisOptionsSource; sentryForBackend: { options: Partial; enableNodeProfiling: boolean; } | undefined; - sentryForFrontend: { options: Partial } | undefined; + sentryForFrontend: { options: Partial & { dsn: string }; enableBrowserTracing: boolean; enableReplay: boolean; } | undefined; perChannelMaxNoteCacheCount: number; perUserNotificationsMaxCount: number; deactivateAntennaThreshold: number; diff --git a/packages/backend/src/core/entities/MetaEntityService.ts b/packages/backend/src/core/entities/MetaEntityService.ts index ec0b5360f4..1137eb60cf 100644 --- a/packages/backend/src/core/entities/MetaEntityService.ts +++ b/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', diff --git a/packages/backend/src/models/json-schema/meta.ts b/packages/backend/src/models/json-schema/meta.ts index e7ae2ee8e5..66c7b63c96 100644 --- a/packages/backend/src/models/json-schema/meta.ts +++ b/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, diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 804160baad..e9b4fad550 100644 --- a/packages/frontend/package.json +++ b/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", diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index 3a43c6794b..67628e263b 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/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(); diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts index c7485c6c3d..e885acd40a 100644 --- a/packages/misskey-js/src/autogen/types.ts +++ b/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27dfcfccc6..9f766231d8 100644 --- a/pnpm-lock.yaml +++ b/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