ref(replay onboarding): add js loader instructions to some be platforms (#61737)

relates to https://github.com/getsentry/sentry/issues/61069

In this PR:
- Make the jsLoader install instructions reusable rather than javascript
specific (nothing is changing between platforms)
- Add some eligible backend platforms to replay onboarding (not all;
full list is [here](https://github.com/getsentry/sentry/issues/61070))
- Out of these added, I added js loader instructions (under the "I have
an HTML template") for the following:
       - bun, dotnet-aspnetcore, elixir, java-spring, java-spring-boot
- The rest of the BE files have not been converted to the "new"
structure yet
- The "I have a JS framework" tab for all BE platforms is not complete

<img width="528" alt="SCR-20231213-osrv"
src="https://github.com/getsentry/sentry/assets/56095982/a8861fe3-a6ab-415d-9e71-4b6b449aa914">

static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx

@@ -122,7 +122,7 @@ export function OnboardingLayout({
               platform={platformKey}
             />
           )}
-          {platformOptions ? (
+          {platformOptions && configType !== 'replayOnboardingJsLoader' ? (
             <PlatformOptionsControl platformOptions={platformOptions} />
           ) : null}
         </Header>

static/app/components/replaysOnboarding/sidebar.tsx

@@ -20,6 +20,7 @@ import SidebarPanel from 'sentry/components/sidebar/sidebarPanel';
 import {CommonSidebarProps, SidebarPanelKey} from 'sentry/components/sidebar/types';
 import {Tooltip} from 'sentry/components/tooltip';
 import {
+  backend,
   replayJsLoaderInstructionsPlatformList,
   replayPlatforms,
 } from 'sentry/data/platformCategories';
@@ -98,9 +99,19 @@ function ReplaysOnboardingSidebar(props: CommonSidebarProps) {
     ];
   }, [supportedProjects, unsupportedProjects]);
 
+  const showLoaderInstructions =
+    currentProject &&
+    currentProject.platform &&
+    replayJsLoaderInstructionsPlatformList.includes(currentProject.platform);
+
+  const defaultTab =
+    currentProject && currentProject.platform && backend.includes(currentProject.platform)
+      ? 'jsLoader'
+      : 'npm';
+
   const {getParamValue: setupMode, setParamValue: setSetupMode} = useUrlParams(
     'mode',
-    'npm' // this default  needs to be changed later. for backend platforms, should default to jsLoader
+    defaultTab
   );
 
   const selectedProject = currentProject ?? projects[0] ?? allProjects[0];
@@ -108,11 +119,6 @@ function ReplaysOnboardingSidebar(props: CommonSidebarProps) {
     return null;
   }
 
-  const showLoaderInstructions =
-    currentProject &&
-    currentProject.platform &&
-    replayJsLoaderInstructionsPlatformList.includes(currentProject.platform);
-
   return (
     <TaskSidebarPanel
       orientation={orientation}
@@ -238,7 +244,9 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     );
   }
 
-  if (!currentPlatform || !hasOnboardingContents) {
+  const newOnboarding = organization.features.includes('session-replay-new-zero-state');
+
+  if (!currentPlatform || (!hasOnboardingContents && !newOnboarding)) {
     return (
       <Fragment>
         <div>
@@ -260,8 +268,6 @@ function OnboardingContent({currentProject}: {currentProject: Project}) {
     );
   }
 
-  const newOnboarding = organization.features.includes('session-replay-new-zero-state');
-
   return (
     <Fragment>
       <IntroText>

static/app/data/platformCategories.tsx

@@ -293,11 +293,40 @@ export const releaseHealth: PlatformKey[] = [
   'native-qt',
 ];
 
-export const replayPlatforms: readonly PlatformKey[] = [
+// These are the backend platforms that can set up replay -- e.g. they can be set up via a linked JS framework or via JS loader.
+// Note: not currently comprehensive -- only included ones that are also in the `backend` platforms listed above
+// TODO: add all the platforms
+const replayBackendPlatforms: readonly PlatformKey[] = [
+  'bun',
+  'dotnet-aspnetcore',
+  'dotnet-aspnet',
+  'elixir',
+  'java-spring',
+  'java-spring-boot',
+  'node',
+  'node-express',
+  'php',
+  'php-laravel',
+  'php-symfony',
+  'python-aiohttp',
+  'python-bottle',
+  'python-django',
+  'python-falcon',
+  'python-fastapi',
+  'python-flask',
+  'python-pyramid',
+  'python-quart',
+  'python-sanic',
+  'python-starlette',
+  'python-tornado',
+  'ruby-rails',
+];
+
+// These are the frontend platforms that can set up replay.
+const replayFrontendPlatforms: readonly PlatformKey[] = [
   'capacitor',
   'electron',
   'javascript-angular',
-  // 'javascript-angularjs', // Unsupported, angularjs requires the v6.x core SDK
   'javascript-astro',
   'javascript-backbone',
   'javascript-capacitor',
@@ -313,6 +342,12 @@ export const replayPlatforms: readonly PlatformKey[] = [
   'javascript',
 ];
 
+// These are all the platforms that can set up replay.
+export const replayPlatforms: readonly PlatformKey[] = [
+  ...replayFrontendPlatforms,
+  ...replayBackendPlatforms,
+];
+
 /**
  * The list of platforms for which we have created onboarding instructions.
  * Should be a subset of the list of `replayPlatforms`.
@@ -320,26 +355,12 @@ export const replayPlatforms: readonly PlatformKey[] = [
  * See: https://github.com/getsentry/sentry-docs/tree/master/src/wizard/javascript/replay-onboarding
  */
 export const replayOnboardingPlatforms: readonly PlatformKey[] = [
-  'capacitor',
-  'electron',
-  'javascript-angular',
-  'javascript-astro',
-  // 'javascript-angularjs', // Unsupported, angularjs requires the v6.x core SDK
-  // 'javascript-backbone', // No docs yet
-  'javascript-capacitor',
-  'javascript-electron',
-  'javascript-ember',
-  'javascript-gatsby',
-  'javascript-nextjs',
-  'javascript-react',
-  'javascript-remix',
-  'javascript-svelte',
-  'javascript-sveltekit',
-  'javascript-vue',
-  'javascript',
+  ...replayFrontendPlatforms.filter(p => !['javascript-backbone'].includes(p)),
+  ...replayBackendPlatforms,
 ];
 
-// These are the supported platforms that can also be set up using the loader
+// These are the supported replay platforms that can also be set up using the JS loader.
 export const replayJsLoaderInstructionsPlatformList: readonly PlatformKey[] = [
   'javascript',
+  ...replayBackendPlatforms,
 ];

static/app/gettingStartedDocs/bun/bun.tsx

@@ -4,6 +4,7 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -88,6 +89,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/dotnet/aspnetcore.tsx

@@ -9,6 +9,7 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
@@ -231,6 +232,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/elixir/elixir.tsx

@@ -7,6 +7,7 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -230,6 +231,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/java/spring-boot.tsx

@@ -9,6 +9,7 @@ import {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
@@ -305,6 +306,7 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
 const docs: Docs<PlatformOptions> = {
   onboarding,
   platformOptions,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/java/spring.tsx

@@ -9,6 +9,7 @@ import {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
@@ -372,6 +373,7 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
 const docs: Docs<PlatformOptions> = {
   onboarding,
   platformOptions,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -8,7 +8,7 @@ import {
   getReplayConfigureDescription,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
-import replayOnboardingJsLoaderJavascript from 'sentry/gettingStartedDocs/javascript/jsLoader/javascript';
+import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -185,7 +185,7 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
-  replayOnboardingJsLoader: replayOnboardingJsLoaderJavascript,
+  replayOnboardingJsLoader,
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/jsLoader/javascript.tsx → static/app/gettingStartedDocs/javascript/jsLoader/jsLoader.tsx

@@ -49,7 +49,7 @@ const getInstallConfig = (params: Params) => [
   },
 ];
 
-const replayOnboardingJsLoaderJavascript: OnboardingConfig = {
+const replayOnboardingJsLoader: OnboardingConfig = {
   install: (params: Params) => getInstallConfig(params),
   configure: () => [
     {
@@ -74,4 +74,4 @@ const StyledAlert = styled(Alert)`
   margin: 0;
 `;
 
-export default replayOnboardingJsLoaderJavascript;
+export default replayOnboardingJsLoader;