From 08960f5e007bf6f14ecd6fcdf0cd980758956dc4 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 6 Aug 2025 17:22:07 -0400 Subject: [PATCH 1/4] feat: re-organize onboarding options 1. Errors 2. Logs 3. Replays 4. Tracing 5. Profiling --- src/components/onboarding/index.tsx | 54 +++++++++++++++-------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index 10274c1a0501c..f80450271746b 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -21,6 +21,24 @@ const optionDetails: Record< name: 'Error Monitoring', description: "Let's admit it, we all have errors.", }, + logs: { + name: 'Logs (Beta)', + description: ( + + Send text-based log information from your applications to Sentry for viewing + alongside relevant errors and searching by text-string or individual attributes. + + ), + }, + 'session-replay': { + name: 'Session Replay', + description: ( + + Video-like reproductions of user sessions with debugging context to help you + confirm issue impact and troubleshoot faster. + + ), + }, performance: { name: 'Tracing', description: ( @@ -41,15 +59,6 @@ const optionDetails: Record< ), deps: ['performance'], }, - 'session-replay': { - name: 'Session Replay', - description: ( - - Video-like reproductions of user sessions with debugging context to help you - confirm issue impact and troubleshoot faster. - - ), - }, 'user-feedback': { name: 'User Feedback', description: ( @@ -59,15 +68,6 @@ const optionDetails: Record< ), }, - logs: { - name: 'Logs (Beta)', - description: ( - - Send text-based log information from your applications to Sentry for viewing - alongside relevant errors and searching by text-string or individual attributes. - - ), - }, 'source-context': { name: 'Source Context', description: ( @@ -101,20 +101,20 @@ const optionDetails: Record< }, }; -const OPTION_IDS = [ +const OPTION_IDS = new Set([ 'error-monitoring', + 'logs', + 'session-replay', 'performance', 'profiling', - 'session-replay', + 'source-maps', 'user-feedback', - 'logs', 'source-context', 'dsym', - 'source-maps', 'opentelemetry', -] as const; +] as const); -type OptionId = (typeof OPTION_IDS)[number]; +type OptionId = typeof OPTION_IDS extends Set ? T : never; export type OnboardingOptionType = { /** @@ -132,9 +132,11 @@ export type OnboardingOptionType = { const validateOptionIds = (options: Pick[]) => { options.forEach(option => { - if (!OPTION_IDS.includes(option.id)) { + if (!OPTION_IDS.has(option.id)) { throw new Error( - `Invalid option id: ${option.id}.\nValid options are: ${OPTION_IDS.map(opt => `"${opt}"`).join(', ')}` + `Invalid option id: ${option.id}.\nValid options are: ${Array.from(OPTION_IDS) + .map(opt => `"${opt}"`) + .join(', ')}` ); } }); From f4737b0b9566b50ba1c4b826fc457b3497e15b99 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 6 Aug 2025 17:30:20 -0400 Subject: [PATCH 2/4] remove beta note from logs --- src/components/onboarding/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index f80450271746b..1ec68cb9baca9 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -22,7 +22,7 @@ const optionDetails: Record< description: "Let's admit it, we all have errors.", }, logs: { - name: 'Logs (Beta)', + name: 'Logs', description: ( Send text-based log information from your applications to Sentry for viewing From 8569926f2a56bb22cedb2f2a5f0f114b4cbd051b Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 6 Aug 2025 17:52:56 -0400 Subject: [PATCH 3/4] move around code --- src/components/onboarding/index.tsx | 84 +++++++++++++++-------------- 1 file changed, 45 insertions(+), 39 deletions(-) diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index 1ec68cb9baca9..82b46bee02bb7 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -9,6 +9,23 @@ import styles from './styles.module.scss'; import {CodeContext} from '../codeContext'; +const OPTION_IDS = [ + 'error-monitoring', + 'logs', + 'session-replay', + 'performance', + 'profiling', + 'source-maps', + 'user-feedback', + 'source-context', + 'dsym', + 'opentelemetry', +] as const; + +const OPTION_IDS_SET = new Set(OPTION_IDS); + +type OptionId = (typeof OPTION_IDS)[number]; + const optionDetails: Record< OptionId, { @@ -59,6 +76,15 @@ const optionDetails: Record< ), deps: ['performance'], }, + 'source-maps': { + name: 'Source Maps', + description: ( + + Source maps for web applications that help translate minified code back to the + original source for better error reporting. + + ), + }, 'user-feedback': { name: 'User Feedback', description: ( @@ -86,36 +112,12 @@ const optionDetails: Record< ), }, - 'source-maps': { - name: 'Source Maps', - description: ( - - Source maps for web applications that help translate minified code back to the - original source for better error reporting. - - ), - }, opentelemetry: { name: 'OpenTelemetry', description: Combine Sentry with OpenTelemetry., }, }; -const OPTION_IDS = new Set([ - 'error-monitoring', - 'logs', - 'session-replay', - 'performance', - 'profiling', - 'source-maps', - 'user-feedback', - 'source-context', - 'dsym', - 'opentelemetry', -] as const); - -type OptionId = typeof OPTION_IDS extends Set ? T : never; - export type OnboardingOptionType = { /** * Unique identifier for the option, will control the visibility @@ -132,11 +134,9 @@ export type OnboardingOptionType = { const validateOptionIds = (options: Pick[]) => { options.forEach(option => { - if (!OPTION_IDS.has(option.id)) { + if (!OPTION_IDS_SET.has(option.id)) { throw new Error( - `Invalid option id: ${option.id}.\nValid options are: ${Array.from(OPTION_IDS) - .map(opt => `"${opt}"`) - .join(', ')}` + `Invalid option id: ${option.id}.\nValid options are: ${OPTION_IDS.map(opt => `"${opt}"`).join(', ')}` ); } }); @@ -239,17 +239,23 @@ export function OnboardingOptionButtons({ }) { const codeContext = useContext(CodeContext); - const normalizedOptions = initialOptions.map(option => { - if (typeof option === 'string') { - return { - id: option, - // error monitoring is always needs to be checked and disabled - disabled: option === 'error-monitoring', - checked: option === 'error-monitoring', - }; - } - return option; - }); + const normalizedOptions = initialOptions + .map(option => { + if (typeof option === 'string') { + return { + id: option, + // error monitoring is always needs to be checked and disabled + disabled: option === 'error-monitoring', + checked: option === 'error-monitoring', + }; + } + return option; + }) + .sort((a, b) => { + const indexA = OPTION_IDS.indexOf(a.id); + const indexB = OPTION_IDS.indexOf(b.id); + return indexA - indexB; + }); validateOptionIds(normalizedOptions); From 37496906f86c1f52fd906ce8ed651cd76d3e2599 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 6 Aug 2025 17:53:25 -0400 Subject: [PATCH 4/4] extra comment --- src/components/onboarding/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/onboarding/index.tsx b/src/components/onboarding/index.tsx index 82b46bee02bb7..fa6538b8bc552 100644 --- a/src/components/onboarding/index.tsx +++ b/src/components/onboarding/index.tsx @@ -251,6 +251,9 @@ export function OnboardingOptionButtons({ } return option; }) + // sort options by their index in OPTION_IDS + // so that the order of the options is consistent + // regardless of how the user passes them in .sort((a, b) => { const indexA = OPTION_IDS.indexOf(a.id); const indexB = OPTION_IDS.indexOf(b.id);