Skip to content

Conversation

@sergical
Copy link
Member

@sergical sergical commented Jan 14, 2026

https://linear.app/getsentry/issue/DEVEX-233/session-replay

DESCRIBE YOUR PR

Improves Next.js Session Replay documentation following patterns from #15936 and #15919:

Changes:

  • Rewrite setup/javascript.nextjs.mdx with SplitLayout for better readability
  • Add pre-requisites/javascript.nextjs.mdx with client-side only note
  • Update install/javascript.nextjs.mdx with skip-to-setup link
  • Keep privacy options and lazy-loading sections inline

Key improvement: Session Replay is client-side only for Next.js, now clearly documented with instrumentation-client.ts focus.

IS YOUR CHANGE URGENT?

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

PRE-MERGE CHECKLIST

  • 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

Co-Authored-By: Claude Opus 4.5 [email protected]

@vercel
Copy link

vercel bot commented Jan 14, 2026

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

Project Deployment Review Updated (UTC)
develop-docs Ready Ready Preview, Comment Jan 22, 2026 10:04pm
sentry-docs Ready Ready Preview, Comment Jan 22, 2026 10:04pm

Request Review

@codeowner-assignment codeowner-assignment bot requested review from a team January 14, 2026 22:00
@sergical sergical force-pushed the docs/nextjs-session-replay-improvements branch 2 times, most recently from cb61b61 to 645276d Compare January 14, 2026 22:03
sergical and others added 6 commits January 21, 2026 11:03
- Rewrite setup with SplitLayout for better readability
- Add client-side only note in pre-requisites
- Simplify install with skip-to-setup link
- Keep privacy and lazy-loading sections with links

Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Create Next.js-specific session-replay guide
- Use SplitLayout for Canvas Recording, CSP, and Sampling sections
- Simplified content focused on Next.js client-side config

Co-Authored-By: Claude Opus 4.5 <[email protected]>
…nt Setup

- Add sidebar_section: features to show in Features sidebar
- Remove Set Up section (content is in platform-includes)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Delete 5 duplicate files (react, vue, svelte, ember, gatsby) that only
differed by import statement. They now fall back to javascript.mdx which
shows the correct SDK name dynamically via PlatformSdkPackageName.

Co-Authored-By: Claude <[email protected]>
@sergical sergical force-pushed the docs/nextjs-session-replay-improvements branch from 95a1611 to 61123bc Compare January 21, 2026 17:43
sergical and others added 3 commits January 21, 2026 12:51
Falls back to common session-replay page now that platform-includes
are consolidated.

Co-Authored-By: Claude <[email protected]>
…locks

- Add sdkPackage to CodeContext, computed from platform in DocPage
- Handle ___SDK_PACKAGE___ replacement in makeKeywordsClickable
- Update session-replay setup to use dynamic SDK package name

Co-Authored-By: Claude <[email protected]>
Prevents the keyword from falling through to the generic handler
which would render undefined/empty on non-platform pages.

Co-Authored-By: Claude <[email protected]>

To set up the integration, add the following to your Sentry initialization. There are several options you can pass to the integration constructor. See the [configuration documentation](/platforms/javascript/session-replay/configuration/) for more details.

<PlatformSection supported={["javascript.nextjs"]}>
Copy link
Member

Choose a reason for hiding this comment

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

I don't see the PlatformSelection component in the preview. Is it because there's only "javascript.nextjs" being added to the supported prop?

Copy link
Member Author

Choose a reason for hiding this comment

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

CleanShot 2026-01-22 at 13 38 59 its the alert here that specifies that in nextjs you only need to add session replay integration to `instrumentation-client.ts` vs all the configs

Copy link
Member Author

Choose a reason for hiding this comment

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

PlatformSection not selection 😅

Copy link
Member

Choose a reason for hiding this comment

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

Oh shoot it's Platform Section 😭

@sergical sergical requested a review from nikolovlazar January 22, 2026 18:42
</Alert>
</PlatformSection>

<PlatformContent
Copy link
Contributor

Choose a reason for hiding this comment

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

There seems to be a line in here that is now redundant from the line above: Session Replay is configured in your client-side initialization file only.

We're already saying that in the alert now.

Copy link
Member Author

Choose a reason for hiding this comment

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

