LET-64 | logic: Identify users in Sentry from Next.js service through Clerk's SDK #166
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ClerkProvider
participant SentryUserProvider
participant Sentry
User->>ClerkProvider: Authenticate/Login
ClerkProvider-->>SentryUserProvider: Provide user/auth data
SentryUserProvider->>Sentry: Set user context/tags
SentryUserProvider->>Sentry: On logout, clear user context
Sentry->>Sentry: On error event, run beforeSend hook
Sentry->>Sentry: Add fingerprint & user metadata to event
Sentry->>Sentry: Send enriched event
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related issues
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used🧠 Learnings (2)📓 Common learningssentry.client.config.ts (3)Learnt from: pingSubhajit Learnt from: pingSubhajit Learnt from: pingSubhajit 🔇 Additional comments (2)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
components/providers/SentryUserProvider.tsx (2)
19-56: Consider consolidating user context logic and review PII handling.The main authentication effect correctly handles user context setting, but there are opportunities for improvement:
- PII Consideration: Email addresses are considered PII. Consider using a hashed version or just the domain:
- email: user.emailAddresses[0]?.emailAddress, + email: user.emailAddresses[0]?.emailAddress?.replace(/^[^@]+/, '***'),
- Reduce Duplication: Setting both
getCurrentScope()and global scope might be redundant. The globalsetUser/setTagcalls should be sufficient:- // Set user context on both current scope and global scope for maximum compatibility - Sentry.getCurrentScope().setUser(sentryUser) Sentry.setUser(sentryUser) - - // Set additional context tags - Sentry.getCurrentScope().setTag('user.onboardingComplete', user.publicMetadata?.onboardingComplete || false) - Sentry.getCurrentScope().setTag('user.currentStep', user.publicMetadata?.currentOnboardingStep || 'unknown') Sentry.setTag('user.onboardingComplete', user.publicMetadata?.onboardingComplete || false) Sentry.setTag('user.currentStep', user.publicMetadata?.currentOnboardingStep || 'unknown')
75-83: Improve cleanup logic to be more explicit.The cleanup effect only clears user context when
userIdis falsy, but it should clear context regardless on unmount to prevent stale data.// Handle cleanup when component unmounts useEffect(() => { return () => { // Clear user context on unmount to prevent stale data - if (!userId) { Sentry.setUser(null) - } } - }, [userId]) + }, [])This ensures consistent cleanup regardless of the current auth state.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
app/layout.tsx(2 hunks)components/providers/SentryUserProvider.tsx(1 hunks)sentry.client.config.ts(1 hunks)sentry.server.config.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: pingSubhajit
PR: pingSubhajit/letraz#98
File: lib/education/actions.ts:36-47
Timestamp: 2025-01-31T08:29:21.935Z
Learning: During the migration phase of the NextJS frontend to use the dedicated backend server (LET-39), error handling improvements should be deferred as they are not a priority.
Learnt from: pingSubhajit
PR: pingSubhajit/letraz#98
File: lib/user-info/actions.ts:11-28
Timestamp: 2025-02-01T05:41:08.418Z
Learning: Functions in the codebase that use `auth()` from Clerk (e.g., `addOrUpdateUserInfoToDB`) don't need session null checks as they are only called when a session is guaranteed to be present, with session validation being handled on the consumer side.
app/layout.tsx (2)
Learnt from: pingSubhajit
PR: #145
File: package.json:28-28
Timestamp: 2025-07-11T17:30:08.789Z
Learning: The @knocklabs/react package includes all required Knock notification functionality including notification feed components, eliminating the need for separate packages like @knocklabs/react-notification-feed and @knocklabs/client.
Learnt from: pingSubhajit
PR: #145
File: components/notifications/NotificationBell.tsx:11-13
Timestamp: 2025-07-11T17:19:06.970Z
Learning: The codebase uses error boundaries to handle runtime errors from components that depend on external services like Knock, rather than adding conditional safety checks around hook calls which would violate the Rules of React.
🧬 Code Graph Analysis (1)
app/layout.tsx (4)
components/providers/SentryUserProvider.tsx (1)
SentryUserProvider(15-86)components/providers/KnockProvider.tsx (1)
KnockProvider(29-58)components/ui/tooltip.tsx (1)
TooltipProvider(30-30)components/ui/sonner.tsx (1)
Toaster(28-28)
🔇 Additional comments (5)
app/layout.tsx (2)
13-13: LGTM! Correct import and provider integration.The import follows the established pattern and the provider is correctly positioned in the component hierarchy.
39-48: Provider hierarchy verified – SentryUserProvider correctly nested inside ClerkProviderSentryUserProvider is wrapped by
<ClerkProvider>in app/layout.tsx (lines 32–53), so user context will propagate as intended. No further changes required.sentry.server.config.ts (1)
17-17: LGTM! Debug flag correctly set for production.The debug flag is appropriately disabled for production environments.
components/providers/SentryUserProvider.tsx (1)
1-10: LGTM! Proper component setup with correct client directive.The component is correctly marked as client-side with proper imports and interface definition.
sentry.client.config.ts (1)
39-40: LGTM! Improved debug flag logic.Using
NODE_ENV === 'development'for the debug flag is more appropriate than checking the Vercel environment, as it aligns with standard Node.js development practices.
sourabhrathourr
left a comment
sourabhrathourr
left a comment
There was a problem hiding this comment.
Observation: This PR adds user identification in Sentry using Clerk’s SDK for the Next.js service. By associating Sentry events with authenticated users, it enhances error monitoring and debugging.
Remark: The PR is ready to be merged.
pingSubhajit
deleted the
subhajit/let-64-logic-identify-users-in-sentry-from-nextjs-service-through
branch
… Clerk's SDK (#166) * feat: identify users in Sentry from Next.js service through Clerk's SDK * fix: improve type safety in user ID handling in sentry configs * chore: remove duplicate redundant logic
Issue:
LET-64 | logic: Identify users in Sentry from NextJS service through Clerk's SDK
Description:
Enhancing the Sentry integration in the Next.js frontend to effectively identify users using Clerk's authentication SDK.
Changes Made:
Sentry.setUser()method to set user context in Sentry with relevant attributes.Closing Note:
This PR is crucial as it enables associating errors and performance data in Sentry with specific users, facilitating effective debugging, targeted issue resolution, and improved user experience.
Summary by CodeRabbit
New Features
Chores