Create basic template for Getting Started pages

[inventarSarah]

SDK

All JavaScript SDKs

Description

Since it is easy to get lost in the details of the individual SDKs and their Getting Started pages, we want to create/revise the foundation first. To do this, we want to create a template that defines the minimum amount of content that the Getting Started pages of each SDK should have. Using this template, we can then ensure that our Getting Started pages are consistent -- in structure and content -- which should help in writing documentation and ultimately supports the reader/user to extract information from the page.

Suggested Solution

create a template that serves as the basis -- we can then build upon this base in follow-up issues/tasks

[inventarSarah]

I created two basic templates (one for wizard install, one without) as a base for next discussion;

The structure is similar to what we had before but it includes more (but smaller) steps to help organize information and provide a better overiew of the content. I also think that the structure is still fairly flexible for any framework-specific additions.
We could use toggle boxes/expandables (like here) to wrap any information that is important to have in the quick start but is not important for all users. This way, we can provide the info without disturbing the flow or "cluttering" the instructions.

React SDK Quick Start Guide (no wizard)

State the goal of the page; What will the reader achieve

Prerequisites

What does the reader need to succeed

1. Install

• installation command(s)

2. Initialize/Configure

• show code and briefly explain

Configure Tracing (optional)

• explain the "ideal/most generic" setup for tracing
• add important related information (consider toggle box)
  • eg, "Set up react router" (add info/link for users who use backend routing)

Configure Session Replay (optional)

Other Configurations (optional)

• link to docs to learn more about config options;
• add some examples (make sure to wrap these config examples in usage examples to show real-world applications and help understanding)

3. Any other framework-specific steps

• for example, Add Error Boundary for React

4. Verify your setup

• explain how to verify the basic setup + example code
• add screenshots/video of how the test looks like in Sentry

5. Add readable stack traces to errors (optional)

• show code and briefly explain

6. Instrument your backend (if applicable)

• briefly explain what and why; guide user to quick start guide of their backend

Next steps

• summarize what we did and achieved and list the next steps (links to documentation) the user should take
• can also be informational content
• Define relevant getting started/next steps for Browser JS #11962

React SDK Quick Start Guide (Wizard)

State the goal of the page; What will the reader achieve
Mention here that there's an installation wizard

Prerequisites

What does the reader need to succeed

1. Install

• installation command(s)
• add summary of what the wizard did (toggle box)

2. Configure (optional)

• link to docs to learn more about config options;
• add some examples (make sure to wrap these config examples in usage examples to show real-world applications and help understanding)

3. Any other framework-specific steps

• for example, Add Error Boundary for React

4. Verify your setup

• explain how to verify the basic setup + example code (refer to examples generated by wizard but keep in mind that user may have not used them)
• add screenshots/video of how the test looks like in Sentry

Next steps

• summarize what we did and achieved and list the next steps (links to documentation) the user should take
• Define relevant getting started/next steps for Browser JS #11962

[inventarSarah]

Integrating the onboarding options into the non-wizard install templates

The earlier versions of the template for the non-wizard installation did not include the "onboarding options" checkboxes.
However, these are super useful and clever: The user can use them to get customized instructions, and code snippets based on the Sentry features they want to use. While for JS SDKs, this usually affects the Configure part of the guide, it can affect other/additional sections in other SDKs as well.

The main challenge here is: How can we present this to users in a way that is understandable and also doesn't require too much space? (we want to show code snippets and terminal commands as soon as possible)

This is a mockup with a possible solution I created:

In words:

• The first step in the guide is to choose your features similar to how it is now but framing it as a part of the instructions makes it a bit clearer.
• Then we should display some info text -- why choose the features here (because they affect the guide) and also reassure the user (you can still add this later)
• To save space I think boxes could be a good solution -- these contain a short description that is understandable even if you're new to Sentry. Also, I would put the onboarding boxes right with the features
• I'm sure this could look really good with the right design!

Updated template version

I've updated the non-wizard template from my previous comment to include the feature selection described earlier. The wizard installation guides do not have onboarding options, so it gets no updates for now.

React SDK Quick Start Guide (no wizard)

State the goal of the page; What will the reader achieve

Prerequisites

• What does the reader need to succeed

1. Choose your Sentry features (Optional)

• explain why to do this and how the onboarding options impact the quick start guide
• list features (for example in boxes) including a short description and helpful use case example
• the onboarding option should be here as well

2. Install

• installation command(s)
• add installation commands for features if applicable

3. Initialize/Configure

• show code and briefly explain
• code snippet should include config for added features

Subsection: Configure Tracing (if applicable)

• it can make sense to create a dedicated subsection if the content is a bit longer
• add important related information (consider toggle box)
  • eg, "Set up react router" (add info/link for users who use backend routing)

Subsection: Configure Session Replay (if applicable)

• see subsection above

Other Configurations (optional)

• link to docs to learn more about config options;
• add some examples (make sure to wrap these config examples in usage examples to show real-world applications and help understanding)

4. Any other framework-specific steps

• for example, Add Error Boundary for React

5. Verify your setup

• explain how to verify the basic setup + example code
• add screenshots/video of how the test looks like in Sentry

6. Add readable stack traces to errors (optional)

• show code and briefly explain

7. Instrument your backend (if applicable)

• briefly explain what and why; guide user to quick start guide of their backend

Next steps

• summarize what we did and achieved and list the next steps (links to documentation) the user should take
• can also be informational content
• Define relevant getting started/next steps for Browser JS #11962