-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
docs(nextjs): Improve Session Replay platform-includes #16020
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
cb61b61 to
645276d
Compare
docs/platforms/javascript/guides/nextjs/session-replay/index.mdx
Outdated
Show resolved
Hide resolved
9eea5d3 to
03c76f9
Compare
- 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]>
95a1611 to
61123bc
Compare
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"]}> |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PlatformSection not selection 😅
There was a problem hiding this comment.
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 😭
| </Alert> | ||
| </PlatformSection> | ||
|
|
||
| <PlatformContent |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤖 🤦
There was a problem hiding this comment.
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 |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
sfanahata
left a comment
There was a problem hiding this 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.
- 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]>
Co-Authored-By: Claude <[email protected]>
|
|
||
| </SplitLayout> | ||
|
|
||
| ### PII & Privacy Considerations |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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 | |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
sfanahata
left a comment
There was a problem hiding this 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; | ||
|
|
There was a problem hiding this comment.
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)) { |
There was a problem hiding this comment.
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 😀

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:
setup/javascript.nextjs.mdxwith SplitLayout for better readabilitypre-requisites/javascript.nextjs.mdxwith client-side only noteinstall/javascript.nextjs.mdxwith skip-to-setup linkKey improvement: Session Replay is client-side only for Next.js, now clearly documented with
instrumentation-client.tsfocus.IS YOUR CHANGE URGENT?
PRE-MERGE CHECKLIST
Co-Authored-By: Claude Opus 4.5 [email protected]