feat(svelte): Add documentation for component tracking

[Lms24]

This PR adds a page in the Svelte SDK documentation about a new feature in the SDK, component tracking. It includes a brief description of what this feature does and how to use it (two ways).

I'm not particularly happy with the placement of the documentation but I took what we have in Angular and React as an example. In the future I'd vote to rename the navigation item on the left for Angular and React from "Components" to "[Framwork] Features". This title is IMO more general and better represents what's in there than "Components". In Angular for instance, none of the trace helpers are actual components. If we do this, we should also consider to adapt the Vue documentation which doesn't have such a section but scatters its component tracking documentation in the performance monitorin setup and router instrumentation pages.

ref: getsentry/sentry-javascript#5573

[vercel]

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

Name	Status	Preview	Updated
sentry-docs	✅ Ready (Inspect)	Visit Preview	Aug 31, 2022 at 10:07PM (UTC)

[imatwawana]

I'd like to review this for style and wording once the technical review is complete. Can you please tag me when it's ready for that?

[Lms24]

@imatwawana I think the technical aspect is pretty clear. It's probably more in wording and placement so I think you're good to take a look now, if that's ok. (should have tagged you from the start, sry about that)

[imatwawana]

Made some wording suggestions. Otherwise, looks good. You said you didn't like the position of this content; I'm curious where do you think it should live?

[imatwawana]

Thinking we should update the platform icon for Svelte to reflect the Svelte logo. Do you know how to do this?

[imatwawana]

It looks like the Svelte logo was added to the platformicons, but I think it may have been added incorrectly. I'll check into that. You can ignore my comment.

[Lms24]

As always, thanks for your great review and suggestions @imatwawana

You said you didn't like the position of this content; I'm curious where do you think it should live?

So my main hunch here is that we document the same feature (component tracking) very differently:

• 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?
• Now this PR for Svelte adds the component tracking docs to "Svelte Features"->"Tracking Svelte components" which location-wise is identical to Angular and React. I just 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.

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. I understand that 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.

WDYT, does this make sense?

[imatwawana]

@Lms24 I like this idea. Is there anyone else we need buy-in from before making changes like these?

[Lms24]

@imatwawana apologies for getting back to this only now but I was OOO until today.

I think overall, we don't need a lot of buy-in but I'll tag @AbhiPrasad as he has created component tracking for React. Abhi, do you think the proposed consolidation/unification of how we document component tracking would be a good idea?

(I'll open an issue if we wanna move forward with this)

[AbhiPrasad]

do you think the proposed consolidation/unification of how we document component tracking would be a good idea

Yeah I like this idea, let's move forward with it!

[Lms24]

Great! I extracted an issue from the description above: #5582