diff --git a/static/app/gettingStartedDocs/javascript/angular/index.tsx b/static/app/gettingStartedDocs/javascript/angular/index.tsx index 585d5ecac46599..070ee9108ea798 100644 --- a/static/app/gettingStartedDocs/javascript/angular/index.tsx +++ b/static/app/gettingStartedDocs/javascript/angular/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock, platformOptions, type PlatformOptions} from './utils'; @@ -16,9 +16,17 @@ const docs: Docs = { replayOnboarding: replay, crashReportOnboarding: crashReport, platformOptions, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/angular/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'angular', + packageName: '@sentry/angular', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'angular', diff --git a/static/app/gettingStartedDocs/javascript/angular/logs.tsx b/static/app/gettingStartedDocs/javascript/angular/logs.tsx deleted file mode 100644 index a9d0c094268363..00000000000000 --- a/static/app/gettingStartedDocs/javascript/angular/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'angular', - packageName: '@sentry/angular', -}); diff --git a/static/app/gettingStartedDocs/javascript/angular/profiling.tsx b/static/app/gettingStartedDocs/javascript/angular/profiling.tsx deleted file mode 100644 index b175649cb7c19e..00000000000000 --- a/static/app/gettingStartedDocs/javascript/angular/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/angular/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/astro/index.tsx b/static/app/gettingStartedDocs/javascript/astro/index.tsx index bedadeef94fe6e..d0e494756d687b 100644 --- a/static/app/gettingStartedDocs/javascript/astro/index.tsx +++ b/static/app/gettingStartedDocs/javascript/astro/index.tsx @@ -1,13 +1,13 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; const docs: Docs = { @@ -16,12 +16,21 @@ const docs: Docs = { replayOnboarding: replay, crashReportOnboarding: crashReport, featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'astro', + packageName: '@sentry/astro', + }), + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/astro', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/astro/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/astro/profiling/node-profiling/', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'astro', packageName: '@sentry/astro', }), - profilingOnboarding: profiling, agentMonitoringOnboarding: agentMonitoring, }; diff --git a/static/app/gettingStartedDocs/javascript/astro/logs.tsx b/static/app/gettingStartedDocs/javascript/astro/logs.tsx deleted file mode 100644 index 10cab33c50d523..00000000000000 --- a/static/app/gettingStartedDocs/javascript/astro/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'astro', - packageName: '@sentry/astro', -}); diff --git a/static/app/gettingStartedDocs/javascript/astro/profiling.tsx b/static/app/gettingStartedDocs/javascript/astro/profiling.tsx deleted file mode 100644 index 60defc18268068..00000000000000 --- a/static/app/gettingStartedDocs/javascript/astro/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/astro', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/astro/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/astro/profiling/node-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/ember/index.tsx b/static/app/gettingStartedDocs/javascript/ember/index.tsx index c6eb3f61f6864f..7b78fab8c8cdf1 100644 --- a/static/app/gettingStartedDocs/javascript/ember/index.tsx +++ b/static/app/gettingStartedDocs/javascript/ember/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock} from './utils'; @@ -15,9 +15,17 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/ember/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'ember', + packageName: '@sentry/ember', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'ember', diff --git a/static/app/gettingStartedDocs/javascript/ember/logs.tsx b/static/app/gettingStartedDocs/javascript/ember/logs.tsx deleted file mode 100644 index 0ae6af16203f1a..00000000000000 --- a/static/app/gettingStartedDocs/javascript/ember/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'ember', - packageName: '@sentry/ember', -}); diff --git a/static/app/gettingStartedDocs/javascript/ember/profiling.tsx b/static/app/gettingStartedDocs/javascript/ember/profiling.tsx deleted file mode 100644 index 05489e67ca6c88..00000000000000 --- a/static/app/gettingStartedDocs/javascript/ember/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/ember/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/gatsby/index.tsx b/static/app/gettingStartedDocs/javascript/gatsby/index.tsx index a8cbf45ed43ac4..04f9d38bbb5190 100644 --- a/static/app/gettingStartedDocs/javascript/gatsby/index.tsx +++ b/static/app/gettingStartedDocs/javascript/gatsby/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock} from './utils'; @@ -15,9 +15,17 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/gatsby/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'gatsby', + packageName: '@sentry/gatsby', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'gatsby', diff --git a/static/app/gettingStartedDocs/javascript/gatsby/logs.tsx b/static/app/gettingStartedDocs/javascript/gatsby/logs.tsx deleted file mode 100644 index 5895d5b7b2be19..00000000000000 --- a/static/app/gettingStartedDocs/javascript/gatsby/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'gatsby', - packageName: '@sentry/gatsby', -}); diff --git a/static/app/gettingStartedDocs/javascript/gatsby/profiling.tsx b/static/app/gettingStartedDocs/javascript/gatsby/profiling.tsx deleted file mode 100644 index 005872e87500b7..00000000000000 --- a/static/app/gettingStartedDocs/javascript/gatsby/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/gatsby/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/javascript/index.tsx b/static/app/gettingStartedDocs/javascript/javascript/index.tsx index 5e5f2e4d4891f2..23a164f9cb9518 100644 --- a/static/app/gettingStartedDocs/javascript/javascript/index.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript/index.tsx @@ -24,9 +24,16 @@ const docs: Docs = { performanceOnboarding: performance, crashReportOnboarding: crashReport, platformOptions, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: 'https://docs.sentry.io/platforms/javascript/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'javascript', + packageName: '@sentry/browser', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'javascript', diff --git a/static/app/gettingStartedDocs/javascript/javascript/logs.tsx b/static/app/gettingStartedDocs/javascript/javascript/logs.tsx index a43695f21797ca..49337ba19062f7 100644 --- a/static/app/gettingStartedDocs/javascript/javascript/logs.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript/logs.tsx @@ -1,9 +1,236 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; +import {ExternalLink} from 'sentry/components/core/link'; +import { + StepType, + type BasePlatformOptions, + type ContentBlock, + type DocsParams, + type OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {t, tct} from 'sentry/locale'; -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ +export const logs = ({ + docsPlatform, + packageName, installSnippetBlock, - docsPlatform: 'javascript', - packageName: '@sentry/browser', +}: { + docsPlatform: string; + installSnippetBlock: ContentBlock; + packageName: `@sentry/${string}`; +}): OnboardingConfig => ({ + install: () => [ + { + type: StepType.INSTALL, + content: [ + { + type: 'text', + text: tct( + 'Add the Sentry SDK as a dependency. The minimum version of [packageName] that supports logs is [code:9.41.0].', + { + code: , + packageName: {packageName}, + } + ), + }, + installSnippetBlock, + { + type: 'text', + text: tct( + 'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.', + { + link: ( + + ), + } + ), + }, + ], + }, + ], + configure: (params: DocsParams) => [ + { + type: StepType.CONFIGURE, + content: [ + { + type: 'text', + text: tct( + 'Enable Sentry logs by adding [code:enableLogs: true] to your [code:Sentry.init()] configuration.', + {code: } + ), + }, + { + type: 'code', + language: 'javascript', + code: ` +import * as Sentry from "${packageName}"; + +Sentry.init({ + dsn: "${params.dsn.public}", + integrations: [ + // send console.log, console.warn, and console.error calls as logs to Sentry + Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), + ], + // Enable logs to be sent to Sentry + enableLogs: true, +}); +`, + }, + { + type: 'text', + text: tct('For more detailed information, see the [link:logs documentation].', { + link: ( + + ), + }), + }, + ], + }, + ], + verify: () => [ + { + type: StepType.VERIFY, + content: [ + { + type: 'text', + text: t('Send a test log from your app to verify logs are arriving in Sentry.'), + }, + { + type: 'code', + language: 'jsx', + code: `import * as Sentry from "${packageName}"; + +Sentry.logger.info('User triggered test log', { log_source: 'sentry_test' })`, + }, + ], + }, + ], +}); + +export const logsFullStack = < + PlatformOptions extends BasePlatformOptions = BasePlatformOptions, +>({ + docsPlatform, + packageName, +}: { + docsPlatform: string; + packageName: `@sentry/${string}`; +}): OnboardingConfig => ({ + install: () => [ + { + type: StepType.INSTALL, + content: [ + { + type: 'text', + text: tct( + 'To add logs make sure [packageName] is up-to-date. The minimum version of [packageName] that supports logs is [code:9.41.0].', + { + code: , + packageName: {packageName}, + } + ), + }, + { + type: 'code', + language: 'bash', + tabs: [ + { + label: 'npm', + value: 'npm', + language: 'bash', + code: `npm install ${packageName} --save`, + }, + { + label: 'yarn', + value: 'yarn', + language: 'bash', + code: `yarn add ${packageName}`, + }, + { + label: 'pnpm', + value: 'pnpm', + language: 'bash', + code: `pnpm add ${packageName}`, + }, + ], + }, + { + type: 'text', + text: tct( + 'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.', + { + link: ( + + ), + } + ), + }, + ], + }, + ], + configure: params => [ + { + type: StepType.CONFIGURE, + content: [ + { + type: 'text', + text: tct( + 'Enable Sentry logs by adding [code:enableLogs: true] to your [code:Sentry.init()] configuration.', + {code: } + ), + }, + { + type: 'code', + language: 'javascript', + code: ` +import * as Sentry from "${packageName}"; + +Sentry.init({ + dsn: "${params.dsn.public}", + integrations: [ + // send console.log, console.warn, and console.error calls as logs to Sentry + Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), + ], + // Enable logs to be sent to Sentry + enableLogs: true, +}); +`, + }, + { + type: 'text', + text: tct('For more detailed information, see the [link:logs documentation].', { + link: ( + + ), + }), + }, + ], + }, + ], + verify: () => [ + { + type: StepType.VERIFY, + content: [ + { + type: 'text', + text: t( + 'To confirm that logs are working correctly, run your application and check the Sentry logs page for the collected logs.' + ), + }, + { + type: 'code', + language: 'jsx', + code: `import * as Sentry from "${packageName}"; + +Sentry.logger.info('User triggered test log', { log_source: 'sentry_test' })`, + }, + ], + }, + ], }); diff --git a/static/app/gettingStartedDocs/javascript/javascript/onboarding.tsx b/static/app/gettingStartedDocs/javascript/javascript/onboarding.tsx index 6bde2397669b37..1b8d4c6ec6b85a 100644 --- a/static/app/gettingStartedDocs/javascript/javascript/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript/onboarding.tsx @@ -1,4 +1,4 @@ -import type {OnboardingConfig} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {type OnboardingConfig} from 'sentry/components/onboarding/gettingStartedDoc/types'; import { isAutoInstall, diff --git a/static/app/gettingStartedDocs/javascript/javascript/profiling.tsx b/static/app/gettingStartedDocs/javascript/javascript/profiling.tsx index a6672994bf7d7d..3d414a0a04f5f9 100644 --- a/static/app/gettingStartedDocs/javascript/javascript/profiling.tsx +++ b/static/app/gettingStartedDocs/javascript/javascript/profiling.tsx @@ -1,8 +1,342 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; +import {Alert} from 'sentry/components/core/alert'; +import {ExternalLink} from 'sentry/components/core/link'; +import { + StepType, + type BasePlatformOptions, + type ContentBlock, + type DocsParams, + type OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {t, tct} from 'sentry/locale'; -import {installSnippetBlock} from './utils'; +function BrowserProfilingBetaWarning() { + return ( + + {tct( + `Browser profiling is currently in Beta as we wait for the JS Self Profiling spec to gain wider support. You can read the detailed explanation [explainer].`, + { + explainer: ( + + {t('here')} + + ), + } + )} + + ); +} -export const profiling = getJavascriptProfilingOnboarding({ +const browserProfilingSnippet = (params: DocsParams) => ` +Sentry.init({ + dsn: "${params.dsn.public}", + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.browserProfilingIntegration() + ], + // Tracing + tracesSampleRate: 1.0, // Capture 100% of the transactions + // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled + tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/], + // Set profilesSampleRate to 1.0 to profile every transaction. + // Since profilesSampleRate is relative to tracesSampleRate, + // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate + // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would + // results in 25% of transactions being profiled (0.5*0.5=0.25) + profilesSampleRate: 1.0 +});`; + +const getDefaultProfilingHeaderContent = (): ContentBlock[] => [ + { + type: 'text', + text: tct( + "How you do this will depend on your server. If you're using a server like Express, you'll be able to use the [link:response.set] function.", + { + link: , + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'JavaScript', + language: 'javascript', + code: ` +app.get("/", (request, response) => { +response.set("Document-Policy", "js-profiling"); +response.sendFile("index.html"); +}); + `, + }, + ], + }, +]; + +export const profiling = < + PlatformOptions extends BasePlatformOptions = BasePlatformOptions, +>({ installSnippetBlock, - docsLink: 'https://docs.sentry.io/platforms/javascript/profiling/browser-profiling/', + docsLink, +}: { + docsLink: string; + installSnippetBlock: ContentBlock; +}): OnboardingConfig => ({ + introduction: () => , + install: () => [ + { + type: StepType.INSTALL, + content: [ + { + type: 'text', + text: tct( + 'Install our SDK using your preferred package manager, the minimum version that supports profiling is [code:7.60.0].', + { + code: , + } + ), + }, + installSnippetBlock, + ], + }, + ], + configure: params => [ + { + title: t('Add Document-Policy: js-profiling header'), + content: [ + { + type: 'text', + text: tct( + 'For the JavaScript browser profiler to start, the document response header needs to include a [code:Document-Policy] header key with the [code:js-profiling] value.', + { + code: , + } + ), + }, + ...getDefaultProfilingHeaderContent(), + ], + }, + { + type: StepType.CONFIGURE, + content: [ + { + type: 'text', + text: tct( + 'Set up the [code:browserTracingIntegration] and [code:browserProfilingIntegration] in your [code:Sentry.init()] call.', + { + code: , + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'Javascript', + value: 'javascript', + language: 'javascript', + code: browserProfilingSnippet(params), + }, + ], + }, + { + type: 'text', + text: tct( + 'For more detailed information, see the [link:browser profiling documentation].', + { + link: , + } + ), + }, + ], + }, + ], + verify: () => [ + { + type: StepType.VERIFY, + content: [ + { + type: 'text', + text: t( + 'Verify that profiling is working correctly by simply using your application.' + ), + }, + ], + }, + ], +}); + +export const profilingFullStack = < + PlatformOption extends BasePlatformOptions = BasePlatformOptions, +>({ + packageName, + browserProfilingLink, + nodeProfilingLink, + getProfilingHeaderContent = getDefaultProfilingHeaderContent, +}: { + browserProfilingLink: string; + nodeProfilingLink: string; + packageName: `@sentry/${string}`; + getProfilingHeaderContent?: (params: DocsParams) => ContentBlock[]; +}): OnboardingConfig => ({ + install: () => [ + { + type: StepType.INSTALL, + content: [ + { + type: 'text', + text: tct( + 'To enable profiling, add [code:@sentry/profiling-node] to your imports and make sure [packageName] is up-to-date. The minimum version of [packageName] that supports node and browser profiling is [code:7.60.0].', + { + code: , + packageName: {packageName}, + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'npm', + language: 'bash', + code: `npm install ${packageName} @sentry/profiling-node --save`, + }, + { + label: 'yarn', + language: 'bash', + code: `yarn add ${packageName} @sentry/profiling-node`, + }, + { + label: 'pnpm', + language: 'bash', + code: `pnpm add ${packageName} @sentry/profiling-node`, + }, + ], + }, + ], + }, + ], + configure: params => [ + { + title: t('Configure Node Profiling'), + content: [ + { + type: 'text', + text: tct( + 'Set up the [code:nodeProfilingIntegration] in your server-side [code:Sentry.init()] call.', + { + code: , + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'Javascript', + language: 'javascript', + code: ` + const { nodeProfilingIntegration } = require("@sentry/profiling-node"); + + Sentry.init({ + dsn: "${params.dsn.public}", + integrations: [ + nodeProfilingIntegration(), + ], + // Tracing must be enabled for profiling to work + tracesSampleRate: 1.0, // Capture 100% of the transactions${ + params.profilingOptions?.defaultProfilingMode === 'continuous' + ? ` + // Set sampling rate for profiling - this is evaluated only once per SDK.init call + profileSessionSampleRate: 1.0, + // Trace lifecycle automatically enables profiling during active traces + profileLifecycle: 'trace',` + : ` + // Set sampling rate for profiling - this is evaluated only once per SDK.init call + profilesSampleRate: 1.0,` + } + });${ + params.profilingOptions?.defaultProfilingMode === 'continuous' + ? ` + + // Profiling happens automatically after setting it up with \`Sentry.init()\`. + // All spans (unless those discarded by sampling) will have profiling data attached to them. + Sentry.startSpan({ + name: "My Span", + }, () => { + // The code executed here will be profiled + });` + : '' + }`, + }, + ], + }, + { + type: 'text', + text: tct('For more information see the [link:node profiling documentation].', { + link: , + }), + }, + ], + }, + { + title: t('Configure Browser Profiling'), + content: [ + { + type: 'custom', + content: , + }, + { + type: 'text', + text: tct( + 'Set up the [code:browserProfilingIntegration] in your client-side [code:Sentry.init()] call.', + { + code: , + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'Javascript', + language: 'javascript', + code: browserProfilingSnippet(params), + }, + ], + }, + { + type: 'text', + text: tct( + 'For the JavaScript browser profiler to start, the document response header needs to include a [code:Document-Policy] header key with the [code:js-profiling] value.', + { + code: , + } + ), + }, + ...getProfilingHeaderContent(params), + { + type: 'text', + text: tct( + 'For more detailed information, see the [link:browser profiling documentation].', + { + link: , + } + ), + }, + ], + }, + ], + verify: () => [ + { + type: StepType.VERIFY, + content: [ + { + type: 'text', + text: t( + 'Verify that profiling is working correctly by simply using your application.' + ), + }, + ], + }, + ], }); diff --git a/static/app/gettingStartedDocs/javascript/nextjs/index.tsx b/static/app/gettingStartedDocs/javascript/nextjs/index.tsx index a0dbc1d29b2aba..b5be75ec061dd0 100644 --- a/static/app/gettingStartedDocs/javascript/nextjs/index.tsx +++ b/static/app/gettingStartedDocs/javascript/nextjs/index.tsx @@ -1,14 +1,15 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; +import {tct} from 'sentry/locale'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; import {performance} from './performance'; -import {profiling} from './profiling'; import {replay} from './replay'; const docs: Docs = { @@ -18,8 +19,69 @@ const docs: Docs = { performanceOnboarding: performance, crashReportOnboarding: crashReport, featureFlagOnboarding: featureFlag, - profilingOnboarding: profiling, - logsOnboarding: logs, + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/nextjs', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling/node-profiling/', + getProfilingHeaderContent: () => [ + { + type: 'text', + text: tct( + 'In Next.js you can configure document response headers via the headers option in [code:next.config.js]:', + { + code: , + } + ), + }, + { + type: 'code', + tabs: [ + { + label: 'ESM', + language: 'javascript', + filename: 'next.config.js', + code: ` + export default withSentryConfig({ + async headers() { + return [{ + source: "/:path*", + headers: [{ + key: "Document-Policy", + value: "js-profiling", + }], + }]; + }, + // ... other Next.js config options + });`, + }, + { + label: 'CJS', + language: 'javascript', + filename: 'next.config.js', + code: ` + module.exports = withSentryConfig({ + async headers() { + return [{ + source: "/:path*", + headers: [{ + key: "Document-Policy", + value: "js-profiling", + }], + }]; + }, + // ... other Next.js config options + });`, + }, + ], + }, + ], + }), + logsOnboarding: logsFullStack({ + docsPlatform: 'nextjs', + packageName: '@sentry/nextjs', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'nextjs', packageName: '@sentry/nextjs', diff --git a/static/app/gettingStartedDocs/javascript/nextjs/logs.tsx b/static/app/gettingStartedDocs/javascript/nextjs/logs.tsx deleted file mode 100644 index 0f56dda03e752f..00000000000000 --- a/static/app/gettingStartedDocs/javascript/nextjs/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'nextjs', - packageName: '@sentry/nextjs', -}); diff --git a/static/app/gettingStartedDocs/javascript/nextjs/profiling.tsx b/static/app/gettingStartedDocs/javascript/nextjs/profiling.tsx deleted file mode 100644 index 5320fcbcc7eeb5..00000000000000 --- a/static/app/gettingStartedDocs/javascript/nextjs/profiling.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import {tct} from 'sentry/locale'; -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/nextjs', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/nextjs/profiling/node-profiling/', - getProfilingHeaderContent: () => [ - { - type: 'text', - text: tct( - 'In Next.js you can configure document response headers via the headers option in [code:next.config.js]:', - { - code: , - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'ESM', - language: 'javascript', - filename: 'next.config.js', - code: ` -export default withSentryConfig({ - async headers() { - return [{ - source: "/:path*", - headers: [{ - key: "Document-Policy", - value: "js-profiling", - }], - }]; - }, - // ... other Next.js config options -});`, - }, - { - label: 'CJS', - language: 'javascript', - filename: 'next.config.js', - code: ` -module.exports = withSentryConfig({ - async headers() { - return [{ - source: "/:path*", - headers: [{ - key: "Document-Policy", - value: "js-profiling", - }], - }]; - }, - // ... other Next.js config options -});`, - }, - ], - }, - ], -}); diff --git a/static/app/gettingStartedDocs/javascript/nuxt/index.tsx b/static/app/gettingStartedDocs/javascript/nuxt/index.tsx index 4c25d9bc218676..2d27e3bef4901c 100644 --- a/static/app/gettingStartedDocs/javascript/nuxt/index.tsx +++ b/static/app/gettingStartedDocs/javascript/nuxt/index.tsx @@ -1,23 +1,31 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; +import {installSnippetBlock} from './utils'; const docs: Docs = { onboarding, feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/nuxt/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'nuxt', + packageName: '@sentry/nuxt', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'nuxt', packageName: '@sentry/nuxt', diff --git a/static/app/gettingStartedDocs/javascript/nuxt/logs.tsx b/static/app/gettingStartedDocs/javascript/nuxt/logs.tsx deleted file mode 100644 index ed5ee3a359f49a..00000000000000 --- a/static/app/gettingStartedDocs/javascript/nuxt/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'nuxt', - packageName: '@sentry/nuxt', -}); diff --git a/static/app/gettingStartedDocs/javascript/nuxt/profiling.tsx b/static/app/gettingStartedDocs/javascript/nuxt/profiling.tsx deleted file mode 100644 index 77c658df81409c..00000000000000 --- a/static/app/gettingStartedDocs/javascript/nuxt/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/nuxt/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/react-router/index.tsx b/static/app/gettingStartedDocs/javascript/react-router/index.tsx index 3fe6131f835a16..c844ec8b5d6b06 100644 --- a/static/app/gettingStartedDocs/javascript/react-router/index.tsx +++ b/static/app/gettingStartedDocs/javascript/react-router/index.tsx @@ -1,13 +1,13 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; import {performance} from './performance'; -import {profiling} from './profiling'; import {replay} from './replay'; const docs: Docs = { @@ -16,9 +16,18 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, crashReportOnboarding: crashReport, performanceOnboarding: performance, - profilingOnboarding: profiling, + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/react-router', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/react-router/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/react-router/profiling/node-profiling/', + }), agentMonitoringOnboarding: agentMonitoring, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'react-router', + packageName: '@sentry/react-router', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'react-router', packageName: '@sentry/react-router', diff --git a/static/app/gettingStartedDocs/javascript/react-router/logs.tsx b/static/app/gettingStartedDocs/javascript/react-router/logs.tsx deleted file mode 100644 index d07f6b5e6e9161..00000000000000 --- a/static/app/gettingStartedDocs/javascript/react-router/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'react-router', - packageName: '@sentry/react-router', -}); diff --git a/static/app/gettingStartedDocs/javascript/react-router/profiling.tsx b/static/app/gettingStartedDocs/javascript/react-router/profiling.tsx deleted file mode 100644 index 99181038ee4dc8..00000000000000 --- a/static/app/gettingStartedDocs/javascript/react-router/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/react-router', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/react-router/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/react-router/profiling/node-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/react/index.tsx b/static/app/gettingStartedDocs/javascript/react/index.tsx index b31f174acd40a0..9a1eac83b077b5 100644 --- a/static/app/gettingStartedDocs/javascript/react/index.tsx +++ b/static/app/gettingStartedDocs/javascript/react/index.tsx @@ -1,13 +1,13 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; -import {logs} from 'sentry/gettingStartedDocs/javascript/react/logs'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; import {onboarding} from './onboarding'; import {performance} from './performance'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock} from './utils'; @@ -17,8 +17,16 @@ const docs: Docs = { replayOnboarding: replay, performanceOnboarding: performance, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, - logsOnboarding: logs, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/react/profiling/browser-profiling/', + }), + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'react', + packageName: '@sentry/react', + }), featureFlagOnboarding: featureFlag, metricsOnboarding: metrics({ installSnippetBlock, diff --git a/static/app/gettingStartedDocs/javascript/react/logs.tsx b/static/app/gettingStartedDocs/javascript/react/logs.tsx deleted file mode 100644 index 2868ca22548df8..00000000000000 --- a/static/app/gettingStartedDocs/javascript/react/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'react', - packageName: '@sentry/react', -}); diff --git a/static/app/gettingStartedDocs/javascript/react/profiling.tsx b/static/app/gettingStartedDocs/javascript/react/profiling.tsx deleted file mode 100644 index eecd58bdf6da9c..00000000000000 --- a/static/app/gettingStartedDocs/javascript/react/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/react/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/remix/index.tsx b/static/app/gettingStartedDocs/javascript/remix/index.tsx index 4014f341b3672d..0eab5c553f0710 100644 --- a/static/app/gettingStartedDocs/javascript/remix/index.tsx +++ b/static/app/gettingStartedDocs/javascript/remix/index.tsx @@ -1,13 +1,13 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; const docs: Docs = { @@ -16,13 +16,22 @@ const docs: Docs = { replayOnboarding: replay, crashReportOnboarding: crashReport, featureFlagOnboarding: featureFlag, - profilingOnboarding: profiling, + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/remix', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/remix/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/remix/profiling/node-profiling/', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'remix', packageName: '@sentry/remix', }), agentMonitoringOnboarding: agentMonitoring, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'remix', + packageName: '@sentry/remix', + }), }; export default docs; diff --git a/static/app/gettingStartedDocs/javascript/remix/logs.tsx b/static/app/gettingStartedDocs/javascript/remix/logs.tsx deleted file mode 100644 index 40bda49745d9d9..00000000000000 --- a/static/app/gettingStartedDocs/javascript/remix/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'remix', - packageName: '@sentry/remix', -}); diff --git a/static/app/gettingStartedDocs/javascript/remix/profiling.tsx b/static/app/gettingStartedDocs/javascript/remix/profiling.tsx deleted file mode 100644 index 202fc3573cdd80..00000000000000 --- a/static/app/gettingStartedDocs/javascript/remix/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/remix', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/remix/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/remix/profiling/node-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/solid/index.tsx b/static/app/gettingStartedDocs/javascript/solid/index.tsx index 743cac1ebb46e5..e73d90eb700936 100644 --- a/static/app/gettingStartedDocs/javascript/solid/index.tsx +++ b/static/app/gettingStartedDocs/javascript/solid/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock} from './utils'; @@ -15,9 +15,17 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/solid/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'solid', + packageName: '@sentry/solid', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'solid', diff --git a/static/app/gettingStartedDocs/javascript/solid/logs.tsx b/static/app/gettingStartedDocs/javascript/solid/logs.tsx deleted file mode 100644 index 566dadfeda52bd..00000000000000 --- a/static/app/gettingStartedDocs/javascript/solid/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'solid', - packageName: '@sentry/solid', -}); diff --git a/static/app/gettingStartedDocs/javascript/solid/profiling.tsx b/static/app/gettingStartedDocs/javascript/solid/profiling.tsx deleted file mode 100644 index ee07ed1c3a96b9..00000000000000 --- a/static/app/gettingStartedDocs/javascript/solid/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/solid/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/solidstart/index.tsx b/static/app/gettingStartedDocs/javascript/solidstart/index.tsx index a25ff1f471712c..cf46f0ebe2f42f 100644 --- a/static/app/gettingStartedDocs/javascript/solidstart/index.tsx +++ b/static/app/gettingStartedDocs/javascript/solidstart/index.tsx @@ -1,14 +1,15 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; +import {installSnippetBlock} from './utils'; const docs: Docs = { onboarding, @@ -16,9 +17,16 @@ const docs: Docs = { replayOnboarding: replay, crashReportOnboarding: crashReport, featureFlagOnboarding: featureFlag, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/solidstart/profiling/browser-profiling/', + }), agentMonitoringOnboarding: agentMonitoring, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'solidstart', + packageName: '@sentry/solidstart', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'solidstart', packageName: '@sentry/solidstart', diff --git a/static/app/gettingStartedDocs/javascript/solidstart/logs.tsx b/static/app/gettingStartedDocs/javascript/solidstart/logs.tsx deleted file mode 100644 index d3a471b2bb792e..00000000000000 --- a/static/app/gettingStartedDocs/javascript/solidstart/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'solidstart', - packageName: '@sentry/solidstart', -}); diff --git a/static/app/gettingStartedDocs/javascript/solidstart/profiling.tsx b/static/app/gettingStartedDocs/javascript/solidstart/profiling.tsx deleted file mode 100644 index 43e829262c85ba..00000000000000 --- a/static/app/gettingStartedDocs/javascript/solidstart/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/solidstart/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/svelte/index.tsx b/static/app/gettingStartedDocs/javascript/svelte/index.tsx index 7c46b15477bab3..1b4a9461dc7348 100644 --- a/static/app/gettingStartedDocs/javascript/svelte/index.tsx +++ b/static/app/gettingStartedDocs/javascript/svelte/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock} from './utils'; @@ -15,9 +15,17 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/svelte/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'svelte', + packageName: '@sentry/svelte', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'svelte', diff --git a/static/app/gettingStartedDocs/javascript/svelte/logs.tsx b/static/app/gettingStartedDocs/javascript/svelte/logs.tsx deleted file mode 100644 index 87d45d31020608..00000000000000 --- a/static/app/gettingStartedDocs/javascript/svelte/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'svelte', - packageName: '@sentry/svelte', -}); diff --git a/static/app/gettingStartedDocs/javascript/svelte/profiling.tsx b/static/app/gettingStartedDocs/javascript/svelte/profiling.tsx deleted file mode 100644 index cdbf6517e5e135..00000000000000 --- a/static/app/gettingStartedDocs/javascript/svelte/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/svelte/profiling/browser-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/sveltekit/index.tsx b/static/app/gettingStartedDocs/javascript/sveltekit/index.tsx index 0a4f4352c3a54c..4f18babcff7ea8 100644 --- a/static/app/gettingStartedDocs/javascript/sveltekit/index.tsx +++ b/static/app/gettingStartedDocs/javascript/sveltekit/index.tsx @@ -1,13 +1,13 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; const docs: Docs = { @@ -16,9 +16,18 @@ const docs: Docs = { replayOnboarding: replay, crashReportOnboarding: crashReport, featureFlagOnboarding: featureFlag, - profilingOnboarding: profiling, + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/sveltekit', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/profiling/node-profiling/', + }), agentMonitoringOnboarding: agentMonitoring, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'sveltekit', + packageName: '@sentry/sveltekit', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'sveltekit', packageName: '@sentry/sveltekit', diff --git a/static/app/gettingStartedDocs/javascript/sveltekit/logs.tsx b/static/app/gettingStartedDocs/javascript/sveltekit/logs.tsx deleted file mode 100644 index 7e13f726c077fd..00000000000000 --- a/static/app/gettingStartedDocs/javascript/sveltekit/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'sveltekit', - packageName: '@sentry/sveltekit', -}); diff --git a/static/app/gettingStartedDocs/javascript/sveltekit/profiling.tsx b/static/app/gettingStartedDocs/javascript/sveltekit/profiling.tsx deleted file mode 100644 index d2f58f9eba5d0c..00000000000000 --- a/static/app/gettingStartedDocs/javascript/sveltekit/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/sveltekit', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/sveltekit/profiling/node-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx index 1d2f6f122f2e12..01ece642171b4f 100644 --- a/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx +++ b/static/app/gettingStartedDocs/javascript/tanstackstart-react/index.tsx @@ -1,16 +1,25 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import {logsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profilingFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {agentMonitoring} from './agentMonitoring'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; const docs: Docs = { onboarding, - profilingOnboarding: profiling, + profilingOnboarding: profilingFullStack({ + packageName: '@sentry/tanstackstart-react', + browserProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/profiling/browser-profiling/', + nodeProfilingLink: + 'https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/profiling/node-profiling/', + }), agentMonitoringOnboarding: agentMonitoring, - logsOnboarding: logs, + logsOnboarding: logsFullStack({ + docsPlatform: 'tanstackstart-react', + packageName: '@sentry/tanstackstart-react', + }), metricsOnboarding: metricsFullStack({ docsPlatform: 'tanstackstart-react', packageName: '@sentry/tanstackstart-react', diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/logs.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/logs.tsx deleted file mode 100644 index cc560dbd3ab86a..00000000000000 --- a/static/app/gettingStartedDocs/javascript/tanstackstart-react/logs.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import {getJavascriptLogsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const logs = getJavascriptLogsFullStackOnboarding({ - docsPlatform: 'tanstackstart-react', - packageName: '@sentry/tanstackstart-react', -}); diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/profiling.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/profiling.tsx deleted file mode 100644 index cd2cb44d38c36d..00000000000000 --- a/static/app/gettingStartedDocs/javascript/tanstackstart-react/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -export const profiling = getJavascriptFullStackOnboarding({ - packageName: '@sentry/tanstackstart-react', - browserProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/profiling/browser-profiling/', - nodeProfilingLink: - 'https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/profiling/node-profiling/', -}); diff --git a/static/app/gettingStartedDocs/javascript/vue/index.tsx b/static/app/gettingStartedDocs/javascript/vue/index.tsx index 5ae708d1d3a9b1..24135f25860159 100644 --- a/static/app/gettingStartedDocs/javascript/vue/index.tsx +++ b/static/app/gettingStartedDocs/javascript/vue/index.tsx @@ -1,12 +1,12 @@ import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag'; +import {logs} from 'sentry/gettingStartedDocs/javascript/javascript/logs'; import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics'; +import {profiling} from 'sentry/gettingStartedDocs/javascript/javascript/profiling'; import {crashReport} from './crashReport'; import {feedback} from './feedback'; -import {logs} from './logs'; import {onboarding} from './onboarding'; -import {profiling} from './profiling'; import {replay} from './replay'; import {installSnippetBlock, platformOptions, type PlatformOptions} from './utils'; @@ -16,9 +16,17 @@ const docs: Docs = { feedbackOnboardingNpm: feedback, replayOnboarding: replay, crashReportOnboarding: crashReport, - profilingOnboarding: profiling, + profilingOnboarding: profiling({ + installSnippetBlock, + docsLink: + 'https://docs.sentry.io/platforms/javascript/guides/vue/profiling/browser-profiling/', + }), featureFlagOnboarding: featureFlag, - logsOnboarding: logs, + logsOnboarding: logs({ + installSnippetBlock, + docsPlatform: 'vue', + packageName: '@sentry/vue', + }), metricsOnboarding: metrics({ installSnippetBlock, docsPlatform: 'vue', diff --git a/static/app/gettingStartedDocs/javascript/vue/logs.tsx b/static/app/gettingStartedDocs/javascript/vue/logs.tsx deleted file mode 100644 index 169fdc7b99bd24..00000000000000 --- a/static/app/gettingStartedDocs/javascript/vue/logs.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptLogsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const logs = getJavascriptLogsOnboarding({ - installSnippetBlock, - docsPlatform: 'vue', - packageName: '@sentry/vue', -}); diff --git a/static/app/gettingStartedDocs/javascript/vue/profiling.tsx b/static/app/gettingStartedDocs/javascript/vue/profiling.tsx deleted file mode 100644 index f6553d1eb6b06f..00000000000000 --- a/static/app/gettingStartedDocs/javascript/vue/profiling.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {getJavascriptProfilingOnboarding} from 'sentry/utils/gettingStartedDocs/javascript'; - -import {installSnippetBlock} from './utils'; - -export const profiling = getJavascriptProfilingOnboarding({ - installSnippetBlock, - docsLink: - 'https://docs.sentry.io/platforms/javascript/guides/vue/profiling/browser-profiling/', -}); diff --git a/static/app/utils/gettingStartedDocs/javascript.tsx b/static/app/utils/gettingStartedDocs/javascript.tsx deleted file mode 100644 index 2916d1381dac3d..00000000000000 --- a/static/app/utils/gettingStartedDocs/javascript.tsx +++ /dev/null @@ -1,571 +0,0 @@ -import {Alert} from 'sentry/components/core/alert'; -import {ExternalLink} from 'sentry/components/core/link'; -import { - StepType, - type BasePlatformOptions, - type ContentBlock, - type DocsParams, - type OnboardingConfig, -} from 'sentry/components/onboarding/gettingStartedDoc/types'; -import {t, tct} from 'sentry/locale'; - -function BrowserProfilingBetaWarning() { - return ( - - {tct( - `Browser profiling is currently in Beta as we wait for the JS Self Profiling spec to gain wider support. You can read the detailed explanation [explainer].`, - { - explainer: ( - - {t('here')} - - ), - } - )} - - ); -} - -const browserProfilingSnippet = (params: DocsParams) => ` -Sentry.init({ - dsn: "${params.dsn.public}", - integrations: [ - Sentry.browserTracingIntegration(), - Sentry.browserProfilingIntegration() - ], - // Tracing - tracesSampleRate: 1.0, // Capture 100% of the transactions - // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled - tracePropagationTargets: ["localhost", /^https:\\/\\/yourserver\\.io\\/api/], - // Set profilesSampleRate to 1.0 to profile every transaction. - // Since profilesSampleRate is relative to tracesSampleRate, - // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate - // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would - // results in 25% of transactions being profiled (0.5*0.5=0.25) - profilesSampleRate: 1.0 -});`; - -const getDefaultProfilingHeaderContent = (): ContentBlock[] => [ - { - type: 'text', - text: tct( - "How you do this will depend on your server. If you're using a server like Express, you'll be able to use the [link:response.set] function.", - { - link: , - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'JavaScript', - language: 'javascript', - code: ` -app.get("/", (request, response) => { -response.set("Document-Policy", "js-profiling"); -response.sendFile("index.html"); -}); - `, - }, - ], - }, -]; - -export const getJavascriptProfilingOnboarding = < - PlatformOptions extends BasePlatformOptions = BasePlatformOptions, ->({ - installSnippetBlock, - docsLink, -}: { - docsLink: string; - installSnippetBlock: ContentBlock; -}): OnboardingConfig => ({ - introduction: () => , - install: () => [ - { - type: StepType.INSTALL, - content: [ - { - type: 'text', - text: tct( - 'Install our SDK using your preferred package manager, the minimum version that supports profiling is [code:7.60.0].', - { - code: , - } - ), - }, - installSnippetBlock, - ], - }, - ], - configure: params => [ - { - title: t('Add Document-Policy: js-profiling header'), - content: [ - { - type: 'text', - text: tct( - 'For the JavaScript browser profiler to start, the document response header needs to include a [code:Document-Policy] header key with the [code:js-profiling] value.', - { - code: , - } - ), - }, - ...getDefaultProfilingHeaderContent(), - ], - }, - { - type: StepType.CONFIGURE, - content: [ - { - type: 'text', - text: tct( - 'Set up the [code:browserTracingIntegration] and [code:browserProfilingIntegration] in your [code:Sentry.init()] call.', - { - code: , - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'Javascript', - value: 'javascript', - language: 'javascript', - code: browserProfilingSnippet(params), - }, - ], - }, - { - type: 'text', - text: tct( - 'For more detailed information, see the [link:browser profiling documentation].', - { - link: , - } - ), - }, - ], - }, - ], - verify: () => [ - { - type: StepType.VERIFY, - content: [ - { - type: 'text', - text: t( - 'Verify that profiling is working correctly by simply using your application.' - ), - }, - ], - }, - ], -}); - -export const getJavascriptLogsOnboarding = < - PlatformOptions extends BasePlatformOptions = BasePlatformOptions, ->({ - docsPlatform, - packageName, - installSnippetBlock, -}: { - docsPlatform: string; - installSnippetBlock: ContentBlock; - packageName: `@sentry/${string}`; -}): OnboardingConfig => ({ - install: () => [ - { - type: StepType.INSTALL, - content: [ - { - type: 'text', - text: tct( - 'Add the Sentry SDK as a dependency. The minimum version of [packageName] that supports logs is [code:9.41.0].', - { - code: , - packageName: {packageName}, - } - ), - }, - installSnippetBlock, - { - type: 'text', - text: tct( - 'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.', - { - link: ( - - ), - } - ), - }, - ], - }, - ], - configure: (params: DocsParams) => [ - { - type: StepType.CONFIGURE, - content: [ - { - type: 'text', - text: tct( - 'Enable Sentry logs by adding [code:enableLogs: true] to your [code:Sentry.init()] configuration.', - {code: } - ), - }, - { - type: 'code', - language: 'javascript', - code: ` -import * as Sentry from "${packageName}"; - -Sentry.init({ - dsn: "${params.dsn.public}", - integrations: [ - // send console.log, console.warn, and console.error calls as logs to Sentry - Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), - ], - // Enable logs to be sent to Sentry - enableLogs: true, -}); -`, - }, - { - type: 'text', - text: tct('For more detailed information, see the [link:logs documentation].', { - link: ( - - ), - }), - }, - ], - }, - ], - verify: () => [ - { - type: StepType.VERIFY, - content: [ - { - type: 'text', - text: t('Send a test log from your app to verify logs are arriving in Sentry.'), - }, - { - type: 'code', - language: 'jsx', - code: `import * as Sentry from "${packageName}"; - -Sentry.logger.info('User triggered test log', { log_source: 'sentry_test' })`, - }, - ], - }, - ], -}); - -export const getJavascriptLogsFullStackOnboarding = < - PlatformOptions extends BasePlatformOptions = BasePlatformOptions, ->({ - docsPlatform, - packageName, -}: { - docsPlatform: string; - packageName: `@sentry/${string}`; -}): OnboardingConfig => ({ - install: () => [ - { - type: StepType.INSTALL, - content: [ - { - type: 'text', - text: tct( - 'To add logs make sure [packageName] is up-to-date. The minimum version of [packageName] that supports logs is [code:9.41.0].', - { - code: , - packageName: {packageName}, - } - ), - }, - { - type: 'code', - language: 'bash', - tabs: [ - { - label: 'npm', - value: 'npm', - language: 'bash', - code: `npm install ${packageName} --save`, - }, - { - label: 'yarn', - value: 'yarn', - language: 'bash', - code: `yarn add ${packageName}`, - }, - { - label: 'pnpm', - value: 'pnpm', - language: 'bash', - code: `pnpm add ${packageName}`, - }, - ], - }, - { - type: 'text', - text: tct( - 'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.', - { - link: ( - - ), - } - ), - }, - ], - }, - ], - configure: params => [ - { - type: StepType.CONFIGURE, - content: [ - { - type: 'text', - text: tct( - 'Enable Sentry logs by adding [code:enableLogs: true] to your [code:Sentry.init()] configuration.', - {code: } - ), - }, - { - type: 'code', - language: 'javascript', - code: ` -import * as Sentry from "${packageName}"; - -Sentry.init({ - dsn: "${params.dsn.public}", - integrations: [ - // send console.log, console.warn, and console.error calls as logs to Sentry - Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }), - ], - // Enable logs to be sent to Sentry - enableLogs: true, -}); -`, - }, - { - type: 'text', - text: tct('For more detailed information, see the [link:logs documentation].', { - link: ( - - ), - }), - }, - ], - }, - ], - verify: () => [ - { - type: StepType.VERIFY, - content: [ - { - type: 'text', - text: t( - 'To confirm that logs are working correctly, run your application and check the Sentry logs page for the collected logs.' - ), - }, - { - type: 'code', - language: 'jsx', - code: `import * as Sentry from "${packageName}"; - -Sentry.logger.info('User triggered test log', { log_source: 'sentry_test' })`, - }, - ], - }, - ], -}); - -export const getJavascriptFullStackOnboarding = < - PlatformOptions extends BasePlatformOptions = BasePlatformOptions, ->({ - packageName, - browserProfilingLink, - nodeProfilingLink, - getProfilingHeaderContent = getDefaultProfilingHeaderContent, -}: { - browserProfilingLink: string; - nodeProfilingLink: string; - packageName: `@sentry/${string}`; - getProfilingHeaderContent?: (params: DocsParams) => ContentBlock[]; -}): OnboardingConfig => ({ - install: () => [ - { - type: StepType.INSTALL, - content: [ - { - type: 'text', - text: tct( - 'To enable profiling, add [code:@sentry/profiling-node] to your imports and make sure [packageName] is up-to-date. The minimum version of [packageName] that supports node and browser profiling is [code:7.60.0].', - { - code: , - packageName: {packageName}, - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'npm', - language: 'bash', - code: `npm install ${packageName} @sentry/profiling-node --save`, - }, - { - label: 'yarn', - language: 'bash', - code: `yarn add ${packageName} @sentry/profiling-node`, - }, - { - label: 'pnpm', - language: 'bash', - code: `pnpm add ${packageName} @sentry/profiling-node`, - }, - ], - }, - ], - }, - ], - configure: params => [ - { - title: t('Configure Node Profiling'), - content: [ - { - type: 'text', - text: tct( - 'Set up the [code:nodeProfilingIntegration] in your server-side [code:Sentry.init()] call.', - { - code: , - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'Javascript', - language: 'javascript', - code: ` - const { nodeProfilingIntegration } = require("@sentry/profiling-node"); - - Sentry.init({ - dsn: "${params.dsn.public}", - integrations: [ - nodeProfilingIntegration(), - ], - // Tracing must be enabled for profiling to work - tracesSampleRate: 1.0, // Capture 100% of the transactions${ - params.profilingOptions?.defaultProfilingMode === 'continuous' - ? ` - // Set sampling rate for profiling - this is evaluated only once per SDK.init call - profileSessionSampleRate: 1.0, - // Trace lifecycle automatically enables profiling during active traces - profileLifecycle: 'trace',` - : ` - // Set sampling rate for profiling - this is evaluated only once per SDK.init call - profilesSampleRate: 1.0,` - } - });${ - params.profilingOptions?.defaultProfilingMode === 'continuous' - ? ` - - // Profiling happens automatically after setting it up with \`Sentry.init()\`. - // All spans (unless those discarded by sampling) will have profiling data attached to them. - Sentry.startSpan({ - name: "My Span", - }, () => { - // The code executed here will be profiled - });` - : '' - }`, - }, - ], - }, - { - type: 'text', - text: tct('For more information see the [link:node profiling documentation].', { - link: , - }), - }, - ], - }, - { - title: t('Configure Browser Profiling'), - content: [ - { - type: 'custom', - content: , - }, - { - type: 'text', - text: tct( - 'Set up the [code:browserProfilingIntegration] in your client-side [code:Sentry.init()] call.', - { - code: , - } - ), - }, - { - type: 'code', - tabs: [ - { - label: 'Javascript', - language: 'javascript', - code: browserProfilingSnippet(params), - }, - ], - }, - { - type: 'text', - text: tct( - 'For the JavaScript browser profiler to start, the document response header needs to include a [code:Document-Policy] header key with the [code:js-profiling] value.', - { - code: , - } - ), - }, - ...getProfilingHeaderContent(params), - { - type: 'text', - text: tct( - 'For more detailed information, see the [link:browser profiling documentation].', - { - link: , - } - ), - }, - ], - }, - ], - verify: () => [ - { - type: StepType.VERIFY, - content: [ - { - type: 'text', - text: t( - 'Verify that profiling is working correctly by simply using your application.' - ), - }, - ], - }, - ], -});