feat: add GraphQL operation attributes to instrumented spans#644
Open
ccschmitz-launchdarkly wants to merge 6 commits into
Open
feat: add GraphQL operation attributes to instrumented spans#644ccschmitz-launchdarkly wants to merge 6 commits into
ccschmitz-launchdarkly wants to merge 6 commits into
Conversation
Auto-instrumented GraphQL calls all hit one endpoint, so spans showed as "POST /graphql" with no operation. Add a shared, dependency-free parseGraphQLOperation helper in observability-shared and use it from the React Native fetch hook and highlight-run's fetch/XHR enrichment to set the OTel semconv attributes graphql.operation.name/type and rename spans to "<type> <name>" (e.g. "query GetUser"). Also drops a stale unused `graphql` import from observability-shared so the parser can be tree-shaken into highlight-run without pulling the heavy graphql package into its bundle.
Per the OTel HTTP and GraphQL semantic conventions, client HTTP span names should stay low-cardinality (the method), and the high-cardinality graphql.operation.name belongs in an attribute, not the span name. Drop the span.updateName() calls from the React Native and highlight.run hooks and keep only the graphql.operation.name/type attributes; gonfalon's formatSpanName already builds the display name from them.
ccschmitz-launchdarkly
changed the title
abelonogov-ld
approved these changes
Jun 24, 2026
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit cb4447c. Configure here.
In a multi-operation document, graphql.operation.type was always read from the first query/mutation/subscription keyword, so a request selecting a later operation via operationName could get the right name but the wrong type (e.g. query instead of mutation). Scan for the operation matching operationName and read its type, falling back to the first operation when the name isn't found in the document.
Vadman97
approved these changes
Jun 25, 2026
…pendency ObservabilityClient.ts imports the PgInstrumentationConfig type from @opentelemetry/instrumentation-pg, but only ever resolved it transitively via @opentelemetry/auto-instrumentations-node. With hoistingLimits set to "dependencies" for this workspace, the lockfile re-resolution from the recent devDependency bumps moved instrumentation-pg out of a path tsc could resolve, breaking typegen (TS2307, plus cascading TS7006 on the responseHook params). Declare it explicitly as a devDependency, pinned to the same ^0.69.0 the transitive resolution already used so dedupe stays clean.
…ency Same fix as the observability-node package: client.ts imports the PgInstrumentationConfig type from @opentelemetry/instrumentation-pg but only resolved it transitively via auto-instrumentations-node. The lockfile re-resolution broke typegen (TS2307 + cascading TS7006). Declare it explicitly, matching the ^0.69.0 the transitive resolution already used.
| "@opentelemetry/exporter-metrics-otlp-http": "^0.203.0", | ||
| "@opentelemetry/exporter-trace-otlp-http": "^0.203.0", | ||
| "@opentelemetry/instrumentation": "^0.203.0", | ||
| "@opentelemetry/instrumentation-pg": "^0.69.0", |
Contributor
Author
There was a problem hiding this comment.
@abelonogov-ld @Vadman97 heads up that I think this fixes the issue we have been seeing with the monorepo build in CI.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Auto-instrumented GraphQL requests all hit the same endpoint, so their spans show up as a generic
POST /graphql/HTTP POSTin the trace list with no indication of which operation ran. This was raised as feedback on the React Native SDK's auto-instrumentation.This adds a shared, dependency-free
parseGraphQLOperationhelper inobservability-sharedand uses it in both client SDKs to tag GraphQL request spans with the OTel semconv attributesgraphql.operation.nameandgraphql.operation.type:observability-react-native): the fetch hook parses the request body and sets the attributes.highlight.run):enhanceSpanWithHttpRequestAttributes(which already runs for both fetch and XHR) now also setsgraphql.operation.typealongside the existinggraphql.operation.name.@launchdarkly/observabilityre-exportshighlight.run, so it's covered too.Span names are deliberately left as the low-cardinality, OTel-generated names (method-based, e.g.
HTTP POST). Per the OTel HTTP and GraphQL semantic conventions, the high-cardinality operation name belongs in an attribute, not the span name. The friendly display name is formatted in the gonfalon trace UI from these attributes (companion PR: launchdarkly/gonfalon#65434), where it renders asPOST /graphql - query GetUser.The parser is intentionally regex-based (no
graphqldependency) so it tree-shakes into the browser bundle; a stale unusedgraphqlimport was removed fromobservability-sharedto keep it out.Known limitation (follow-up): React Native XHR request bodies aren't captured, so XHR-based GraphQL clients won't be tagged yet; the fetch path covers Apollo / urql / graphql-request.
How did you test this change?
Unit tests (vitest):
observability-sharedparseGraphQLOperation— 13/13 (named query/mutation/subscription,operationName-only, name-from-document, anonymous shorthand, batched array, persisted query, non-GraphQL, malformed JSON)observability-react-nativenetwork-listener— 3/3 (attributes set; span name left unchanged)highlight.runinstrumentation— 129/129 (incl. GraphQL attribute cases)tsc --noEmitand Prettier are clean on the changed files. Full build /enforce-size(256 KB brotli budget) / ESLint run in CI — the change adds only ~40 lines of pure code to the browser bundle, so no size impact is expected.Are there any deployment considerations?
No migrations or backfills. Pure client-SDK change;
release-pleasewill version-bumpobservability-react-nativeandhighlight.runon merge. The newgraphql.operation.*attributes are purely additive and span names are unchanged, so existing saved views / alerts / aggregations keyed on span name are unaffected.Note
Low Risk
Additive client-side span attributes only; span names and existing alerts keyed on names stay the same, with no server or auth changes.
Overview
GraphQL HTTP spans can now be distinguished in traces via OTel semconv
graphql.operation.nameandgraphql.operation.type, without changing low-cardinality span names.A shared, regex-based
parseGraphQLOperationhelper is added inobservability-shared(exported from the package) and wired into React Native fetch instrumentation andhighlight.run’senhanceSpanWithHttpRequestAttributes(fetch and XHR). Tagging runs even when request body recording is off on React Native; only operation metadata is read, not stored as body content.The browser path replaces ad-hoc JSON parsing of
operationNamewith the shared parser (also sets operation type). An unusedgraphqlimport is removed fromobservability-sharedutils.ts.highlight.runtakes a workspace dev dependency onobservability-shared. Node SDKpackage.json/ lockfile also pick up@opentelemetry/instrumentation-pgas a dev dependency.Reviewed by Cursor Bugbot for commit 633ee26. Bugbot is set up for automated code reviews on this repo. Configure here.