From 75af042f0d7e4fe6e29ef93a646d86d2a0cbd4cc Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Wed, 28 Aug 2024 15:10:50 -0700 Subject: [PATCH 01/14] feat(replay): add mobile platforms to onboarding sidebar --- .../onboarding/gettingStartedDoc/types.ts | 2 + .../gettingStartedDoc/utils/index.tsx | 2 +- .../replayOnboardingLayout.tsx | 27 ++++-- .../components/replaysOnboarding/sidebar.tsx | 69 ++++++--------- static/app/data/platformCategories.tsx | 1 + .../gettingStartedDocs/android/android.tsx | 86 ++++++++++++++++++ static/app/gettingStartedDocs/apple/ios.tsx | 77 ++++++++++++++++ .../react-native/react-native.tsx | 87 +++++++++++++++++++ 8 files changed, 297 insertions(+), 54 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/types.ts b/static/app/components/onboarding/gettingStartedDoc/types.ts index 59b4830fbac2c2..bc9a5679334f0c 100644 --- a/static/app/components/onboarding/gettingStartedDoc/types.ts +++ b/static/app/components/onboarding/gettingStartedDoc/types.ts @@ -87,6 +87,7 @@ export interface Docs; platformOptions?: PlatformOptions; replayOnboardingJsLoader?: OnboardingConfig; + replayOnboardingMobile?: OnboardingConfig; replayOnboardingNpm?: OnboardingConfig; } @@ -97,4 +98,5 @@ export type ConfigType = | 'crashReportOnboarding' | 'replayOnboardingNpm' | 'replayOnboardingJsLoader' + | 'replayOnboardingMobile' | 'customMetricsOnboarding'; diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx index 86800ed50cb94b..58705c2b13899c 100644 --- a/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/utils/index.tsx @@ -75,7 +75,7 @@ export function MobileBetaBanner({link}: {link: string}) { return ( {tct( - `Currently, Mobile Replay is in beta. You can [link:read our docs] to learn how to set it up for your project.`, + `Currently, Mobile Replay is in beta. To learn more, you can [link:read our docs].`, { link: , } diff --git a/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx b/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx index 7e45ac2832670a..a366174f663dc7 100644 --- a/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx +++ b/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx @@ -8,6 +8,7 @@ import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/ty import {useSourcePackageRegistries} from 'sentry/components/onboarding/gettingStartedDoc/useSourcePackageRegistries'; import {useUrlPlatformOptions} from 'sentry/components/onboarding/platformOptionsControl'; import ReplayConfigToggle from 'sentry/components/replaysOnboarding/replayConfigToggle'; +import {space} from 'sentry/styles/space'; import useOrganization from 'sentry/utils/useOrganization'; export function ReplayOnboardingLayout({ @@ -25,7 +26,7 @@ export function ReplayOnboardingLayout({ const selectedOptions = useUrlPlatformOptions(docsConfig.platformOptions); const [mask, setMask] = useState(true); const [block, setBlock] = useState(true); - const {steps} = useMemo(() => { + const {introduction, steps} = useMemo(() => { const doc = docsConfig[configType] ?? docsConfig.onboarding; const docParams: DocsParams = { @@ -78,6 +79,7 @@ export function ReplayOnboardingLayout({ return ( + {introduction && {introduction}} {steps.map(step => step.type === StepType.CONFIGURE ? ( @@ -85,14 +87,15 @@ export function ReplayOnboardingLayout({ key={step.title ?? step.type} {...{ ...step, - codeHeader: ( - setBlock(!block)} - onMaskToggle={() => setMask(!mask)} - /> - ), + codeHeader: + configType === 'replayOnboardingMobile' ? null : ( + setBlock(!block)} + onMaskToggle={() => setMask(!mask)} + /> + ), }} /> ) : ( @@ -124,3 +127,9 @@ const Wrapper = styled('div')` } } `; + +const Introduction = styled('div')` + display: flex; + flex-direction: column; + margin: 0 0 ${space(2)} 0; +`; diff --git a/static/app/components/replaysOnboarding/sidebar.tsx b/static/app/components/replaysOnboarding/sidebar.tsx index 197afc11420f69..3680f7a8a1360a 100644 --- a/static/app/components/replaysOnboarding/sidebar.tsx +++ b/static/app/components/replaysOnboarding/sidebar.tsx @@ -10,7 +10,6 @@ import {CompactSelect} from 'sentry/components/compactSelect'; import RadioGroup from 'sentry/components/forms/controls/radioGroup'; import IdBadge from 'sentry/components/idBadge'; import LoadingIndicator from 'sentry/components/loadingIndicator'; -import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import useCurrentProjectState from 'sentry/components/onboarding/gettingStartedDoc/utils/useCurrentProjectState'; import {useLoadGettingStarted} from 'sentry/components/onboarding/gettingStartedDoc/utils/useLoadGettingStarted'; import {PlatformOptionDropdown} from 'sentry/components/replaysOnboarding/platformOptionDropdown'; @@ -21,10 +20,10 @@ import type {CommonSidebarProps} from 'sentry/components/sidebar/types'; import {SidebarPanelKey} from 'sentry/components/sidebar/types'; import TextOverflow from 'sentry/components/textOverflow'; import { - backend, replayBackendPlatforms, replayFrontendPlatforms, replayJsLoaderInstructionsPlatformList, + replayMobilePlatforms, replayOnboardingPlatforms, replayPlatforms, } from 'sentry/data/platformCategories'; @@ -162,6 +161,8 @@ function OnboardingContent({ currentProject: Project; hasDocs: boolean; }) { + const organization = useOrganization(); + const jsFrameworkSelectOptions = replayJsFrameworkOptions().map(platform => { return { value: platform.id, @@ -175,40 +176,33 @@ function OnboardingContent({ }; }); - const organization = useOrganization(); const [jsFramework, setJsFramework] = useState<{ value: PlatformKey; label?: ReactNode; textValue?: string; }>(jsFrameworkSelectOptions[0]); - const defaultTab = - currentProject.platform && backend.includes(currentProject.platform) - ? 'jsLoader' - : 'npm'; - - const {getParamValue: setupMode, setParamValue: setSetupMode} = useUrlParams( - 'mode', - defaultTab - ); - - const showJsFrameworkInstructions = - currentProject.platform && - replayBackendPlatforms.includes(currentProject.platform) && - setupMode() === 'npm'; - + const backendPlatform = + currentProject.platform && replayBackendPlatforms.includes(currentProject.platform); + const mobilePlatform = + currentProject.platform && replayMobilePlatforms.includes(currentProject.platform); const npmOnlyFramework = currentProject.platform && replayFrontendPlatforms .filter((p): p is PlatformKey => p !== 'javascript') .includes(currentProject.platform); - - const showRadioButtons = + const jsLoaderPlatform = currentProject.platform && replayJsLoaderInstructionsPlatformList.includes(currentProject.platform); - const backendPlatforms = - currentProject.platform && replayBackendPlatforms.includes(currentProject.platform); + const defaultTab = backendPlatform ? 'jsLoader' : mobilePlatform ? 'mobile' : 'npm'; + const {getParamValue: setupMode, setParamValue: setSetupMode} = useUrlParams( + 'mode', + defaultTab + ); + + const showJsFrameworkInstructions = backendPlatform && setupMode() === 'npm'; + const showRadioButtons = jsLoaderPlatform; const currentPlatform = currentProject.platform ? platforms.find(p => p.id === currentProject.platform) ?? otherPlatform @@ -248,7 +242,7 @@ function OnboardingContent({ choices={[ [ 'npm', - backendPlatforms ? ( + backendPlatform ? ( {tct('I use [platformSelect]', { platformSelect: ( @@ -283,6 +277,7 @@ function OnboardingContent({ onChange={setSetupMode} /> ) : ( + !mobilePlatform && docs?.platformOptions && !isProjKeysLoading && ( @@ -306,22 +301,6 @@ function OnboardingContent({ ); } - // TODO: remove once we have mobile replay onboarding - if (['android', 'react-native'].includes(currentPlatform.language)) { - return ( - - ); - } - if (currentPlatform.language === 'apple') { - return ( - - ); - } - const doesNotSupportReplay = currentProject.platform ? !replayPlatforms.includes(currentProject.platform) : true; @@ -382,11 +361,13 @@ function OnboardingContent({ projectId={currentProject.id} projectSlug={currentProject.slug} configType={ - setupMode() === 'npm' || // switched to NPM option - (!setupMode() && defaultTab === 'npm') || // default value for FE frameworks when ?mode={...} in URL is not set yet - npmOnlyFramework // even if '?mode=jsLoader', only show npm instructions for FE frameworks - ? 'replayOnboardingNpm' - : 'replayOnboardingJsLoader' + mobilePlatform + ? 'replayOnboardingMobile' + : setupMode() === 'npm' || // switched to NPM option + (!setupMode() && defaultTab === 'npm') || // default value for FE frameworks when ?mode={...} in URL is not set yet + npmOnlyFramework // even if '?mode=jsLoader', only show npm instructions for FE frameworks + ? 'replayOnboardingNpm' + : 'replayOnboardingJsLoader' } /> diff --git a/static/app/data/platformCategories.tsx b/static/app/data/platformCategories.tsx index 0a14b90170699e..2e31709ebbadb5 100644 --- a/static/app/data/platformCategories.tsx +++ b/static/app/data/platformCategories.tsx @@ -466,6 +466,7 @@ export const replayPlatforms: readonly PlatformKey[] = [ export const replayOnboardingPlatforms: readonly PlatformKey[] = [ ...replayFrontendPlatforms.filter(p => !['javascript-backbone'].includes(p)), ...replayBackendPlatforms, + ...replayMobilePlatforms, ]; // These are the supported replay platforms that can also be set up using the JS loader. diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index 0d75105a393fa5..be2accc862885e 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -10,6 +10,7 @@ import type { DocsParams, OnboardingConfig, } from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import {getAndroidMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; import {feedbackOnboardingCrashApiJava} from 'sentry/gettingStartedDocs/java/java'; import {t, tct} from 'sentry/locale'; @@ -93,6 +94,24 @@ val breakWorld = Button(this).apply { addContentView(breakWorld, ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT))`; +const getReplaySetupSnippetKotlin = (params: Params) => ` +SentryAndroid.init(context) { options -> + options.dsn = "${params.dsn.public}" + options.isDebug = true + + // Currently under experimental options: + options.experimental.sessionReplay.errorSampleRate = 1.0 + options.experimental.sessionReplay.sessionSampleRate = 1.0 +}`; + +const getReplaySetupSnippetXml = () => ` + +`; + +const getReplayConfigurationSnippet = () => ` +options.experimental.sessionReplay.redactAllText = true +options.experimental.sessionReplay.redactAllImages = true`; + const onboarding: OnboardingConfig = { install: params => isAutoInstall(params) @@ -283,12 +302,79 @@ const onboarding: OnboardingConfig = { ], }; +const replayOnboarding: OnboardingConfig = { + introduction: () => ( + + ), + install: (params: Params) => [ + { + type: StepType.INSTALL, + description: t( + 'Make sure your Sentry Android SDK version is at least 7.12.0. To set up the integration, add the following to your Sentry initialization.' + ), + configurations: [ + { + code: [ + { + label: 'Kotlin', + value: 'kotlin', + language: 'kotlin', + code: getReplaySetupSnippetKotlin(params), + }, + { + label: 'Xml', + value: 'xml', + language: 'xml', + filename: 'AndroidManifest.xml', + code: getReplaySetupSnippetXml(), + }, + ], + }, + ], + }, + ], + configure: () => [ + { + type: StepType.CONFIGURE, + description: tct( + 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', + { + code: , + link: ( + + ), + } + ), + configurations: [ + { + description: t( + 'The following code is the default configuration, which masks and blocks everything.' + ), + code: [ + { + label: 'Kotlin', + value: 'kotlin', + language: 'kotlin', + code: getReplayConfigurationSnippet(), + }, + ], + }, + ], + }, + ], + verify: () => [], + nextSteps: () => [], +}; + const docs: Docs = { onboarding, feedbackOnboardingCrashApi: feedbackOnboardingCrashApiJava, crashReportOnboarding: feedbackOnboardingCrashApiJava, customMetricsOnboarding: getAndroidMetricsOnboarding(), platformOptions, + replayOnboardingMobile: replayOnboarding, }; export default docs; diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index 98e0cf409b9b2b..b79916fe86e974 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -9,6 +9,7 @@ import type { DocsParams, OnboardingConfig, } from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/macos'; import {t, tct} from 'sentry/locale'; @@ -244,6 +245,20 @@ const getVerifyMetricsSnippetObjC = () => ` tags: @{ @"screen" : @"login" } ];`; +const getReplaySetupSnippet = (params: Params) => ` +SentrySDK.start(configureOptions: { options in + options.dsn = "${params.dsn.public}" + options.debug = true + + // Currently under experimental options: + options.experimental.sessionReplay.onErrorSampleRate = 1.0 + options.experimental.sessionReplay.sessionSampleRate = 1.0 +})`; + +const getReplayConfigurationSnippet = () => ` +options.experimental.sessionReplay.redactAllText = true +options.experimental.sessionReplay.redactAllImages = true`; + const onboarding: OnboardingConfig = { install: params => isAutoInstall(params) @@ -615,12 +630,74 @@ const metricsOnboarding: OnboardingConfig = { ], }; +const replayOnboarding: OnboardingConfig = { + introduction: () => ( + + ), + install: (params: Params) => [ + { + type: StepType.INSTALL, + description: t( + 'Make sure your Sentry Cocoa SDK version is at least 8.31.1. To set up the integration, add the following to your Sentry initialization.' + ), + configurations: [ + { + code: [ + { + label: 'Swift', + value: 'swift', + language: 'swift', + code: getReplaySetupSnippet(params), + }, + ], + }, + ], + }, + ], + configure: () => [ + { + type: StepType.CONFIGURE, + description: tct( + 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', + { + code: , + link: ( + + ), + } + ), + configurations: [ + { + description: t( + 'The following code is the default configuration, which masks and blocks everything.' + ), + code: [ + { + label: 'Swift', + value: 'swift', + language: 'swift', + code: getReplayConfigurationSnippet(), + }, + ], + }, + ], + }, + ], + verify: () => [], + nextSteps: () => [], +}; + const docs: Docs = { onboarding, feedbackOnboardingCrashApi: appleFeedbackOnboarding, crashReportOnboarding: appleFeedbackOnboarding, customMetricsOnboarding: metricsOnboarding, platformOptions, + replayOnboardingMobile: replayOnboarding, }; export default docs; diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index eab3fd8cd56286..3e55816d52dec2 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -9,6 +9,7 @@ import type { DocsParams, OnboardingConfig, } from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import { getCrashReportApiIntroduction, getCrashReportInstallDescription, @@ -72,6 +73,30 @@ shopCheckout() { } }`; +const getReplaySetupSnippet = (params: Params) => ` +import * as Sentry from '@sentry/react-native'; + +Sentry.init({ + dsn = "${params.dsn.public}", + _experiments: { + replaysSessionSampleRate: 1.0, + replaysOnErrorSampleRate: 1.0, + }, + integrations: [ + Sentry.mobileReplayIntegration({ + maskAllText: true, + maskAllImages: true, + }), + ], +});`; + +const getReplayConfigurationSnippet = () => ` +Sentry.mobileReplayIntegration({ + maskAllText: true, + maskAllImages: true, + maskAllVectors: true, +}),`; + const onboarding: OnboardingConfig = { install: () => [ { @@ -381,11 +406,73 @@ const getInstallConfig = () => [ }, ]; +const replayOnboarding: OnboardingConfig = { + introduction: () => ( + + ), + install: (params: Params) => [ + { + type: StepType.INSTALL, + description: t( + 'Make sure your Sentry React Native SDK version is at least 5.26.0. To set up the integration, add the following to your Sentry initialization.' + ), + configurations: [ + { + code: [ + { + label: 'JavaScript', + value: 'javascript', + language: 'javascript', + code: getReplaySetupSnippet(params), + }, + ], + }, + ], + }, + ], + configure: () => [ + { + type: StepType.CONFIGURE, + description: tct( + 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', + { + code: , + link: ( + + ), + } + ), + configurations: [ + { + description: t( + 'The following code is the default configuration, which masks and blocks everything.' + ), + code: [ + { + label: 'JavaScript', + value: 'javascript', + language: 'javascript', + code: getReplayConfigurationSnippet(), + }, + ], + }, + ], + }, + ], + verify: () => [], + nextSteps: () => [], +}; + const docs: Docs = { onboarding, feedbackOnboardingCrashApi, crashReportOnboarding: feedbackOnboardingCrashApi, customMetricsOnboarding: getReactNativeMetricsOnboarding({getInstallConfig}), + replayOnboardingMobile: replayOnboarding, }; export default docs; From 3b167558f3ae9e1843aa5c046761d4d3ab8e8c44 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Wed, 28 Aug 2024 15:32:45 -0700 Subject: [PATCH 02/14] :recycle: make constant --- .../utils/replayOnboarding.tsx | 9 +++++++++ .../app/gettingStartedDocs/android/android.tsx | 15 ++++----------- static/app/gettingStartedDocs/apple/ios.tsx | 17 ++++------------- .../react-native/react-native.tsx | 17 ++++------------- 4 files changed, 21 insertions(+), 37 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx index e58e2524dc86d5..c133d519993d0a 100644 --- a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx @@ -3,6 +3,15 @@ import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/ty import {tct} from 'sentry/locale'; export const getReplayConfigureDescription = ({link}: {link: string}) => + tct( + 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', + { + code: , + link: , + } + ); + +export const getReplayMobileConfigureDescription = ({link}: {link: string}) => tct( 'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [code:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs].', { diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index be2accc862885e..9597e81954d9da 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -12,6 +12,7 @@ import type { } from 'sentry/components/onboarding/gettingStartedDoc/types'; import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import {getAndroidMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getReplayMobileConfigureDescription} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding'; import {feedbackOnboardingCrashApiJava} from 'sentry/gettingStartedDocs/java/java'; import {t, tct} from 'sentry/locale'; import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion'; @@ -336,17 +337,9 @@ const replayOnboarding: OnboardingConfig = { configure: () => [ { type: StepType.CONFIGURE, - description: tct( - 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', - { - code: , - link: ( - - ), - } - ), + description: getReplayMobileConfigureDescription({ + link: 'https://docs.sentry.io/platforms/android/session-replay/#privacy', + }), configurations: [ { description: t( diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index b79916fe86e974..32090054255e8d 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -11,6 +11,7 @@ import type { } from 'sentry/components/onboarding/gettingStartedDoc/types'; import {MobileBetaBanner} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getReplayMobileConfigureDescription} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding'; import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/macos'; import {t, tct} from 'sentry/locale'; import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion'; @@ -657,19 +658,9 @@ const replayOnboarding: OnboardingConfig = { configure: () => [ { type: StepType.CONFIGURE, - description: tct( - 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', - { - code: , - link: ( - - ), - } - ), + description: getReplayMobileConfigureDescription({ + link: 'https://docs.sentry.io/platforms/apple/guides/ios/session-replay/#privacy', + }), configurations: [ { description: t( diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index 3e55816d52dec2..d1f856dd4ac4a0 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -15,6 +15,7 @@ import { getCrashReportInstallDescription, } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding'; import {getReactNativeMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding'; +import {getReplayMobileConfigureDescription} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding'; import {t, tct} from 'sentry/locale'; type Params = DocsParams; @@ -433,19 +434,9 @@ const replayOnboarding: OnboardingConfig = { configure: () => [ { type: StepType.CONFIGURE, - description: tct( - 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', - { - code: , - link: ( - - ), - } - ), + description: getReplayMobileConfigureDescription({ + link: 'https://docs.sentry.io/platforms/react-native/session-replay/#privacy', + }), configurations: [ { description: t( From cd883e1a0fc8011de6d9f93d4cf53ff78986f8af Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Wed, 28 Aug 2024 21:29:41 -0700 Subject: [PATCH 03/14] :recycle: oops --- .../onboarding/gettingStartedDoc/utils/replayOnboarding.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx index c133d519993d0a..333f61057aa059 100644 --- a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx @@ -2,16 +2,15 @@ import ExternalLink from 'sentry/components/links/externalLink'; import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {tct} from 'sentry/locale'; -export const getReplayConfigureDescription = ({link}: {link: string}) => +export const getReplayMobileConfigureDescription = ({link}: {link: string}) => tct( 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', { - code: , link: , } ); -export const getReplayMobileConfigureDescription = ({link}: {link: string}) => +export const getReplayConfigureDescription = ({link}: {link: string}) => tct( 'Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set using the [code:integrations] constructor. Learn more about configuring Session Replay by reading the [link:configuration docs].', { From e9718279b32d3159a775b5f701f21a485120c808 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 09:50:45 -0700 Subject: [PATCH 04/14] :recycle: update rn snippet --- static/app/gettingStartedDocs/react-native/react-native.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index d1f856dd4ac4a0..354b2242c27643 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -84,10 +84,7 @@ Sentry.init({ replaysOnErrorSampleRate: 1.0, }, integrations: [ - Sentry.mobileReplayIntegration({ - maskAllText: true, - maskAllImages: true, - }), + Sentry.mobileReplayIntegration(), ], });`; From ceb29191c3772df336ade7a2231b80afbc6db092 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 10:02:10 -0700 Subject: [PATCH 05/14] :art: simplify --- .../app/components/feedback/feedbackOnboarding/sidebar.tsx | 1 + static/app/components/replaysOnboarding/sidebar.tsx | 7 ++----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/static/app/components/feedback/feedbackOnboarding/sidebar.tsx b/static/app/components/feedback/feedbackOnboarding/sidebar.tsx index 53d92c695348c7..8b74094841eb2f 100644 --- a/static/app/components/feedback/feedbackOnboarding/sidebar.tsx +++ b/static/app/components/feedback/feedbackOnboarding/sidebar.tsx @@ -334,6 +334,7 @@ function OnboardingContent({currentProject}: {currentProject: Project}) { ) { return 'feedbackOnboardingNpm'; } + // TODO: update this when we add feedback to the loader return 'replayOnboardingJsLoader'; } diff --git a/static/app/components/replaysOnboarding/sidebar.tsx b/static/app/components/replaysOnboarding/sidebar.tsx index 3680f7a8a1360a..2575bf306629ef 100644 --- a/static/app/components/replaysOnboarding/sidebar.tsx +++ b/static/app/components/replaysOnboarding/sidebar.tsx @@ -22,7 +22,6 @@ import TextOverflow from 'sentry/components/textOverflow'; import { replayBackendPlatforms, replayFrontendPlatforms, - replayJsLoaderInstructionsPlatformList, replayMobilePlatforms, replayOnboardingPlatforms, replayPlatforms, @@ -191,9 +190,6 @@ function OnboardingContent({ replayFrontendPlatforms .filter((p): p is PlatformKey => p !== 'javascript') .includes(currentProject.platform); - const jsLoaderPlatform = - currentProject.platform && - replayJsLoaderInstructionsPlatformList.includes(currentProject.platform); const defaultTab = backendPlatform ? 'jsLoader' : mobilePlatform ? 'mobile' : 'npm'; const {getParamValue: setupMode, setParamValue: setSetupMode} = useUrlParams( @@ -202,7 +198,6 @@ function OnboardingContent({ ); const showJsFrameworkInstructions = backendPlatform && setupMode() === 'npm'; - const showRadioButtons = jsLoaderPlatform; const currentPlatform = currentProject.platform ? platforms.find(p => p.id === currentProject.platform) ?? otherPlatform @@ -234,6 +229,8 @@ function OnboardingContent({ productType: 'replay', }); + const showRadioButtons = !!docs?.replayOnboardingJsLoader; + const radioButtons = (
{showRadioButtons ? ( From da715ac89c401347721767c836bc11bd0827fbfe Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 10:18:57 -0700 Subject: [PATCH 06/14] :art: replayOnboardingNpm -> replayOnboarding --- .../onboarding/gettingStartedDoc/types.ts | 6 ++---- .../replayOnboardingLayout.tsx | 20 +++++++++--------- .../components/replaysOnboarding/sidebar.tsx | 21 +++++++++++-------- .../gettingStartedDocs/android/android.tsx | 2 +- static/app/gettingStartedDocs/apple/ios.tsx | 2 +- .../capacitor/capacitor.tsx | 2 +- .../gettingStartedDocs/electron/electron.tsx | 2 +- .../gettingStartedDocs/javascript/angular.tsx | 2 +- .../gettingStartedDocs/javascript/astro.tsx | 2 +- .../gettingStartedDocs/javascript/ember.tsx | 2 +- .../gettingStartedDocs/javascript/gatsby.tsx | 2 +- .../javascript/javascript.tsx | 2 +- .../gettingStartedDocs/javascript/nextjs.tsx | 2 +- .../gettingStartedDocs/javascript/react.tsx | 2 +- .../gettingStartedDocs/javascript/remix.tsx | 2 +- .../gettingStartedDocs/javascript/solid.tsx | 2 +- .../javascript/solidstart.tsx | 2 +- .../gettingStartedDocs/javascript/svelte.tsx | 2 +- .../javascript/sveltekit.tsx | 2 +- .../app/gettingStartedDocs/javascript/vue.tsx | 2 +- .../react-native/react-native.tsx | 2 +- 21 files changed, 42 insertions(+), 41 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/types.ts b/static/app/components/onboarding/gettingStartedDoc/types.ts index bc9a5679334f0c..ee4c5e53b37201 100644 --- a/static/app/components/onboarding/gettingStartedDoc/types.ts +++ b/static/app/components/onboarding/gettingStartedDoc/types.ts @@ -86,9 +86,8 @@ export interface Docs; feedbackOnboardingNpm?: OnboardingConfig; platformOptions?: PlatformOptions; + replayOnboarding?: OnboardingConfig; replayOnboardingJsLoader?: OnboardingConfig; - replayOnboardingMobile?: OnboardingConfig; - replayOnboardingNpm?: OnboardingConfig; } export type ConfigType = @@ -96,7 +95,6 @@ export type ConfigType = | 'feedbackOnboardingNpm' | 'feedbackOnboardingCrashApi' | 'crashReportOnboarding' - | 'replayOnboardingNpm' + | 'replayOnboarding' | 'replayOnboardingJsLoader' - | 'replayOnboardingMobile' | 'customMetricsOnboarding'; diff --git a/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx b/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx index a366174f663dc7..57cf68b4336390 100644 --- a/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx +++ b/static/app/components/replaysOnboarding/replayOnboardingLayout.tsx @@ -19,7 +19,8 @@ export function ReplayOnboardingLayout({ projectSlug, newOrg, configType = 'onboarding', -}: OnboardingLayoutProps) { + hideMaskBlockToggles, +}: OnboardingLayoutProps & {hideMaskBlockToggles?: boolean}) { const organization = useOrganization(); const {isPending: isLoadingRegistry, data: registryData} = useSourcePackageRegistries(organization); @@ -87,15 +88,14 @@ export function ReplayOnboardingLayout({ key={step.title ?? step.type} {...{ ...step, - codeHeader: - configType === 'replayOnboardingMobile' ? null : ( - setBlock(!block)} - onMaskToggle={() => setMask(!mask)} - /> - ), + codeHeader: hideMaskBlockToggles ? null : ( + setBlock(!block)} + onMaskToggle={() => setMask(!mask)} + /> + ), }} /> ) : ( diff --git a/static/app/components/replaysOnboarding/sidebar.tsx b/static/app/components/replaysOnboarding/sidebar.tsx index 2575bf306629ef..2aba0ac973649d 100644 --- a/static/app/components/replaysOnboarding/sidebar.tsx +++ b/static/app/components/replaysOnboarding/sidebar.tsx @@ -22,6 +22,7 @@ import TextOverflow from 'sentry/components/textOverflow'; import { replayBackendPlatforms, replayFrontendPlatforms, + replayJsLoaderInstructionsPlatformList, replayMobilePlatforms, replayOnboardingPlatforms, replayPlatforms, @@ -191,7 +192,7 @@ function OnboardingContent({ .filter((p): p is PlatformKey => p !== 'javascript') .includes(currentProject.platform); - const defaultTab = backendPlatform ? 'jsLoader' : mobilePlatform ? 'mobile' : 'npm'; + const defaultTab = backendPlatform ? 'jsLoader' : 'npm'; const {getParamValue: setupMode, setParamValue: setSetupMode} = useUrlParams( 'mode', defaultTab @@ -229,7 +230,9 @@ function OnboardingContent({ productType: 'replay', }); - const showRadioButtons = !!docs?.replayOnboardingJsLoader; + const showRadioButtons = + currentProject.platform && + replayJsLoaderInstructionsPlatformList.includes(currentProject.platform); const radioButtons = (
@@ -351,6 +354,7 @@ function OnboardingContent({ {radioButtons} diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index 9597e81954d9da..161d61efc38529 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -367,7 +367,7 @@ const docs: Docs = { crashReportOnboarding: feedbackOnboardingCrashApiJava, customMetricsOnboarding: getAndroidMetricsOnboarding(), platformOptions, - replayOnboardingMobile: replayOnboarding, + replayOnboarding, }; export default docs; diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index 32090054255e8d..f4b1e0252ec6b6 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -688,7 +688,7 @@ const docs: Docs = { crashReportOnboarding: appleFeedbackOnboarding, customMetricsOnboarding: metricsOnboarding, platformOptions, - replayOnboardingMobile: replayOnboarding, + replayOnboarding, }; export default docs; diff --git a/static/app/gettingStartedDocs/capacitor/capacitor.tsx b/static/app/gettingStartedDocs/capacitor/capacitor.tsx index 022e901b22c663..dae7338fa95083 100644 --- a/static/app/gettingStartedDocs/capacitor/capacitor.tsx +++ b/static/app/gettingStartedDocs/capacitor/capacitor.tsx @@ -487,7 +487,7 @@ const docs: Docs = { onboarding, platformOptions, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/electron/electron.tsx b/static/app/gettingStartedDocs/electron/electron.tsx index d773f64488b041..0c34d3f8fa170c 100644 --- a/static/app/gettingStartedDocs/electron/electron.tsx +++ b/static/app/gettingStartedDocs/electron/electron.tsx @@ -363,7 +363,7 @@ init({ const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding, crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/angular.tsx b/static/app/gettingStartedDocs/javascript/angular.tsx index 29074a1914f20d..8d008c35ffe293 100644 --- a/static/app/gettingStartedDocs/javascript/angular.tsx +++ b/static/app/gettingStartedDocs/javascript/angular.tsx @@ -375,7 +375,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/astro.tsx b/static/app/gettingStartedDocs/javascript/astro.tsx index 6df7b83d0190e3..6a17a79be4ddfb 100644 --- a/static/app/gettingStartedDocs/javascript/astro.tsx +++ b/static/app/gettingStartedDocs/javascript/astro.tsx @@ -377,7 +377,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/ember.tsx b/static/app/gettingStartedDocs/javascript/ember.tsx index aaf60a79c8ca4a..3afb07d333c5bf 100644 --- a/static/app/gettingStartedDocs/javascript/ember.tsx +++ b/static/app/gettingStartedDocs/javascript/ember.tsx @@ -288,7 +288,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/gatsby.tsx b/static/app/gettingStartedDocs/javascript/gatsby.tsx index 6bbd61954fb865..f1ff44995249b4 100644 --- a/static/app/gettingStartedDocs/javascript/gatsby.tsx +++ b/static/app/gettingStartedDocs/javascript/gatsby.tsx @@ -322,7 +322,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/javascript.tsx b/static/app/gettingStartedDocs/javascript/javascript.tsx index b2f332d583fdb8..f412e4039a712b 100644 --- a/static/app/gettingStartedDocs/javascript/javascript.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript.tsx @@ -289,7 +289,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, replayOnboardingJsLoader, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, diff --git a/static/app/gettingStartedDocs/javascript/nextjs.tsx b/static/app/gettingStartedDocs/javascript/nextjs.tsx index 195dec3cc92f20..3e80a4b93e1076 100644 --- a/static/app/gettingStartedDocs/javascript/nextjs.tsx +++ b/static/app/gettingStartedDocs/javascript/nextjs.tsx @@ -285,7 +285,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({ getInstallConfig: getManualInstallConfig, }), diff --git a/static/app/gettingStartedDocs/javascript/react.tsx b/static/app/gettingStartedDocs/javascript/react.tsx index e5b23ac8b612ed..86e24f76408779 100644 --- a/static/app/gettingStartedDocs/javascript/react.tsx +++ b/static/app/gettingStartedDocs/javascript/react.tsx @@ -314,7 +314,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/remix.tsx b/static/app/gettingStartedDocs/javascript/remix.tsx index 6e8529f6cf97c8..cf4285161bc6ef 100644 --- a/static/app/gettingStartedDocs/javascript/remix.tsx +++ b/static/app/gettingStartedDocs/javascript/remix.tsx @@ -232,7 +232,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/solid.tsx b/static/app/gettingStartedDocs/javascript/solid.tsx index 357750b5a40448..a9f60529b73208 100644 --- a/static/app/gettingStartedDocs/javascript/solid.tsx +++ b/static/app/gettingStartedDocs/javascript/solid.tsx @@ -314,7 +314,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/solidstart.tsx b/static/app/gettingStartedDocs/javascript/solidstart.tsx index cef5ca1d90e49a..b4713991c9cacf 100644 --- a/static/app/gettingStartedDocs/javascript/solidstart.tsx +++ b/static/app/gettingStartedDocs/javascript/solidstart.tsx @@ -472,7 +472,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/svelte.tsx b/static/app/gettingStartedDocs/javascript/svelte.tsx index 571f8de71db8a9..4aa5902e1463b2 100644 --- a/static/app/gettingStartedDocs/javascript/svelte.tsx +++ b/static/app/gettingStartedDocs/javascript/svelte.tsx @@ -311,7 +311,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.tsx index d838be59c457b0..689e2139bcdb99 100644 --- a/static/app/gettingStartedDocs/javascript/sveltekit.tsx +++ b/static/app/gettingStartedDocs/javascript/sveltekit.tsx @@ -208,7 +208,7 @@ const crashReportOnboarding: OnboardingConfig = { const docs: Docs = { onboarding, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/javascript/vue.tsx b/static/app/gettingStartedDocs/javascript/vue.tsx index 9ae2313cd04cdc..4c2631c045d99f 100644 --- a/static/app/gettingStartedDocs/javascript/vue.tsx +++ b/static/app/gettingStartedDocs/javascript/vue.tsx @@ -384,7 +384,7 @@ const docs: Docs = { onboarding, platformOptions, feedbackOnboardingNpm: feedbackOnboarding, - replayOnboardingNpm: replayOnboarding, + replayOnboarding, customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}), crashReportOnboarding, }; diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index 354b2242c27643..9c6b7fea60ab4f 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -460,7 +460,7 @@ const docs: Docs = { feedbackOnboardingCrashApi, crashReportOnboarding: feedbackOnboardingCrashApi, customMetricsOnboarding: getReactNativeMetricsOnboarding({getInstallConfig}), - replayOnboardingMobile: replayOnboarding, + replayOnboarding, }; export default docs; From c30449e7c7aa984376143fbfb2870a4b868bc531 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 10:31:38 -0700 Subject: [PATCH 07/14] :sparkles: add install instructions for ios --- static/app/gettingStartedDocs/apple/ios.tsx | 29 ++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index f4b1e0252ec6b6..9921dcc0d058df 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -639,9 +639,36 @@ const replayOnboarding: OnboardingConfig = { { type: StepType.INSTALL, description: t( - 'Make sure your Sentry Cocoa SDK version is at least 8.31.1. To set up the integration, add the following to your Sentry initialization.' + 'Make sure your Sentry Cocoa SDK version is at least 8.31.1. If you already have the SDK installed, you can update it to the latest version with:' ), configurations: [ + { + code: [ + { + label: 'SPM', + value: 'spm', + language: 'spm', + code: `.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.36.0"),`, + }, + { + label: 'Cocoapods', + value: 'cocoapods', + language: 'cocoapods', + code: `pod update`, + }, + { + label: 'Carthage', + value: 'carthage', + language: 'carthage', + code: `github "getsentry/sentry-cocoa" "8.36.0"`, + }, + ], + }, + { + description: t( + 'To set up the integration, add the following to your Sentry initialization:' + ), + }, { code: [ { From b35ca977e8b2926fedabea5189bb45d51944bdb4 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 10:34:56 -0700 Subject: [PATCH 08/14] :bug: fix language --- static/app/gettingStartedDocs/apple/ios.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index 9921dcc0d058df..d114f6963d9e19 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -647,19 +647,19 @@ const replayOnboarding: OnboardingConfig = { { label: 'SPM', value: 'spm', - language: 'spm', + language: 'swift', code: `.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.36.0"),`, }, { label: 'Cocoapods', value: 'cocoapods', - language: 'cocoapods', + language: 'ruby', code: `pod update`, }, { label: 'Carthage', value: 'carthage', - language: 'carthage', + language: 'swift', code: `github "getsentry/sentry-cocoa" "8.36.0"`, }, ], From 7ec94c160dd9b77200b156dce328d37b0e1b0b13 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 11:37:58 -0700 Subject: [PATCH 09/14] :pencil2: wording --- .../onboarding/gettingStartedDoc/utils/replayOnboarding.tsx | 2 +- static/app/gettingStartedDocs/android/android.tsx | 2 +- static/app/gettingStartedDocs/apple/ios.tsx | 2 +- static/app/gettingStartedDocs/react-native/react-native.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx index 333f61057aa059..a36c849868e7b2 100644 --- a/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx +++ b/static/app/components/onboarding/gettingStartedDoc/utils/replayOnboarding.tsx @@ -4,7 +4,7 @@ import {tct} from 'sentry/locale'; export const getReplayMobileConfigureDescription = ({link}: {link: string}) => tct( - 'The SDK is aggressively redacting all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', + 'The SDK aggressively redacts all text and images. We plan to add fine controls for redacting, but currently, we just allow either on or off. Learn more about configuring Session Replay by reading the [link:configuration docs].', { link: , } diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index 161d61efc38529..dc7a1a0ace151a 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -323,7 +323,7 @@ const replayOnboarding: OnboardingConfig = { code: getReplaySetupSnippetKotlin(params), }, { - label: 'Xml', + label: 'XML', value: 'xml', language: 'xml', filename: 'AndroidManifest.xml', diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index d114f6963d9e19..d0bb7ab1a3216b 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -651,7 +651,7 @@ const replayOnboarding: OnboardingConfig = { code: `.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.36.0"),`, }, { - label: 'Cocoapods', + label: 'CocoaPods', value: 'cocoapods', language: 'ruby', code: `pod update`, diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index 9c6b7fea60ab4f..b703a571ff3dec 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -78,7 +78,7 @@ const getReplaySetupSnippet = (params: Params) => ` import * as Sentry from '@sentry/react-native'; Sentry.init({ - dsn = "${params.dsn.public}", + dsn: "${params.dsn.public}", _experiments: { replaysSessionSampleRate: 1.0, replaysOnErrorSampleRate: 1.0, From 787f741d9055397bf56c5416159c1a01e49cc4ac Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 11:44:34 -0700 Subject: [PATCH 10/14] :sparkles: add rn install instructions --- .../react-native/react-native.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx index b703a571ff3dec..dfb36d6bbda007 100644 --- a/static/app/gettingStartedDocs/react-native/react-native.tsx +++ b/static/app/gettingStartedDocs/react-native/react-native.tsx @@ -412,9 +412,36 @@ const replayOnboarding: OnboardingConfig = { { type: StepType.INSTALL, description: t( - 'Make sure your Sentry React Native SDK version is at least 5.26.0. To set up the integration, add the following to your Sentry initialization.' + 'Make sure your Sentry React Native SDK version is at least 5.26.0. If you already have the SDK installed, you can update it to the latest version with:' ), configurations: [ + { + code: [ + { + label: 'npm', + value: 'npm', + language: 'bash', + code: `npm install @sentry/react-native --save`, + }, + { + label: 'yarn', + value: 'yarn', + language: 'bash', + code: `yarn add @sentry/react-native`, + }, + { + label: 'pnpm', + value: 'pnpm', + language: 'bash', + code: `pnpm add @sentry/react-native`, + }, + ], + }, + { + description: t( + 'To set up the integration, add the following to your Sentry initialization:' + ), + }, { code: [ { From 62041c6ad166e89e477064ba84bea893af25dbed Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 11:53:53 -0700 Subject: [PATCH 11/14] :sparkles: add android install instructions --- .../gettingStartedDocs/android/android.tsx | 64 ++++++++++++++++++- 1 file changed, 61 insertions(+), 3 deletions(-) diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index dc7a1a0ace151a..5efe4fa04d5ba3 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -310,16 +310,74 @@ const replayOnboarding: OnboardingConfig = { install: (params: Params) => [ { type: StepType.INSTALL, - description: t( - 'Make sure your Sentry Android SDK version is at least 7.12.0. To set up the integration, add the following to your Sentry initialization.' + description: tct( + "Make sure your Sentry Android SDK version is at least 7.12.0. The easiest way to update through the Sentry Android Gradle plugin to your app module's [code:build.gradle] file.", + {code: } ), configurations: [ { code: [ + { + label: 'Groovy', + value: 'groovy', + language: 'groovy', + filename: 'app/build.gradle', + code: `plugins { + id "com.android.application" + id "io.sentry.android.gradle" version "4.11.0" +}`, + }, { label: 'Kotlin', value: 'kotlin', - language: 'kotlin', + language: 'java', + filename: 'app/build.gradle.kts', + code: `plugins { + id("com.android.application") + id("io.sentry.android.gradle") version "4.11.0" +}`, + }, + ], + }, + { + description: tct( + 'If you have the SDK installed without the Sentry Gradle Plugin, you can update the version directly in the [code:build.gradle] through:', + {code: } + ), + }, + { + code: [ + { + label: 'Groovy', + value: 'groovy', + language: 'groovy', + filename: 'app/build.gradle', + code: `dependencies { + implementation 'io.sentry:sentry-android:7.14.0' +}`, + }, + { + label: 'Kotlin', + value: 'kotlin', + language: 'java', + filename: 'app/build.gradle.kts', + code: `dependencies { + implementation("io.sentry:sentry-android:7.14.0") +}`, + }, + ], + }, + { + description: t( + 'To set up the integration, add the following to your Sentry initialization:' + ), + }, + { + code: [ + { + label: 'Kotlin', + value: 'kotlin', + language: 'java', code: getReplaySetupSnippetKotlin(params), }, { From dafda7ed89d6d4e6544398670d964751161673d4 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Thu, 29 Aug 2024 12:02:45 -0700 Subject: [PATCH 12/14] :pencil2: typo --- static/app/gettingStartedDocs/android/android.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index 5efe4fa04d5ba3..a07f68f94d383b 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -407,7 +407,7 @@ const replayOnboarding: OnboardingConfig = { { label: 'Kotlin', value: 'kotlin', - language: 'kotlin', + language: 'java', code: getReplayConfigurationSnippet(), }, ], From aff1547db1c3d4cf826fb5d58038291f3fc4101f Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:45:37 -0700 Subject: [PATCH 13/14] :art: kotlin language change and getPackageVersion --- .../gettingStartedDocs/android/android.tsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/static/app/gettingStartedDocs/android/android.tsx b/static/app/gettingStartedDocs/android/android.tsx index a07f68f94d383b..7854d5925e8c25 100644 --- a/static/app/gettingStartedDocs/android/android.tsx +++ b/static/app/gettingStartedDocs/android/android.tsx @@ -324,17 +324,25 @@ const replayOnboarding: OnboardingConfig = { filename: 'app/build.gradle', code: `plugins { id "com.android.application" - id "io.sentry.android.gradle" version "4.11.0" + id "io.sentry.android.gradle" version "${getPackageVersion( + params, + 'sentry.java.android.gradle-plugin', + '4.11.0' + )}" }`, }, { label: 'Kotlin', value: 'kotlin', - language: 'java', + language: 'kotlin', filename: 'app/build.gradle.kts', code: `plugins { id("com.android.application") - id("io.sentry.android.gradle") version "4.11.0" + id("io.sentry.android.gradle") version "${getPackageVersion( + params, + 'sentry.java.android.gradle-plugin', + '4.11.0' + )}" }`, }, ], @@ -353,16 +361,24 @@ const replayOnboarding: OnboardingConfig = { language: 'groovy', filename: 'app/build.gradle', code: `dependencies { - implementation 'io.sentry:sentry-android:7.14.0' + implementation 'io.sentry:sentry-android:${getPackageVersion( + params, + 'sentry.java.android', + '7.14.0' + )}' }`, }, { label: 'Kotlin', value: 'kotlin', - language: 'java', + language: 'kotlin', filename: 'app/build.gradle.kts', code: `dependencies { - implementation("io.sentry:sentry-android:7.14.0") + implementation("io.sentry:sentry-android:${getPackageVersion( + params, + 'sentry.java.android', + '7.14.0' + )}") }`, }, ], @@ -377,7 +393,7 @@ const replayOnboarding: OnboardingConfig = { { label: 'Kotlin', value: 'kotlin', - language: 'java', + language: 'kotlin', code: getReplaySetupSnippetKotlin(params), }, { @@ -407,7 +423,7 @@ const replayOnboarding: OnboardingConfig = { { label: 'Kotlin', value: 'kotlin', - language: 'java', + language: 'kotlin', code: getReplayConfigurationSnippet(), }, ], From 1eff6c6eae16c1155f1c72070498911939fa4d36 Mon Sep 17 00:00:00 2001 From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:48:30 -0700 Subject: [PATCH 14/14] :art: use getPackageVersion for ios --- static/app/gettingStartedDocs/apple/ios.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/static/app/gettingStartedDocs/apple/ios.tsx b/static/app/gettingStartedDocs/apple/ios.tsx index d0bb7ab1a3216b..a1eb9d10f85742 100644 --- a/static/app/gettingStartedDocs/apple/ios.tsx +++ b/static/app/gettingStartedDocs/apple/ios.tsx @@ -648,7 +648,11 @@ const replayOnboarding: OnboardingConfig = { label: 'SPM', value: 'spm', language: 'swift', - code: `.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.36.0"),`, + code: `.package(url: "https://github.com/getsentry/sentry-cocoa", from: "${getPackageVersion( + params, + 'sentry.cocoa', + '8.36.0' + )}"),`, }, { label: 'CocoaPods', @@ -660,7 +664,11 @@ const replayOnboarding: OnboardingConfig = { label: 'Carthage', value: 'carthage', language: 'swift', - code: `github "getsentry/sentry-cocoa" "8.36.0"`, + code: `github "getsentry/sentry-cocoa" "${getPackageVersion( + params, + 'sentry.cocoa', + '8.36.0' + )}"`, }, ], },