good catch, removed from prerequisites since this alert is more contextual at the setup step, great catch!

<PlatformSection supported={["javascript.nextjs"]}>
<Alert>

Session Replay only runs in the browser, so you only need to configure it in `instrumentation-client.ts`. The server (`instrumentation-server.ts`) and edge (`instrumentation-edge.ts`) entry points run in Node.js and Edge runtimes where Replay is not available.
Copy link
Member

Choose a reason for hiding this comment

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

For the server and edge, weren't these sentry.server.config.js and sentry.edge.config.js, being dynamically imported in instrumentation.js?

Copy link
Member Author

Choose a reason for hiding this comment

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

🤖 🤦

Copy link
Member

Choose a reason for hiding this comment

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

Good thing we caught it 😁


</SplitLayout>

### Verify
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we have 2 verify sections?

Copy link
Contributor

Choose a reason for hiding this comment

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

I suggest moving this additional content up to the higher verify section.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, I see, this is in an includes. Hm. I think it's confusing to have twice. I also think the additional information toward the bottom is also more useful up here.

Copy link
Contributor

@sfanahata sfanahata left a comment

Choose a reason for hiding this comment

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

The JS and nextjs includes don't seem to be playing together altogether well. Two verify sections, PII maybe in a weird place. Just checked on a few frameworks and seeing duplications there too. Seeing some updates coming through so will wait to preview again.

sergical and others added 3 commits January 22, 2026 14:53
- Use PlatformSection to show different content for vanilla JS vs framework SDKs
- Add migration document link to Next.js prerequisites

Co-Authored-By: Claude <[email protected]>
The base javascript.mdx fallback now handles this case.

Co-Authored-By: Claude <[email protected]>

</SplitLayout>

### PII & Privacy Considerations
Copy link
Contributor

@jaffrepaul jaffrepaul Jan 22, 2026

Choose a reason for hiding this comment

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

This should probably slide up under Privacy Options since it's related and Lazy loading is now between them in the flow.

Copy link
Member Author

Choose a reason for hiding this comment

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

great callout!

### Recommended Production Sample Rates
**Why keep `replaysOnErrorSampleRate` at 1.0?** Error sessions provide the most valuable debugging context, so capturing all of them is recommended regardless of traffic volume.
| Traffic Volume | Session Rate | Error Rate |
Copy link
Contributor

Choose a reason for hiding this comment

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

Was trimming the Description column intentional? Right column has a funny width without it.

Copy link
Member Author

Choose a reason for hiding this comment

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

yeah i think it's pretty self explanatory, but i think it also makes sense to put the table inside the left split view

Copy link
Contributor

@sfanahata sfanahata left a comment

Choose a reason for hiding this comment

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

Love it!

- Move PII & Privacy Considerations section to be directly after Privacy Options
- Move sample rates table into the left side of the split view section

Co-Authored-By: Claude <[email protected]>
export const KEYWORDS_REGEX = /\b___(?:([A-Z_][A-Z0-9_]*)\.)?([A-Z_][A-Z0-9_]*)___\b/g;
export const ORG_AUTH_TOKEN_REGEX = /___ORG_AUTH_TOKEN___/g;
export const SDK_PACKAGE_REGEX = /___SDK_PACKAGE___/g;

Copy link
Contributor

Choose a reason for hiding this comment

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

I think you might have issues with these regex updates. You're not adding the issue but following some slippery patterns in this component. I was treading lightly in here awhile back when I added the index reset but this thing could use an overhaul. That's not part of this PR but, I'll point to some things that might cause problems:

The global flag on these regex's causes some downstream trickery and they probably don't need to be stateful at all

Add table-fit-content wrapper to remove min-width constraint
on the last column, preventing unnecessary horizontal scroll.

Co-Authored-By: Claude <[email protected]>

if (ORG_AUTH_TOKEN_REGEX.test(child)) {
makeOrgAuthTokenClickable(arr, child);
} else if (SDK_PACKAGE_REGEX.test(child)) {
Copy link
Contributor

Choose a reason for hiding this comment

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

.test & replace will both run the regex, I think (worth checking) you can just hit the replace without the test, cuz you it won't replace if there's no match.

Also might be worth setting '@sentry/browser' as a const. May not cause issues, but this feels scary 😀

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.

5 participants