Create link error message and bug fix #2609
Conversation
Changed the error message from "Invalid key" to "Enter a valid short link". Found a bug that the destination URL allowed spaces, and then those links went to 404 pages. So now it shows an error if the user tries to create a short link with spaces in the destination url.
WalkthroughWhitespace validation for URL input fields was introduced across several components. The logic now checks for whitespace in URL values, displaying error messages if invalid input is detected. Error handling in the partner link modal was refined to provide more user-friendly feedback for specific error cases. No changes were made to exported entity signatures. Changes
Suggested reviewers
Poem
✨ Finishing Touches
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 (
|
|
@marcusljf is attempting to deploy a commit to the Dub Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/ui/partners/add-partner-link-modal.tsx (1)
43-43: Remove unused form methods from destructuring.The
setErrorandclearErrorsmethods are extracted fromuseFormbut never used in the component. Since validation is handled through theregisterfunction'svalidateoption, these can be removed.Apply this diff to clean up the unused destructuring:
-const { register, handleSubmit, watch, setError, clearErrors, formState } = useForm<FormData>({ +const { register, handleSubmit, watch, formState } = useForm<FormData>({
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/web/ui/links/destination-url-input.tsx(0 hunks)apps/web/ui/links/link-builder/controls/link-builder-destination-url-input.tsx(2 hunks)apps/web/ui/partners/add-partner-link-modal.tsx(4 hunks)
💤 Files with no reviewable changes (1)
- apps/web/ui/links/destination-url-input.tsx
🧰 Additional context used
🧠 Learnings (1)
apps/web/ui/partners/add-partner-link-modal.tsx (1)
Learnt from: TWilson023
PR: dubinc/dub#2471
File: apps/web/ui/auth/reset-password-form.tsx:52-65
Timestamp: 2025-06-04T15:09:51.562Z
Learning: In the Dub codebase, server-side validation errors for password fields are handled via toast notifications rather than using react-hook-form's setError method to display field-specific errors. This architectural pattern separates client-side validation feedback (inline) from server-side error handling (toast).
🧬 Code Graph Analysis (1)
apps/web/ui/links/link-builder/controls/link-builder-destination-url-input.tsx (1)
apps/web/ui/links/link-builder/link-builder-provider.tsx (1)
LinkFormData(13-13)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (5)
apps/web/ui/links/link-builder/controls/link-builder-destination-url-input.tsx (2)
20-20: LGTM: Proper addition of setError for validation.The addition of
setErrorto the form context destructuring is necessary for the new validation logic.
45-51: LGTM: Effective real-time URL validation implementation.The validation logic correctly prevents URLs with whitespace characters, which addresses the bug mentioned in the PR objectives. The real-time validation provides immediate feedback to users, improving the user experience.
The regex
/\s/appropriately catches all whitespace characters, and the error handling properly uses react-hook-form'ssetErrorandclearErrorsmethods.apps/web/ui/partners/add-partner-link-modal.tsx (3)
94-98: LGTM: Excellent improvement to error message handling.The error handling now properly catches the specific "Invalid key." error and replaces it with the more user-friendly "Enter a valid short link" message, which directly addresses one of the PR objectives. The fallback logic is also well-structured.
196-202: LGTM: Consistent URL validation implementation.The validation logic correctly prevents URLs with whitespace characters, consistent with the validation added to the other component. Using react-hook-form's
validateoption is appropriate for this use case.
221-225: LGTM: Proper error display for URL validation.The error display correctly shows validation errors for the URL field, providing users with clear feedback when their input contains invalid characters.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Changed the error message from "Invalid key" to "Enter a valid short link".
Found a bug that the destination URL allowed spaces, and then those links went to 404 pages. So now it shows an error if the user tries to create a short link with spaces in the destination url.
Summary by CodeRabbit
Bug Fixes
Style