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 in static/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 in 2311.js:

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

Files in 9567.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>

src/components/docImageClient.tsx

app/globals.css

…ize is applied

sergical

the 🤖 is almost there! 😅

package.json

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

src/components/imageLightbox/index.tsx

+            {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

src/components/imageLightbox/index.tsx

+  };
+
+  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

src/components/imageLightbox/index.tsx

+  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

src/components/imageLightbox/index.tsx

        <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

src/components/imageLightbox/index.tsx

+    <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>

vercel bot had 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 handling Aug 5, 2025

cursoragent and 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

vercel bot deployed to Preview – develop-docs August 5, 2025 23:14 View deployment

vercel bot deployed to Preview – sentry-docs August 5, 2025 23:40 View deployment

remove alt text overlay

970049b

vercel bot deployed to Preview – develop-docs August 6, 2025 16:01 View deployment

vercel bot deployed 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-sentry bot reviewed Aug 6, 2025

View reviewed changes

src/components/docImageClient.tsx Outdated Show resolved Hide resolved

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

app/globals.css Outdated Show resolved Hide resolved

vercel bot deployed to Preview – develop-docs August 6, 2025 17:33 View deployment

more specific classes

041b40d

vercel bot deployed to Preview – sentry-docs August 6, 2025 17:46 View deployment

jaffrepaul and 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

vercel bot deployed to Preview – develop-docs August 6, 2025 18:37 View deployment

vercel bot deployed 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

vercel bot deployed to Preview – develop-docs August 8, 2025 18:01 View deployment

vercel bot deployed to Preview – sentry-docs August 8, 2025 18:14 View deployment

sergical reviewed Aug 8, 2025

View reviewed changes

vercel bot deployed to Preview – develop-docs August 8, 2025 18:43 View deployment

This comment was marked as outdated.

Sign in to view

vercel bot had 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

vercel bot deployed 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

vercel bot deployed to Preview – sentry-docs August 8, 2025 20:12 View deployment

vercel bot deployed to Preview – develop-docs August 8, 2025 20:29 View deployment

vercel bot deployed to Preview – develop-docs August 8, 2025 20:42 View deployment

vercel bot deployed to Preview – sentry-docs August 8, 2025 21:07 View deployment

jaffrepaul and 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 5dc9bcd Compare August 9, 2025 01:19

vercel bot deployed to Preview – develop-docs August 9, 2025 01:26 View deployment

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview – sentry-docs August 9, 2025 01:37 View deployment

bugbot fix

b2fecbf

vercel bot deployed to Preview – develop-docs August 9, 2025 01:56 View deployment

vercel bot deployed 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 master Aug 11, 2025
15 checks passed

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

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

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!

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

Uh oh!

Uh oh!

codecov bot 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

vercel bot commented Aug 5, 2025 •

edited

Loading

codecov bot commented Aug 5, 2025 •

edited

Loading