Skip to content

Conversation

@acicovic
Copy link
Collaborator

@acicovic acicovic commented May 19, 2025

Description

Traffic Boost error handling was incomplete, with a few important side-effects such as:

  • Hard errors were being displayed in (often) multiple snackbar notifications (which disappear after a few seconds) instead of having a permanent place in the main UI. The user could potentially miss them (screenshots row 1).
  • Some errors didn't display at all. For example, if credentials weren't eligible for Traffic Boost, this would silently fail and show a UI to generate suggestions, leading the user to believe that the feature was working (screenshots row 2).

This PR solves for these cases by fixing/adding some error handling code, as well as introducing a way to show persistent messages in the UI. Soft errors (those allowing execution to continue) will still appear in a snackbar, while hard errors (those who result in execution stopping) will be displayed as persistent messages.

Motivation and context

Give correct feedback to the user, with persisting error messages where needed.

How has this been tested?

The current testing focused on hard errors, especially for the cases where credentials do not work for Traffic Boost (no API Secret present or given credentials don't have TB access). Tested manually using 2 different credential sets (the first eligible for TB, the second not). I haven't tested every possible error. There could be edge cases that can be addressed in the future with more extensive testing, but the current modifications should solve for most cases.

Screenshots

Before After
image image
image image

Summary by CodeRabbit

  • New Features

    • Added explicit error messages in the UI for certain error scenarios in Posts Table and Traffic Boost sidebar components.
    • TabsContent and TrafficBoostSidebar components now support a new prop to display hard error messages directly.
  • Bug Fixes

    • Improved error handling to distinguish between retryable and non-retryable errors, providing clearer feedback to users and avoiding unnecessary notifications for non-retryable errors.
  • Refactor

    • Enhanced and streamlined error handling logic across multiple components for better user feedback and maintainability.

@acicovic acicovic added this to the 3.19.0 milestone May 19, 2025
@acicovic acicovic self-assigned this May 19, 2025
@acicovic acicovic added Feature: PCI Ticket/PR related to Content Intelligence Feature: Engagement Boost Ticket/PR related to Engagement Boost labels May 19, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented May 19, 2025

📝 Walkthrough

Walkthrough

The changes introduce more explicit and consistent error handling throughout several dashboard and provider components. Hard errors (those that should not trigger retries) are now identified and surfaced to the UI, with conditional rendering to display error messages directly to users. Error handling logic is refactored to distinguish between soft and hard errors, propagate hard errors through component props, and prevent redundant notifications for non-retriable errors.

Changes

File(s) Change Summary
src/content-helper/common/content-helper-error.tsx Updated a comment describing error codes for Suggestions API errors, simplifying the explanation and removing the rationale about fetch retry avoidance due to time consumption. No logic or code changes.
src/content-helper/common/providers/stats-provider.tsx Refactored the getStats method to wrap fetch logic in a try-catch block, distinguishing ContentHelperError from generic errors, and simplifying the empty response check. No changes to exported method signatures.
src/content-helper/dashboard-page/components/posts-table/component.tsx Enhanced error handling in the PostsTable component: errors are now classified and stored in state, with UI feedback for all errors except "no data" errors. The error is displayed above the "no results" message if present. No changes to component props or signature.
src/content-helper/dashboard-page/pages/traffic-boost/provider.ts Broadened error handling in generateBatchSuggestions to rethrow any ContentHelperError with retryFetch set to a falsy value, in addition to previous conditions. No changes to exported entity signatures.
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs-content.tsx Added an optional hardError prop to TabsContent. If present, the component short-circuits normal rendering and displays the error message. Updated prop types and component signature accordingly.
src/content-helper/dashboard-page/pages/traffic-boost/sidebar/sidebar.tsx Added an optional hardError prop to TrafficBoostSidebar and passed it to TabsContent. Updated prop types and component signature. No other logic changes.
src/content-helper/dashboard-page/pages/traffic-boost/single-post-component.tsx Introduced isHardError to identify non-retriable errors. Modified notification logic to skip snackbars for hard errors and passed hardError to TrafficBoostSidebar only for hard errors. Updated comments and effect dependencies. No changes to exported component signatures.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant PostsTable
    participant StatsProvider
    participant TrafficBoostProvider
    participant TrafficBoostSidebar
    participant TabsContent

    User->>PostsTable: Initiate data fetch
    PostsTable->>StatsProvider: getStats()
    StatsProvider-->>PostsTable: PostStats[] or Error
    alt Error occurs
        PostsTable->>PostsTable: Classify error (ContentHelperError or generic)
        PostsTable->>PostsTable: Set error state
        PostsTable-->>User: Display error message (except "no data" error)
    else Success
        PostsTable-->>User: Display data
    end

    User->>TrafficBoostProvider: generateBatchSuggestions()
    TrafficBoostProvider-->>TrafficBoostProvider: Check error type
    alt Hard error (retryFetch falsy)
        TrafficBoostProvider-->>TrafficBoostSidebar: Pass hardError prop
        TrafficBoostSidebar->>TabsContent: Pass hardError prop
        TabsContent-->>User: Display hard error message
    else Soft error or success
        TrafficBoostProvider-->>TrafficBoostSidebar: No hardError
        TabsContent-->>User: Display normal tab content or soft error via snackbar
    end
Loading

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

npm warn config production Use --omit=dev instead.
npm error Exit handler never called!
npm error This is an error with npm itself. Please report this error at:
npm error https://github.com/npm/cli/issues
npm error A complete log of this run can be found in: /.npm/_logs/2025-05-20T07_54_47_089Z-debug-0.log

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.


Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.


📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 160d588 and 989a1c4.

⛔ Files ignored due to path filters (2)
  • build/content-helper/dashboard-page.asset.php is excluded by !build/**
  • build/content-helper/dashboard-page.js is excluded by !build/**
📒 Files selected for processing (1)
  • src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs-content.tsx (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/content-helper/dashboard-page/pages/traffic-boost/sidebar/components/tabs-content.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: E2E against WordPress latest
✨ Finishing Touches
  • 📝 Generate Docstrings

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@acicovic
Copy link
Collaborator Author

A last todo item for this PR is to modify the message when the credentials are not eligible (screenshot 4). I think we should state the tiers where the feature is available, as well as have a link to the Lobby Post and/or docs.

@acicovic acicovic marked this pull request as ready for review May 19, 2025 11:55
@acicovic acicovic requested a review from a team as a code owner May 19, 2025 11:55
Copy link
Contributor

@alecgeatches alecgeatches left a comment

Choose a reason for hiding this comment

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

Looks great to me! I also verified that hard API errors show up on the main Traffic Boost page, e.g.

Screenshot 2025-05-19 at 11 09 54 AM

@acicovic
Copy link
Collaborator Author

This is the error message I've come up with when credentials are ineligible for TB. This is what we'll be shipping with at the moment:

Traffic Boost is currently not enabled for your Site ID.

Information about requesting access to Traffic Boost can be found here.

cc @LauraKalnicky FYI.

@acicovic
Copy link
Collaborator Author

image

@acicovic acicovic merged commit 6d096ee into add/traffic-boost May 20, 2025
39 checks passed
@acicovic acicovic deleted the update/improve-traffic-boost-error-handling branch May 20, 2025 08:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature: Engagement Boost Ticket/PR related to Engagement Boost Feature: PCI Ticket/PR related to Content Intelligence

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants