Improve JS SDK Component Tracking Documentation

[Lms24]

Core or SDK?

Platform/SDK

Which part? Which one?

JS Framework SDKs (Angular, React, Vue, Svelte)

Description

This issue was extracted from #5470

Currently, our documentation on component tracking differs between SDKs that support the feature:

• In the Angular docs, the content lives under "Components"->"Tracking Angular components". I like the placement but the items that we expose in the SDK for component tracking are not components. Also, we call these items "tracing helpers" which IMO is an overloaded term and doesn't describe component tracking well. It might lead to people thinking that component tracking has something to do with distributed tracing.
• The React docs place the component tracking content under "Components"->"Profiler". Here, the term "components" actually makes sense because the profiler is a component. However, we call the same feature here entirely differently ("Profiling" vs "Component Tracking")
• The Vue docs have no "Components" page at all. The component tracking content is mostly a few paragraphs in two places:
  • Performance setup: Here we talk about "configuring [the] tracing instrumentation". Again IMO an overloaded term that doesn't fit for component tracking very well.
  • Vue router integration: Component tracking again makes a somewhat disguised appearance. I find this page a little weird in gerneral. We don't have a Vue routing integration. We describe the BrowserTracing integration but for some reason, the code examples don't contain the Vue routing instrumentation (which would be in fact vue-specific but not an integration). In the "Getting Started" page, we show the correct configuration (e.g. for Vue 3). Perhaps this page needs some rework in general (might be a leftover from before we had a proper Vue SDK?)
  • The trackComponents option is also mentioned in the "Getting Started" page. I think that's generally fine but from what I understand, "Getting started" should show how to get going and the other sections should show the advanced stuff, no?
• For Svelte, the component tracking docs are located in "Svelte Features"->"Tracking Svelte components" which location-wise is identical to Angular and React. However, we replaced "Components" with "Svelte Features" because that's what more accurately describes what component tracking is: A feature that we offer for the Svelte SDK specifically, in addition to our "normal" features.

Suggested Solution

I would propose to rename the "Components" page in Angular and React to "Angular/React Features" and to try to make the naming as similar as possible. However, we need to find a middle ground because we can't only talk about component tracking in the docs, while the SDK code still uses terms like "tracing" and "profiling".
The changes for React and Angular shouldn't be too big. For Vue it's more work (we can also hold off from that). The goal would be to have one page that lists all [JS Framework]-SDK-specific features (meaning the ones we add on top of the base JS SDK), such as component tracking. I think overall, this would improve docs consistency across SDKs.

To Do

• Adjust Angular docs
• Adjust React docs
• Revisit Svelte docs
• Adjust Vue docs

[imatwawana]

Thanks for opening this! Let's have a meeting about naming conventions before you get too far into the work on this to make sure we avoid any titles that are going to cause us headaches down the road.

[getsentry-release]

Routing to @getsentry/team-web-sdk-frontend for triage. ⏲️

[Lms24]

@imatwawana Sure, happy to chat about this. I've already started working on it but naming can be changed quickly. Also spent some time actually improving the content (which for Angular we really should do as I've realized).