Skip to content

feat(homepage): Refresh setup cards and SDK list, fix search click tracking - #18864

Open
sergical wants to merge 21 commits into
masterfrom
feat/homepage-sdk-list-and-ai-setup-pill
Open

feat(homepage): Refresh setup cards and SDK list, fix search click tracking#18864
sergical wants to merge 21 commits into
masterfrom
feat/homepage-sdk-list-and-ai-setup-pill

Conversation

@sergical

@sergical sergical commented Jul 29, 2026

Copy link
Copy Markdown
Member

DESCRIBE YOUR PR

Reapplies the homepage refresh (#18786, reverted in #18870 to keep master clean while this iterated) and adds the follow-ups below, plus three bugs found along the way.

  • Homepage lists every SDK via the same <PlatformFilter /> as /platforms/.
  • AI setup card is a click-to-copy npx @sentry/ai install pill with agent glyphs.
  • Homepage search removed in favour of the header one, which is on every other page already.
  • Fix: Algolia click tracking recorded 0 clicks against 16,743 searches/week. feat: Update Algolia index on master merge #10032 moved the Insights credentials to NEXT_PUBLIC_ALGOLIA_SEARCH_KEY, whose value 401s against the app the searches run in. Events now report a non-2xx instead of discarding it. The Vercel value has been corrected.
  • Fix: search dropdown inherited text-align: center and overran the viewport; it now caps to the space the input has and flips above only when that side is bigger.
  • Fix: duplicate sidebar separator on SDK pages.
  • Fix: /platforms/ couldn't scroll — the selector auto-opened and Radix Select locks body scroll.
  • Homepage CSS into home.module.scss; icons from react-feather.

Also drops the Algolia env references in algolia-index.yml — neither name exists as a repo or org secret, so they have resolved to empty strings since #10032. The Preview env scope is deliberately unset: Insights events carry no environment dimension, so preview clicks would land in production analytics.

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

🤖 Generated with Claude Code

@vercel

vercel Bot commented Jul 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
develop-docs Ready Ready Preview Jul 29, 2026 7:56pm
sentry-docs Ready Ready Preview Jul 29, 2026 7:56pm

Request Review

@sergical
sergical marked this pull request as ready for review July 29, 2026 12:42
Comment thread src/components/home.tsx Outdated
Comment thread src/components/home.tsx Outdated
Comment thread src/components/home.tsx
Comment thread src/components/search/index.tsx Outdated
Comment thread src/components/home.tsx Outdated
@sergical sergical changed the title feat(homepage): Add AI setup pill, full SDK list, and copy fixes feat(homepage): Refresh setup cards and SDK list, fix search click tracking Jul 29, 2026
Comment thread src/components/search/index.tsx
sergical and others added 7 commits July 29, 2026 10:56
Follow-ups to the bifurcated homepage refresh (#18786):

- Replace the popular-SDK strip with the same filterable list /platforms/ uses, so every SDK, guide, and searchable integration is reachable from the homepage.

- Rework the AI setup card around a click-to-copy pill for 'npx @sentry/ai install' (the installer from /ai/agent-plugin/), with Claude, Codex, and Cursor glyphs. Both cards now end in a single pill row so they match in height.

- Move search and Ask AI out of the hero to a 'Not finding what you're looking for?' block below the quick links, and rewrite the hero tagline.

- Point 'Set up manually' at /platforms/#platform-specific-docs instead of a same-page hash, which barely moved on tall viewports.

- Drop the duplicate sidebar separator on SDK pages. SidebarNavigation and Sidebar each rendered one, left over from when product links sat between them.

- Stop auto-opening the platform selector on /platforms/. Radix Select focuses the combobox and locks body scroll while open, so the page could not be scrolled.

- Move the homepage styles into home.module.scss with theme tokens instead of an inline style block, reuse the /platforms/ search input and the agent callout's pill styling, and de-duplicate CopyIcon.

- Track the homepage copy button under a new homepage_card metric source rather than mislabelling it as a callout.
The copy, check, and arrow glyphs were inline SVGs. react-feather is already a dependency and is what the other copy buttons use (codeBlock, codeHighlights, copyableCard, apiExamples), so use Copy, Check, and ArrowRight from it.

Removes three icon components, including two hand-rolled CopyIcon copies that predated this branch.
The header search initialised homeSearchVisible to true, which was correct when the search sat in the hero. Now that it is below the fold, the header affordance was suppressed until the IntersectionObserver ran.
…ewport

The dropdown inherited text-align from the page, so it rendered centered wherever a section used text-center. It also had a fixed 80vh cap measured against the viewport rather than the space the input actually has, so at the bottom of the homepage it ran 165px past the fold.

Set text-align on the dropdown itself, cap its height to the larger of the space above or below the input, and flip it above only when that side is the top.
sergical added 7 commits July 29, 2026 10:56
The homepage rendered its own search and suppressed the header's while it was in view. The header search already exists on every other page and on mobile, so keep only that one.

Removes homeSearchVisibility.tsx and the header's visibility branch, which existed solely to coordinate the two.
Click tracking has been dead: 16,743 searches in the last 7 days with 0 clicks recorded at every position. The insights client was initialized from NEXT_PUBLIC_ALGOLIA_SEARCH_KEY, an 805-day-old value that no longer authenticates against the app the searches run in, so insights.algolia.io rejected every event with a 401.

Search itself was unaffected because @sentry-internal/global-search bundles its own client, which is why nothing looked broken. sendBeacon ignores the response and search-insights only throws when it has no credentials at all, so there was no error to notice either.

Take the credentials from the search client so they cannot diverge again. global-search 1.4.0 exports them directly; swap to those once it ships.
Click tracking has recorded 0 clicks against 16,743 searches in the last 7 days. #10032 moved the insights credentials from the hardcoded pair that worked to NEXT_PUBLIC_ALGOLIA_SEARCH_KEY, whose value does not authenticate for the app the searches run in, so insights.algolia.io returns 401 for every event.

Nothing surfaced it: search uses the client bundled in @sentry-internal/global-search so it kept working, sendBeacon discards the response, and search-insights only throws when it has no credentials at all.

Send events through a requestFn that reports a non-2xx once per page, and document the working values in .env.example. The Vercel value still needs correcting.
Preview deploys have the app id but no search key, which initialized the client with undefined and threw on every result click.
NEXT_PUBLIC_ALGOLIA_APP_ID and NEXT_PUBLIC_ALGOLIA_SEARCH_KEY are not defined as repository or organization secrets, so the indexing workflow has been passing empty values to next build since #10032. The index itself is built with ALGOLIA_APP_ID and ALGOLIA_API_KEY, which do exist.
application/json makes the POST a non-simple request, so it preflights. A result click navigates immediately and the preflighted keepalive fetch can be cancelled, losing the event this code exists to send. text/plain keeps the body JSON while staying a simple request, matching what sendBeacon sends.

The endpoint returns access-control-allow-origin: * on the POST, so the status stays readable for reporting.
Versioned pages document superseded SDK majors and compete with the current docs for the same query: searching "express" returned five express__v7.x records in the top ten, documenting a three-year-old major. They stay reachable through the version selector on the current page, which is how the sidebar and platform lists already treat them.

54 of 10,219 indexable pages. The indexing run deletes any record id it did not just write, so the stale records clear on the next run without manual work in Algolia.
Only the manual card navigated on click. The AI card contains a button, so it uses a stretched link on its title rather than wrapping the card in an anchor, which would nest interactive elements. The copy pill sits above it and stays clickable.

cursor: copy renders as a green plus badge on macOS, which read as out of place, so it is a plain pointer now. Also rewords the hero.

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 56a2917. Configure here.

Comment thread src/components/search/index.tsx
The pun did not translate and cost non-native readers a beat to parse. This is parallel with "Set up manually" and reuses the wording of the ASK AI control already in the header. Drops the typos exemption it needed.
"Ask AI" already names the Kapa assistant in the header, which answers questions about the docs rather than installing anything, and the card hands over a command to run instead of asking a question.
Comment thread src/components/search/index.tsx
Skipping init was not enough: search-insights throws on every call until it is initialized, so each result click on a deploy without credentials was caught and reported to Sentry. Gate the tracking call on the same condition as init.
splitToChunks sized every chunk with ceil(length / numChunks), so the leading chunks filled up and the shortfall landed entirely on the last one: 22 platforms rendered 8/8/6 and the third column ended two rows short. Spread the remainder instead, giving 8/7/7.

Affects the SDK list on the homepage and /platforms/, which share the same component.
The tagline needs 622px but max-w-xl caps it at 576px, so it wrapped and orphaned "agents." onto its own line. max-w-2xl fits it, and text-balance evens the break on narrower viewports where two lines are unavoidable: at 560px that turns a 558/59 split into 287/330.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant