Discern Client vs Server Errors

[smeubank]

For meta frameworks like Next.js (but not only, also e.g. Remix, Nuxt, Sveltekit, SolidStart), all issues come into a single project. This includes browser (client) issues/transactions, but also server (node or vercel-edge) issues/transactions.

Today, it is very hard to see where an event is coming from. Really, you have to manually look at a bunch of rather obscure event data to figure this out. We should highlight this better for our users!

1. We should show the runtime of the event (issue/transaction) somewhere on the top of the issue detail page.
2. We should show the runtime of the event in the issue stream.
3. We should probably do this for all JavaScript meta SDKs (but not all SDKs, as it is redundant information if I only have e.g. a React app)

Some notes on implementation/event structure:

How can we identify if an event comes from a meta SDK?

A pretty reliable way is to look at sdk.packages in the event. If this has more than one entry, it can be considered a meta SDK that covers more than one runtime. E.g. for Next.js this will be one of:

[
  {
    "name": "npm:@sentry/nextjs",
    "version": "8.29.0"
  },
  {
    // or @sentry/react, or @sentry/vercel-edge
    "name": "npm:@sentry/node",
    "version": "8.29.0"
  }
]

Where can I get the runtime information from?

This is a bit tricky as we do not really have a central place for this. The easiest heuristic is to look at contexts.runtime.name. This would be node or vercel-edge, respectively. If this is not set, it can be considered browser.

Alternatively, you could look at the sdk.packages (but this is a bit tricky as it may include e.g. @sentry/react or @sentry/vue or @sentry/browser).

PRs

• feat(contexts): Differentiate client OS title #88536
• feat(contexts): Hide client-related highlights in backend issues #88539
• feat(issue-details): Add runtime label for JS issues #88312
• [Issue Stream] Add runtime context to group details #89841

[mydea]

Also see #87697

[timfish]

Maybe you can determine this from the platform property in the event.
It's should be node for backend and javascript for frontend.

The develop docs already say:

A string representing the platform the SDK is submitting from. This will be
used by the Sentry interface to customize various components in the interface.

This would also be helpful for the Electron SDK since that also has events from both.