Introduce source maps cli wizard

[smeubank]

Problem Statement

There are many JS projects which do not have the upload of source maps configured properly so that, their source files will be uploaded to sentry in their CI/CD process. Leading to a sub-optimal errors product experience

• no readable stack traces
• no source code linking
• issue grouping not as accurate

Solution Brainstorm

There are a number of methods and tools in place for customers to use, and the one that is best suited is not always immediately obvious to the user. We have a wizard which will help guide users to what options are available and how to set it up in their applications.

We further provide them with all required environment variable which will allow their app to communicate with sentry API and associate their files with the correct org and project.

JS Browser Docs

One liner to run in their terminal
npx @sentry/wizard@latest -i sourcemaps

Open Points:
Issue Details Page, Project Onboarding and Docs Getting Started
For now this is already on JS source maps docs, to get numbers on initial users.

Issue Details Page:

• Adding to issue details page, is the least control as could be to all users who fit our requirements, which is a lot.
  • least control in terms of SDK version, SDK version (<7.), that the user is actually already in their dev env with terminal etc
• Invites risks that we don't have the best version of the wizard as a CTA for their first impression
  • would rather not have a CTA later that says hey please try again we did better this round
• This is potentially our biggest lever, let's collect more usage and improve before wasting our shot

Project Onboarding:

• 2nd biggest lever
  • JS has a lot of new projects on daily basis, can generate a lot of quality insights
• Include in install snippets with comment about what it is installs wizard to help setup up source maps upload
  • or add a 3rd snippet box with similar info
• Most control
  • devs are already presented with latest and most correct SDK version
  • they are already in a place to setup SDK init in their IDE and with terminal

Docs: Getting Started:

• 3rd lever
• users come here with intent to learn how to setup
• we have already added to source maps which users arrive at via CTA issue platform today
• Next step would be to add to the getting started for all relevant JS platforms

Landing /for pages:

• 4th lever
• include with exiting install & setup snippets
• users come here via google typically
• least control, in terms of user actually in process of setting up or improving existing setup, can be casual users looking around

Requirements:
This is a WIP which is getting iteratively better as we discover more ways to better support the user. With that in mind it is important we try to only prompt user to use this who we are confident it will help them. Considering first impressions are important and we don't want to be in a place where we want to ask users to run again and again as we ship improvements.

• Only show to JS Browser related projects
• no mobile platforms or SDKs, including react-native
  • react-native and other mobile platforms included in the future, will update if the restriction is to be lifted
• Only show to projects where events sent are with JS SDK version 7 or higher
  • We now check if a debug-id compatible SDK version is installed. In case it’s not we offer automatic or manual upgrade options, depending on the currently installed version.
  • will not attempt auto-update of less than v7 due to complexities with breaking changes in major releases
• Do not show to Remix platform or SDK for now
• NextJS or SvelteKit
  • will potentially include these flow in the future, so stay tuned if we lift this restriction
• We need to validate that the existing "read more" link only takes users on correct JS platforms to the Source Maps Docs for JS
  • since inital data on usage shows mobile platform devs testing this

Product Area

Issues - Source Maps

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-issues-source-maps for triage ⏲️

[priscilawebdev]

@smeubank can you please provide a list of all the javascript SDKs where we should include the sourcemaps cli step?

[smeubank]

I would include for only these not sure what javascript is vs browser actually. Comments next to 3 where I think we should confirm

javascript
javascript-angular
javascript-angularjs,  
javascript-browser,
javascript-ember,
javascript-gatsby, -- does gatsby have any special considerations? There is some built in source maps support here
javascript-nextjs, --maybe only after the SvelteKit and NextJS redirects
javascript-react,
javascript-svelte,
javascript-sveltekit, -- after redirects added
javascript-vue

//i have no idea what those items are being hyperlinked above

electron, cordova, and capacitor are to be confirmed

[smeubank]

the wizard is now in onboarding, and docs

should be added to for pages but that's a low lever https://github.com/getsentry/static-sites/issues/1968

issues platform is the most important and being tracked here #55662 and related project board and epic getsentry/team-sdks#33

closing ticket to remove bloat