Add optional `graphqlClientIntegration` to `@sentry/browser`

[mydea]

Description

Similar to getsentry/sentry-cocoa#3931, we can add a pluggable (=not enabled by default) integration to @sentry/browser (and downstream SDKs) which allows to opt-in to get better breadcrumbs & spans when using GraphQL as a client.

This could behave like this:

Sentry.init({
  integrations: [
    Sentry.graphqlClientIntegration({
      endpoints: ['/graphql'],  
    })
  ]
})

Where any http.client span or breadcrumb created that matches endpoints will be enhanced with graphql data from the request payload:

1. For http.client spans, we can update the span name similar to what we do here in node: feat(node): Add useOperationNameForRootSpan tographqlIntegration #13248
2. For breadcrumbs, we can add the operation name to the breadcrumb data (and possibly also the query itself)

related: #13215

[andreiborza]

Leaving this here for future reference: #13215 (comment)

[github-actions]

A PR closing this issue has just been released 🚀

This issue was referenced by PR #13783, which was included in the 9.1.0 release.

[cjnoname]

Does it support Module Federation?

[lforst]

@cjnoname care to elaborate? Or rather why you asked this below this exact issue? 😄

[cjnoname]

@lforst

We use Module Federation in our project, which consists of a main project and several child projects. We are currently using a Webpack plugin to send alerts from the child projects back to the main project for processing.

We are wondering how to configure this setup. Specifically, which path should we use in the parameter?

Sentry.graphqlClientIntegration({
endpoints: ['/graphql???'],
})

By the way, the child projects' GraphQL endpoints are hosted on different domains, while the frontend application shares the same domain through Module Federation. Should I use the full domain for all backend GraphQL endpoints here, or is there another approach?