ref: Improve JS SDK Component Tracking Documentation

[Lms24]

This PR makes structural, naming and content changes to the documentation of a feature we support in four JS framework SDKs - component tracking. Previously, this documentation differed drastically between these four SDKs, as described in greater detail in #5582. Not only did the location differ, but also, how we called the feature. With this PR, we're introducing one name that describes this feature, while we still find a balance between "component tracking" and however the feature is called in the SDK's code (e.g. "trace helpers" in Angular or "Profiler" in React).

Impacted SDKs: Angular, React, Vue, Svelte

As of this PR, we make the following changes:

All SDKs

• Adjusted the naming and location of the documentation. In the menu on the left, it is now located under "<Framework> Features" -> "Component Tracking"
• Added a sentence in all "<framwork> Features" index pages explaining that these features are specifically built for the respective framework. For example, in React we don't only have component tracking as such a feature but also the Sentry error boundary.
• Added a small paragraph on top of the component tracking page, explaining the feature and why it's helpful
• Mentioned the names of the spans that this feature adds to the transactions so that users are aware of what it is actually doing. The React docs were already doing this and I thought this would be valuable information for every SDK.

Angular:

• Rephrased some paragraphs and sentences that were previously confusing
• Added sub-headings for each utility (previously it was a list)
• Added an "Advanced" usage section, explaining that the utilities can be used together
• Adjusted the code examples and corrected some minor mistakes

Vue:

The Vue SDK documentation didn't have a proper page for component tracking previously. Instead it was spread across three pages.

• Moved component tracking documentation from the "Vue Router Integration" to the new component tracking page
• Adjusted this documentation by
  • Removing unnecessary technical details
  • Better explaining each of the three options
  • Removing lifecycle hooks that weren't even supported by the SDK
• Since component tracking was mentioned in two other pages (Getting started and Performance Setup), I decided to shorten the description in the respective places to only leave the gist there. In both places, I added links to the component tracking page for more details.
• Left the part that is actually about the Vue router on the "Vue Router Integration" page.
  • I'm not too happy with this, because technically speaking we don't have a Vue router integration but an instrumentation but we do the same thing in the React SDK. In both cases, the pages actually contain relevant information. So we can leave it for now as is and revisit this if it comes up.

fixes #5582

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
sentry-docs	✅ Ready (Inspect)	Visit Preview	Oct 12, 2022 at 2:07PM (UTC)

[imatwawana]

Don't be put off by all the edits; this is really great! The structure makes much more sense. Mostly this is just styling and wording changes. The only structural edit I'd like you to make that I didn't mention in my suggestions is to please rename the files "componenttracking" and "errorboundary" to "component-tracking" and "error-boundary" in line with other file names, as it makes them easier to read (and then update the links of course). I'd like to look at this one more time before you merge. Just tag me when you're ready for another review! Again, great work and thanks for doing this!

[AbhiPrasad]

I like the re-org to angular features. My only thing now is, should we add a CTA for performance on top of these pages? features/componenttracking is under the main docs, and not the performance monitoring docs, so it might be harder for folks to understand that way. You just did this 😅 - sorry for not looking at the latest diff.

Might be also nice to link to features/componenttracking from the Performance Instrumentation docs: (ex. https://sentry-docs-git-lms-improve-component-tracking.sentry.dev/platforms/javascript/guides/react/performance/instrumentation/)

[Lms24]

@imatwawana thanks for the review. Applied all your feedback and I think this is ready for another round.

Might be also nice to link to features/componenttracking from the Performance Instrumentation docs

I'll address this in a follow-up PR as we need to make a change to the PageGrid component for this to work properly.

[imatwawana]

@imatwawana thanks for the review. Applied all your feedback and I think this is ready for another round.

Might be also nice to link to features/componenttracking from the Performance Instrumentation docs

I'll address this in a follow-up PR as we need to make a change to the PageGrid component for this to work properly.

What's the change you're thinking of here? We use this component all over the place and I want to make sure it's still going to behave as intended elsewhere. Nevermind, I see the other PR. I'll review later.

[imatwawana]

A few final wording and formatting edits. Otherwise LGTM!