From 1f299ffa850f44e3539c7b6e3d3a4c5be44b4d50 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 9 Sep 2026 21:30:04 +0200 Subject: [PATCH 1/2] feat(op): Add `ui.resolve` span op Component resolution is currently homeless. Frameworks that map a component name to an implementation at render time (Ember/Glimmer, Vue's `resolveComponent`, Angular's dynamic components) have no op that describes that step, so SDKs either force it onto `ui.render` -- where it collides with the render span it precedes, same name and same `ui.component_name` -- or onto `function`, which infers a description of "Function execution". Co-Authored-By: Claude Opus 5 (1M context) --- javascript/sentry-conventions/src/op.ts | 5 +++++ model/op/browser.json | 4 ++++ rust/src/op.rs | 3 +++ 3 files changed, 12 insertions(+) diff --git a/javascript/sentry-conventions/src/op.ts b/javascript/sentry-conventions/src/op.ts index 9b5624610..eddc2ecbc 100644 --- a/javascript/sentry-conventions/src/op.ts +++ b/javascript/sentry-conventions/src/op.ts @@ -136,6 +136,11 @@ export const UI = 'ui'; */ export const UI_TASK = 'ui.task'; +/** + * Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span. + */ +export const UI_RESOLVE = 'ui.resolve'; + export const UI_RENDER = 'ui.render'; /** diff --git a/model/op/browser.json b/model/op/browser.json index 94c6b78ae..e228f9ee7 100644 --- a/model/op/browser.json +++ b/model/op/browser.json @@ -121,6 +121,10 @@ "name": "ui.task", "description": "A task that is taken on the main UI thread. Typically used to indicate to users about things like the [Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming)." }, + { + "name": "ui.resolve", + "description": "Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span." + }, { "name": "ui.render" }, diff --git a/rust/src/op.rs b/rust/src/op.rs index 01a97bbbc..3870856f4 100644 --- a/rust/src/op.rs +++ b/rust/src/op.rs @@ -90,6 +90,9 @@ pub const UI: &str = "ui"; /// A task that is taken on the main UI thread. Typically used to indicate to users about things like the [Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming). pub const UI_TASK: &str = "ui.task"; +/// Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span. +pub const UI_RESOLVE: &str = "ui.resolve"; + pub const UI_RENDER: &str = "ui.render"; /// Mounting of a UI component or application (e.g. initial render/bootstrap). From f55857b47a78684e51e02722245010274dc9aa6a Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Wed, 9 Sep 2026 22:03:19 +0200 Subject: [PATCH 2/2] ref(op): Shorten the `ui.resolve` description Cut it to what a reader needs: what the op covers, and that the render is a separate span. Co-Authored-By: Claude Opus 5 (1M context) --- javascript/sentry-conventions/src/op.ts | 2 +- model/op/browser.json | 2 +- rust/src/op.rs | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/javascript/sentry-conventions/src/op.ts b/javascript/sentry-conventions/src/op.ts index eddc2ecbc..02c9b20f8 100644 --- a/javascript/sentry-conventions/src/op.ts +++ b/javascript/sentry-conventions/src/op.ts @@ -137,7 +137,7 @@ export const UI = 'ui'; export const UI_TASK = 'ui.task'; /** - * Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span. + * Looking up which component a name in a template refers to, before that component renders. Ember does this for every component it renders. The render itself is a separate `ui.render` span. */ export const UI_RESOLVE = 'ui.resolve'; diff --git a/model/op/browser.json b/model/op/browser.json index e228f9ee7..bf339036b 100644 --- a/model/op/browser.json +++ b/model/op/browser.json @@ -123,7 +123,7 @@ }, { "name": "ui.resolve", - "description": "Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span." + "description": "Looking up which component a name in a template refers to, before that component renders. Ember does this for every component it renders. The render itself is a separate `ui.render` span." }, { "name": "ui.render" diff --git a/rust/src/op.rs b/rust/src/op.rs index 3870856f4..c89ad52fd 100644 --- a/rust/src/op.rs +++ b/rust/src/op.rs @@ -90,7 +90,7 @@ pub const UI: &str = "ui"; /// A task that is taken on the main UI thread. Typically used to indicate to users about things like the [Long Tasks API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming). pub const UI_TASK: &str = "ui.task"; -/// Resolution of a UI component reference into the implementation that will render it. Use this for frameworks that look components up through a registry or resolver at render time, rather than binding them at module load. Examples are Ember/Glimmer's component resolver, Vue's `resolveComponent` for globally registered or async components, or Angular's dynamic component resolution. The render that follows is a separate `ui.render` span. +/// Looking up which component a name in a template refers to, before that component renders. Ember does this for every component it renders. The render itself is a separate `ui.render` span. pub const UI_RESOLVE: &str = "ui.resolve"; pub const UI_RENDER: &str = "ui.render";