ref(ui): decouple scraps/link from sentry specific code #102644

TkDodo · 2025-11-04T10:15:46Z

This PR introduces a LinkBehaviorContext that allows us to decouple sentry specific code from our design-system scraps.

In this first iteration, the only sentry specific things were:

locationDescriptorToTo
a call to useLocation to fall-back to anchor rendering if there is no location. Honestly, I don’t know why / if we need that because when would have no useLocation ?

I do plan to add more sentry specific link behavior, like intent prefetching, but this de-coupling is pre-requisite for that.

TkDodo · 2025-11-04T10:17:09Z

static/app/components/core/link/link.tsx

-/**
- * A context-aware version of Link (from react-router) that falls
- * back to <a> if there is no router present
- */
-export const Link = styled(({disabled, to, ...props}: LinkProps) => {
-  const location = useLocation();


@evanpurkhiser do you maybe know why we have this “fall back to <a> if there is no router present. When would that trigger? Does useLocation ever return null / undefined?

I would honestly love to just remove that if possible

this actually dies at runtime so why do we have it 😅 ?

router.js:422 Uncaught Error: useLocation() may be used only in the context of a <Router> component. at invariant (router.js:422:15) at useLocation (index.js:204:104) at useLocation (useLocation.tsx:25:90) at SentryLinkBehaviorProvider (link.tsx:25:91)

I think this is probably pretty legacy. This might have been needed at one point for one of these things

sentry/static/app/bootstrap/processInitQueue.tsx

Lines 22 to 37 in 4ffd2a0

const COMPONENT_MAP = {

[SentryInitRenderReactComponent.INDICATORS]: () =>

import(/* webpackChunkName: "Indicators" */ 'sentry/components/indicators'),

[SentryInitRenderReactComponent.SYSTEM_ALERTS]: () =>

import(/* webpackChunkName: "SystemAlerts" */ 'sentry/views/app/systemAlerts'),

[SentryInitRenderReactComponent.SETUP_WIZARD]: () =>

import(/* webpackChunkName: "SetupWizard" */ 'sentry/views/setupWizard'),

[SentryInitRenderReactComponent.WEB_AUTHN_ASSSERT]: () =>

import(

/* webpackChunkName: "WebAuthnAssert" */ 'sentry/components/webAuthn/webAuthnAssert'

),

[SentryInitRenderReactComponent.SU_STAFF_ACCESS_FORM]: () =>

import(

/* webpackChunkName: "SuperuserStaffAccessForm" */ 'sentry/components/superuserStaffAccessForm'

),

};

, components that get rendered in Django views

I doubt we need this yeah.

okay, I think this is what we want then: f1625c5

the design-system uses ’a’ per default unless specified by the context, which both the sentry app and our tests are doing.

so that we can call useLocation inside

JonasBa

Nice and clean, I like it 🙏

codecov · 2025-11-04T16:21:25Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #102644      +/-   ##
===========================================
- Coverage   80.93%    80.92%   -0.01%     
===========================================
  Files        8929      8906      -23     
  Lines      391245    390801     -444     
  Branches    24866     24849      -17     
===========================================
- Hits       316649    316262     -387     
+ Misses      74228     74151      -77     
- Partials      368       388      +20

…inkBehaviorContext set both the sentry app and tests set that, so this is a defensive fallback

This PR introduces a `LinkBehaviorContext` that allows us to decouple sentry specific code from our design-system `scraps`. In this first iteration, the only sentry specific things were: - `locationDescriptorToTo` - a call to `useLocation` to fall-back to anchor rendering if there is no location. Honestly, I don’t know why / if we need that because when would have no `useLocation` ? I do plan to add more sentry specific link behavior, like [intent prefetching](#102574), but this de-coupling is pre-requisite for that.

sentry · 2025-11-04T19:53:12Z

Issues attributed to commits in this pull request

This pull request was merged and Sentry observed the following issues:

‼️ Error: useOrganization called but organization is... in prod

getsentry-bot · 2025-11-04T21:02:09Z

PR reverted: cdec585

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

This PR introduces a `LinkBehaviorContext` that allows us to decouple sentry specific code from our design-system `scraps`. In this first iteration, the only sentry specific things were: - `locationDescriptorToTo` - a call to `useLocation` to fall-back to anchor rendering if there is no location. Honestly, I don’t know why / if we need that because when would have no `useLocation` ? I do plan to add more sentry specific link behavior, like [intent prefetching](#102574), but this de-coupling is pre-requisite for that.

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

This is a continuation of - #102644 which got reverted because it broke `_admin`. This version has the following changes: - We now add a `ScrapsProvider` around the root routes of `_admin`: 0f0615a - We now default to a `RouterLink` even if no Provider is found: 803054e - Falling back to an `a` tag is a bad idea because it will render `<a to=“...”>` which won’t work (this was the `_admin` issue). It turns out, this is actually how `disabled` is implemented for link, as will create links that can’t be clicked 🥲. I don’t think we need to decouple scraps from react-router right now; previously, we called `useLocation`, which would fail at runtime if there is no router provider, so we can’t use our `Link` component outside of a router context anyway. So now, we have a `ScrapsProvider` around all routes (I hope there aren’t any more places) and for cases where we have no Provider, we should still render a link from react-router.

This PR introduces a `LinkBehaviorContext` that allows us to decouple sentry specific code from our design-system `scraps`. In this first iteration, the only sentry specific things were: - `locationDescriptorToTo` - a call to `useLocation` to fall-back to anchor rendering if there is no location. Honestly, I don’t know why / if we need that because when would have no `useLocation` ? I do plan to add more sentry specific link behavior, like [intent prefetching](#102574), but this de-coupling is pre-requisite for that.

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

This is a continuation of - #102644 which got reverted because it broke `_admin`. This version has the following changes: - We now add a `ScrapsProvider` around the root routes of `_admin`: 0f0615a - We now default to a `RouterLink` even if no Provider is found: 803054e - Falling back to an `a` tag is a bad idea because it will render `<a to=“...”>` which won’t work (this was the `_admin` issue). It turns out, this is actually how `disabled` is implemented for link, as will create links that can’t be clicked 🥲. I don’t think we need to decouple scraps from react-router right now; previously, we called `useLocation`, which would fail at runtime if there is no router provider, so we can’t use our `Link` component outside of a router context anyway. So now, we have a `ScrapsProvider` around all routes (I hope there aren’t any more places) and for cases where we have no Provider, we should still render a link from react-router.

This PR introduces a `LinkBehaviorContext` that allows us to decouple sentry specific code from our design-system `scraps`. In this first iteration, the only sentry specific things were: - `locationDescriptorToTo` - a call to `useLocation` to fall-back to anchor rendering if there is no location. Honestly, I don’t know why / if we need that because when would have no `useLocation` ? I do plan to add more sentry specific link behavior, like [intent prefetching](#102574), but this de-coupling is pre-requisite for that.

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

This is a continuation of - #102644 which got reverted because it broke `_admin`. This version has the following changes: - We now add a `ScrapsProvider` around the root routes of `_admin`: 0f0615a - We now default to a `RouterLink` even if no Provider is found: 803054e - Falling back to an `a` tag is a bad idea because it will render `<a to=“...”>` which won’t work (this was the `_admin` issue). It turns out, this is actually how `disabled` is implemented for link, as will create links that can’t be clicked 🥲. I don’t think we need to decouple scraps from react-router right now; previously, we called `useLocation`, which would fail at runtime if there is no router provider, so we can’t use our `Link` component outside of a router context anyway. So now, we have a `ScrapsProvider` around all routes (I hope there aren’t any more places) and for cases where we have no Provider, we should still render a link from react-router.

ref(ui): decouple scraps/link from sentry specific code

e136ad0

vercel bot deployed to Preview November 4, 2025 10:15 View deployment

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 4, 2025

TkDodo commented Nov 4, 2025

View reviewed changes

TkDodo added 2 commits November 4, 2025 11:44

fix: scrapsTestingProviders

40dd7ce

Merge branch 'master' into tkdodo/ref/link-behaviour-context

d036136

vercel bot deployed to Preview November 4, 2025 10:47 View deployment

TkDodo marked this pull request as ready for review November 4, 2025 10:52

TkDodo requested a review from a team as a code owner November 4, 2025 10:52

Merge branch 'master' into tkdodo/ref/link-behaviour-context

3c8612c

vercel bot deployed to Preview November 4, 2025 13:32 View deployment

fix: move ScrapsProvider down the tree into RouterProvider

7c0cb6b

so that we can call useLocation inside

vercel bot deployed to Preview November 4, 2025 13:49 View deployment

This comment was marked as outdated.

Sign in to view

JonasBa approved these changes Nov 4, 2025

View reviewed changes

TkDodo added 2 commits November 4, 2025 18:51

fix: we only need to fall back to 'a' tags for when we don't have a L…

f1625c5

…inkBehaviorContext set both the sentry app and tests set that, so this is a defensive fallback

Merge branch 'master' into tkdodo/ref/link-behaviour-context

5678cea

vercel bot deployed to Preview November 4, 2025 17:54 View deployment

TkDodo merged commit 812ea00 into master Nov 4, 2025
48 checks passed

TkDodo deleted the tkdodo/ref/link-behaviour-context branch November 4, 2025 18:07

JonasBa added the Trigger: Revert Add to a merged PR to revert it (skips CI) label Nov 4, 2025

getsentry-bot added a commit that referenced this pull request Nov 4, 2025

Revert "ref(ui): decouple scraps/link from sentry specific code (#102644

cdec585

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

TkDodo restored the tkdodo/ref/link-behaviour-context branch November 5, 2025 07:42

TkDodo mentioned this pull request Nov 5, 2025

ref(ui): decouple scraps/link from sentry specific code #102765

Merged

priscilawebdev pushed a commit that referenced this pull request Nov 6, 2025

Revert "ref(ui): decouple scraps/link from sentry specific code (#102644

ee18d15

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

Jesse-Box pushed a commit that referenced this pull request Nov 12, 2025

Revert "ref(ui): decouple scraps/link from sentry specific code (#102644

e0462c5

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

andrewshie-sentry pushed a commit that referenced this pull request Nov 13, 2025

Revert "ref(ui): decouple scraps/link from sentry specific code (#102644

3dd7438

)" This reverts commit 812ea00. Co-authored-by: JonasBa <9317857+JonasBa@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ref(ui): decouple scraps/link from sentry specific code #102644

ref(ui): decouple scraps/link from sentry specific code #102644

Uh oh!

TkDodo commented Nov 4, 2025

Uh oh!

TkDodo Nov 4, 2025

Uh oh!

TkDodo Nov 4, 2025

Uh oh!

evanpurkhiser Nov 4, 2025

Uh oh!

evanpurkhiser Nov 4, 2025

Uh oh!

TkDodo Nov 4, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

JonasBa left a comment

Uh oh!

codecov bot commented Nov 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

sentry bot commented Nov 4, 2025

Uh oh!

getsentry-bot commented Nov 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	const COMPONENT_MAP = {
	[SentryInitRenderReactComponent.INDICATORS]: () =>
	import(/* webpackChunkName: "Indicators" */ 'sentry/components/indicators'),
	[SentryInitRenderReactComponent.SYSTEM_ALERTS]: () =>
	import(/* webpackChunkName: "SystemAlerts" */ 'sentry/views/app/systemAlerts'),
	[SentryInitRenderReactComponent.SETUP_WIZARD]: () =>
	import(/* webpackChunkName: "SetupWizard" */ 'sentry/views/setupWizard'),
	[SentryInitRenderReactComponent.WEB_AUTHN_ASSSERT]: () =>
	import(
	/* webpackChunkName: "WebAuthnAssert" */ 'sentry/components/webAuthn/webAuthnAssert'
	),
	[SentryInitRenderReactComponent.SU_STAFF_ACCESS_FORM]: () =>
	import(
	/* webpackChunkName: "SuperuserStaffAccessForm" */ 'sentry/components/superuserStaffAccessForm'
	),
	};

Uh oh!

ref(ui): decouple scraps/link from sentry specific code #102644

ref(ui): decouple scraps/link from sentry specific code #102644

Uh oh!

Conversation

TkDodo commented Nov 4, 2025

Uh oh!

TkDodo Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

TkDodo Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

evanpurkhiser Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

evanpurkhiser Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

TkDodo Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

JonasBa left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

sentry bot commented Nov 4, 2025

Issues attributed to commits in this pull request

Uh oh!

getsentry-bot commented Nov 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov bot commented Nov 4, 2025 •

edited

Loading