Update image handling by jaffrepaul · Pull Request #14564 · getsentry/sentry-docs

jaffrepaul · 2025-08-05T22:54:59Z

DESCRIBE YOUR PR

This PR implements a modern image lightbox for all documentation images, enhancing the user experience.

Previously, clicking an image would open the raw image file in a new browser tab. This change introduces an in-page modal overlay for images, leveraging Radix UI Dialog for accessibility and a smooth user experience.

Key features:

Images now open in a responsive lightbox overlay on click.
Preserves existing functionality: right-click or Ctrl/Cmd+click still opens the image in a new tab.
Includes accessibility features (keyboard navigation, ARIA labels).
Adds subtle CSS animations for opening/closing the lightbox.

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.

Urgent deadline (GA date, etc.):
Other deadline:
None: Not urgent, can wait up to 1 week+

SLA

Teamwork makes the dream work, so please add a reviewer to your PRs.
Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

Checked Vercel preview for correctness, including links
PR was reviewed and approved by any necessary SMEs (subject matter experts)
PR was reviewed and approved by a member of the Sentry docs team

LEGAL BOILERPLATE

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

EXTRA RESOURCES

[Sentry Doc

Co-authored-by: paul.jaffre <paul.jaffre@sentry.io>

vercel · 2025-08-05T22:55:04Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
develop-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2025 2:07am
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 9, 2025 2:07am

codecov · 2025-08-05T22:56:16Z

Bundle Report

Changes will increase total bundle size by 91.16kB (0.4%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-client-array-push	9.9MB	47.32kB (0.48%) ⬆️
sentry-docs-server-cjs	12.4MB	43.84kB (0.35%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`static/chunks/pages/_app-*.js`	-3 bytes	882.71kB	-0.0%
`static/css/*.css`	192 bytes	12.9kB	1.51%
`static/css/*.css`	-928 bytes	961 bytes	-49.13%
`static/css/*.css`	-1 bytes	1.89kB	-0.05%
`static/css/*.css`	1.3kB	746.03kB	0.17%
`static/css/*.css`	-1.28kB	12.71kB	-9.12%
`static/css/*.css`	6.51kB	11.69kB	125.92% ⚠️
`static/css/*.css`	-14.26kB	4.84kB	-74.64%
*`static/css/.css`**(New)	11.0kB	11.0kB	100.0% 🚀
`static/chunks/8321-*.js`	-3 bytes	425.87kB	-0.0%
*`static/chunks/8423-.js`**(New)	284.92kB	284.92kB	100.0% 🚀
`static/chunks/2408-*.js`	5.33kB	283.72kB	1.92%
`server/app/api/ip-*.js`	737 bytes	263.38kB	0.28%
`server/app/_not-*.js`	737 bytes	263.37kB	0.28%
`server/app/[[...path]]/page_client-*.js`	737 bytes	263.33kB	0.28%
`server/app/platform-*.js`	796 bytes	248.17kB	0.32%
`static/chunks/app/[[...path]]/page-*.js`	3.81kB	87.96kB	4.52%
`static/chunks/app/platform-*.js`	5 bytes	13.22kB	0.04%
`static/chunks/webpack-*.js`	10 bytes	5.33kB	0.19%
`app-*.json`	82 bytes	4.68kB	1.78%
`static/OUxI4c7JoJBvvHsK6For2/_buildManifest.js`(New)	684 bytes	684 bytes	100.0% 🚀
`static/OUxI4c7JoJBvvHsK6For2/_ssgManifest.js`(New)	77 bytes	77 bytes	100.0% 🚀
~~*`static/chunks/2009-.js`*~~(Deleted)*	-252.38kB	0 bytes	-100.0% 🗑️
~~`static/W84V3ihBRYEI689c0Du_w/_buildManifest.js`~~(Deleted)	-684 bytes	0 bytes	-100.0% 🗑️
~~`static/W84V3ihBRYEI689c0Du_w/_ssgManifest.js`~~(Deleted)	-77 bytes	0 bytes	-100.0% 🗑️

Files instatic/chunks/app/[[...path]]/page-*.js:

./src/components/lightbox/lightbox.module.scss → Total Size: 387 bytes

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`1729.js`	5.66kB	1.78MB	0.32%
`../instrumentation.js`	32 bytes	1.1MB	0.0%
`9523.js`	32 bytes	1.08MB	0.0%
`../app/[[...path]]/page.js.nft.json`	715 bytes	739.39kB	0.1%
`../app/platform-redirect/page.js.nft.json`	715 bytes	739.3kB	0.1%
`../app/sitemap.xml/route.js.nft.json`	715 bytes	736.78kB	0.1%
`../app/[[...path]]/page.js`	35.95kB	603.39kB	6.34% ⚠️
`2311.js`(New)	29.86kB	29.86kB	100.0% 🚀
`9567.js`	24 bytes	20.67kB	0.12%
~~`7269.js`~~(Deleted)	-29.86kB	0 bytes	-100.0% 🗑️

Files in../app/[[...path]]/page.js:

./src/components/lightbox/lightbox.module.scss → Total Size: 378 bytes
./src/components/imageLightbox/index.tsx → Total Size: 475 bytes

Files in2311.js:

./app/globals.css → Total Size: 1 bytes

Files in9567.js:

./src/remark-image-size.js → Total Size: 1.06kB

App Routes Affected:

App Route	Size Change	Total Size	Change (%)
/	-1 bytes	2.62MB	-0.0%
/[[...path]]	35.95kB	3.16MB	1.15%

Co-authored-by: paul.jaffre <paul.jaffre@sentry.io>

…ize is applied

sergical

the 🤖 is almost there! 😅

sergical · 2025-08-08T18:23:39Z

+ {shouldUseNextImage && dimensions ? (
+ <Image
+ src={getImageUrl(src, imgPath)}
+ alt={alt}
+ width={dimensions.width}
+ height={dimensions.height}
+ className="max-h-[90vh] max-w-[90vw] object-contain"
+ style={{
+ width: 'auto',
+ height: 'auto',
+ }}
+ priority
+ {...imageCompatibleProps}
+ />
+ ) : (
+ /* eslint-disable-next-line @next/next/no-img-element */
+ <img
+ src={getImageUrl(src, imgPath)}
+ alt={alt}
+ loading="lazy"
+ decoding="async"
+ className="max-h-[90vh] max-w-[90vw] object-contain"
+ style={{
+ width: 'auto',
+ height: 'auto',
+ }}
+ {...props}
+ />
+ )}


can we pass a isInline boolean to renderImage and then add classNAme if not? otherwise it's very similar to the function above

sergical · 2025-08-08T18:25:53Z

+ };
+
+ return (
+ <Dialog.Root open={open} onOpenChange={setOpen}>


I would still abstract Dialog or call it Lightbox as it's own reusable component similar to ShadCN https://ui.shadcn.com/docs/components/dialog to consume in here.

sergical · 2025-08-08T18:30:44Z

+ return (
+ <Dialog.Root open={open} onOpenChange={setOpen}>
+ {/* Custom trigger that handles modifier keys properly */}
+ <div


have you tried using Dialog.Trigger? I think that would eliminate the need for custom onClick / keydown handling and would do semantics / accessibility for us?

Things were getting wonky with the intended behavior and needed some custom event handling but things have changed a bit since then. I'll see if we can't lean on this now

sergical · 2025-08-08T20:10:05Z

 <div
- onClick={handleModifierClick}
- onKeyDown={handleModifierKeyDown}
+ onClick={handleClick}
+ onAuxClick={handleClick}
+ onKeyDown={handleKeyDown}
 className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
 aria-label={`View image: ${alt}`}
+ role="button"
+ tabIndex={0}


i dont think it needs this (apart from aira-label) because https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/dialog.tsx#L105-L107 handles it

Oh nice. Less code is the best code! I still need some of it for the modifier logic but can pull some off

yup and you can put all that on the <Dialog.Trigger /> directly and remove the asChild prop

Co-authored-by: Sergiy Dybskiy <sergiy.dybskiy@sentry.io>

sergical

sergical · 2025-08-11T17:13:22Z

+ <Lightbox.Root open={open} onOpenChange={setOpen} content={renderImage(false)}>
+ <Lightbox.Trigger
+ onClick={handleClick}
+ onAuxClick={handleClick}
+ onKeyDown={handleKeyDown}
+ className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
+ aria-label={`View image: ${alt}`}
+ >
+ {renderImage()}
+ </Lightbox.Trigger>
+ </Lightbox.Root>


* 'master' of https://github.com/getsentry/sentry-docs: (22 commits) Fix incorrectly placed comma (#14592) fix(devservices): Typo in devservices docs (#14636) ref(ourlogs): Add log size limit (#14635) Document undocumented php prefix option (#14634) getsentry/relay@7958273 Unreal Engine: Update plugin docs (#14624) feat: Update min js sdk version for logging and update console logging snippet (#14614) feat: [Unreal] Add transaction and span set_data documentation (#14599) feat(js): Add `ignoreSpans` documentation to Options page (#14572) fix(js/browser): Amend user IP + `sendDefaultPii` change to v10 migration guide (#14609) fix: Fix broken AI banner due to invalid syntax (#14627) feat(partners)add-enablement-docs (#14095) Fix image path issue & add test coverage for new lightbox (#14616) feat(seer): update GHE setup to work with seer (#14617) fix(replay): Document searchable properties `screen` and alias `screens` (#14603) Update image handling (#14564) Update using-hooks.mdx (#14605) Godot: Document `disabled-in-editor-play` option (#14438) fix(Docs) redirect and deprecate old metrics pages (#14602) fix(relay): Update projects.mdx (#14606) ...

Add image lightbox with Radix UI Dialog and improved image handling
76137dd
Co-authored-by: paul.jaffre <paul.jaffre@sentry.io>

vercelBothad a problem deploying to Preview – sentry-docs August 5, 2025 22:56 Failure

jaffrepaul changed the title ~~Analyze image display and repository architecture~~Update image handlingAug 5, 2025

cursoragentand others added 2 commits August 5, 2025 23:01

Refactor DocImage components and improve type ordering
222fbb2
Co-authored-by: paul.jaffre <paul.jaffre@sentry.io>

[getsentry/action-github-commit] Auto commit
1d4c770

vercelBotdeployed to Preview – develop-docs August 5, 2025 23:14 View deployment

vercelBotdeployed to Preview – sentry-docs August 5, 2025 23:40 View deployment

remove alt text overlay
970049b

vercelBotdeployed to Preview – develop-docs August 6, 2025 16:01 View deployment

vercelBotdeployed to Preview – sentry-docs August 6, 2025 16:14 View deployment

jaffrepaul marked this pull request as ready for review August 6, 2025 17:15

This comment was marked as outdated.
Sign in to view

seer-by-sentryBot reviewed Aug 6, 2025
View reviewed changes

Comment threadsrc/components/docImageClient.tsx Outdated

fix default browser behavior
2e98bdc

jaffrepaul requested a review from coolguyzone August 6, 2025 17:26

This comment was marked as outdated.
Sign in to view

sergical reviewed Aug 6, 2025
View reviewed changes

Comment threadapp/globals.css Outdated

vercelBotdeployed to Preview – develop-docs August 6, 2025 17:33 View deployment

more specific classes
041b40d

vercelBotdeployed to Preview – sentry-docs August 6, 2025 17:46 View deployment

jaffrepauland others added 3 commits August 6, 2025 14:05

fix external image bug, update to pass all props, & ensure fallback s…
b5470a6
…ize is applied

refactor to fix event handling & propagation issues
12ca95c

[getsentry/action-github-commit] Auto commit
a636625

This comment was marked as outdated.
Sign in to view

vercelBotdeployed to Preview – develop-docs August 6, 2025 18:37 View deployment

vercelBotdeployed to Preview – sentry-docs August 6, 2025 19:05 View deployment

jaffrepaul marked this pull request as draft August 6, 2025 19:22

remove anchors
11227e4

vercelBotdeployed to Preview – develop-docs August 8, 2025 18:01 View deployment

vercelBotdeployed to Preview – sentry-docs August 8, 2025 18:14 View deployment

sergical reviewed Aug 8, 2025
View reviewed changes

vercelBotdeployed to Preview – develop-docs August 8, 2025 18:43 View deployment

This comment was marked as outdated.
Sign in to view

vercelBothad a problem deploying to Preview – sentry-docs August 8, 2025 18:49 Failure

jaffrepaul added 2 commits August 8, 2025 15:15

add PR feedback
052325c

better abstraction refactor & cleanup
0770228

vercelBotdeployed to Preview – develop-docs August 8, 2025 19:54 View deployment

This comment was marked as outdated.
Sign in to view

sergical reviewed Aug 8, 2025
View reviewed changes

vercelBotdeployed to Preview – sentry-docs August 8, 2025 20:12 View deployment

vercelBotdeployed to Preview – develop-docs August 8, 2025 20:29 View deployment

vercelBotdeployed to Preview – develop-docs August 8, 2025 20:42 View deployment

vercelBotdeployed to Preview – sentry-docs August 8, 2025 21:07 View deployment

jaffrepauland others added 3 commits August 8, 2025 21:18

Update package.json
4be0b7e
Co-authored-by: Sergiy Dybskiy <sergiy.dybskiy@sentry.io>

bugbot smash
689e57f

delegate basic events to radix, keep modifier logic
5dc9bcd

jaffrepaul force-pushed the cursor/analyze-image-display-and-repository-architecture-6c32 branch from 9200f86 to 5dc9bcdCompare August 9, 2025 01:19

vercelBotdeployed to Preview – develop-docs August 9, 2025 01:26 View deployment

This comment was marked as outdated.
Sign in to view

vercelBotdeployed to Preview – sentry-docs August 9, 2025 01:37 View deployment

bugbot fix
b2fecbf

vercelBotdeployed to Preview – develop-docs August 9, 2025 01:56 View deployment

vercelBotdeployed to Preview – sentry-docs August 9, 2025 02:07 View deployment

sergical approved these changes Aug 11, 2025
View reviewed changes

jaffrepaul merged commit 7863d47 into masterAug 11, 2025
15 checks passed

jaffrepaul deleted the cursor/analyze-image-display-and-repository-architecture-6c32 branch August 11, 2025 17:22

github-actionsBot locked and limited conversation to collaborators Aug 27, 2025

Uh oh!

Uh oh!

Conversation

jaffrepaul commented Aug 5, 2025

DESCRIBE YOUR PR

IS YOUR CHANGE URGENT?

SLA

PRE-MERGE CHECKLIST

LEGAL BOILERPLATE

EXTRA RESOURCES

Uh oh!

vercelBot commented Aug 5, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecovBot commented Aug 5, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

App Routes Affected:

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

sergical left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

sergical left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercelBot commented Aug 5, 2025•
edited
Loading

codecovBot commented Aug 5, 2025•
edited
Loading