Skip to content
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

RED-33: Add error codes to places where we display error toasts/etc to the user #7

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from

Conversation

dnlbui
Copy link
Contributor

@dnlbui dnlbui commented Apr 25, 2024

https://linear.app/shm/issue/RED-33/add-error-codes-to-places-where-we-display-error-toastsetc-to-the-user
Summary: Added error codes, context detail to error message, and retry logic to fetcher

@dnlbui dnlbui requested a review from magonjr April 25, 2024 17:30
Copy link

linear bot commented Apr 25, 2024

magonjr
magonjr previously approved these changes Apr 25, 2024
Copy link
Contributor

@magonjr magonjr left a comment

Choose a reason for hiding this comment

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

LGTM

@chrypnotoad
Copy link
Contributor

@CodiumAI-Agent /review

@CodiumAI-Agent
Copy link

PR Review 🔍

⏱️ Estimated effort to review [1-5]

4, because the PR involves significant changes to the fetcher function, including error handling, retry logic, and custom error class implementation. The added complexity and the critical nature of the fetcher function in application data flow necessitate a thorough review to ensure reliability and maintainability.

🧪 Relevant tests

No

⚡ Possible issues

Retry Logic Concern: The retry logic does not differentiate between types of errors. It retries for all exceptions, which might not be appropriate for certain types of errors like 403 unauthorized, where retrying would not change the outcome.

Error Handling: The custom error class FetchError is used inconsistently. For instance, it throws a FetchError for a 403 status but a generic Error for other fetch failures. This inconsistency could lead to difficulties in error handling upstream.

🔒 Security concerns

No

Code feedback:
relevant filehooks/fetcher.ts
suggestion      

Consider adding specific error handling for network errors (like timeouts or DNS failures) to provide better user feedback and potentially retry these errors, as they are often transient. [important]

relevant lineif (isDev()) {

relevant filehooks/fetcher.ts
suggestion      

Refactor the retry logic to exclude certain error types from retries, such as HTTP 403 errors, which are unlikely to be resolved by retrying. This can prevent unnecessary requests and improve the user experience. [important]

relevant lineif (isDev()) {

relevant filehooks/fetcher.ts
suggestion      

To improve debugging, consider logging more context-specific information, such as the error status code and the request method, especially when retries are involved. [medium]

relevant line`Error encountered for request:`, input, "with init:", init, "Error:", error

relevant filehooks/fetcher.ts
suggestion      

Implement a backoff strategy for retries to handle high load or service unavailability scenarios more gracefully. This could involve increasing the delay between retries exponentially. [medium]

relevant lineawait delay(retryDelay)

@chrypnotoad
Copy link
Contributor

@CodiumAI-Agent /improve

@CodiumAI-Agent
Copy link

PR Code Suggestions ✨

CategorySuggestion                                                                                                                                    Score
Maintainability
Consolidate error handling logic in the catch block

Refactor the error handling in the catch block to consolidate the error logging and toast
display logic, reducing redundancy and improving maintainability.

hooks/fetcher.ts [80-91]

-if (isDev()) {
-  console.error(
-    `Error encountered for request:`, input, "with init:", init, "Error:", error
-  )
-}
-if (
-  error instanceof FetchError &&
-  error.status === 403
-) {
+if (error instanceof FetchError) {
+  if (isDev()) {
+    console.error(`Error encountered for request:`, input, "with init:", init, "Error:", error)
+  }
   showErrorToast(showToast, error.status, input)
   throw error
 }
 
Suggestion importance[1-10]: 8

Why: Consolidating the error handling logic in the catch block reduces redundancy and improves maintainability. This refactor makes the code cleaner and easier to manage, addressing a significant aspect of code quality.

8
Possible issue
Add logging for error details on specific HTTP status codes

To enhance error handling, consider logging data.errorDetails not only when res.ok is
false but also for specific status codes like 403 and 500 where additional context might
be crucial for debugging.

hooks/fetcher.ts [66-68]

 if (res.status === 403) {
+  console.log(data.errorDetails)
   await authService.logout(apiBase)
   throw new FetchError("Unauthorized", res.status)
 }
 
Suggestion importance[1-10]: 7

Why: Adding logging for error details on specific HTTP status codes can provide valuable context for debugging. This suggestion enhances error handling and can help in identifying issues more effectively.

7
Best practice
Simplify the check for undefined or null status values

Replace the manual check for status !== undefined && status !== null with a more concise
and idiomatic check using status != null which covers both null and undefined.

hooks/fetcher.ts [37-39]

 const baseMessage = `Error${
-  status !== undefined && status !== null ? ` (${status})` : ""
+  status != null ? ` (${status})` : ""
 }: An error occurred while retrieving ${lastSegment}.`
 
Suggestion importance[1-10]: 6

Why: The suggested change simplifies the check for undefined or null status values, making the code more concise and idiomatic. While this is a good practice, it is a minor improvement and does not address a major issue.

6
Enhancement
Improve URL parameter extraction using URLSearchParams

Consider using URLSearchParams to extract query parameters safely and effectively instead
of manually splitting the URL string. This approach avoids potential issues with URL
formats and improves code readability.

hooks/fetcher.ts [32-34]

 const url = new URL(urlString)
-const lastSegment =
-  url.pathname.split("/").filter(Boolean).pop() || "resource"
+const params = new URLSearchParams(url.search)
+const lastSegment = params.get('lastSegment') || 'resource'
 
Suggestion importance[1-10]: 3

Why: While using URLSearchParams can be a good practice for extracting query parameters, the current code is extracting the last segment of the URL path, not query parameters. The suggestion does not accurately address the existing functionality, making it less relevant.

3

@chrypnotoad chrypnotoad force-pushed the SHM-3768/fetcher-toast-detail branch from cf4725c to f4e3e40 Compare May 22, 2024 22:35
@dnlbui dnlbui force-pushed the SHM-3768/fetcher-toast-detail branch from f4e3e40 to 1a945b7 Compare July 23, 2024 17:22
@dnlbui
Copy link
Contributor Author

dnlbui commented Jul 23, 2024

commenting to get reviewed again by @magonjr

@magonjr magonjr self-requested a review July 24, 2024 14:10
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.

4 participants