Skip to content

Handle errors happen during streaming components#432

Merged
AbanoubGhadban merged 19 commits intomasterfrom
pro431-handle-erros-happen-during-streaming-components
Nov 1, 2024
Merged

Handle errors happen during streaming components#432
AbanoubGhadban merged 19 commits intomasterfrom
pro431-handle-erros-happen-during-streaming-components

Conversation

@AbanoubGhadban
Copy link
Copy Markdown
Contributor

@AbanoubGhadban AbanoubGhadban commented Aug 26, 2024 •
edited by coderabbitai Bot
Loading

Summary

Context

There are specific configurations related to error handling in React on Rails:

  • react_on_rails_pro.throw_js_errors:

    • True: The react-on-rails node package throws an error if it encounters a rendering issue. The error is propagated to the node renderer, which responds with a 400 status code.
    • False: The error message is rendered inside a simple <pre> HTML tag and sent to the node renderer. Node renderer will return a successful response (with status code 200), but with a flag indicating that the HTML contains an error.

  • react_on_rails.raise_on_prerender_error:

    • True: The react_on_rails gem raises a PrerenderError if the response from the renderer indicates any errors in the HTML.
    • False: The erroneous HTML is passed to the browser as is.
output.mp4

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced streaming server rendering support for improved performance and progressive page loading.
    • Enhanced error handling during server rendering with new configuration options for better debugging.
    • Added a new container in the HTML layout for improved styling control.

  • Bug Fixes

    • Improved error handling in asynchronous components to manage both synchronous and asynchronous errors effectively.

  • Documentation

    • Updated CHANGELOG to reflect notable changes and enhancements.

  • Chores

    • Updated configuration settings to include new error handling options during server rendering.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Aug 26, 2024 •
edited
Loading

Walkthrough

The changes in this pull request involve significant enhancements to the error handling and configuration options for server-side rendering in the ReactOnRailsPro module. Key updates include the introduction of new configuration options, improved error handling mechanisms, and modifications to various jobs in the CircleCI configuration. Additionally, several files have been updated to support streaming server rendering, including new methods and error handling capabilities, as well as updates to the changelog documenting these changes.

Changes

File Path Change Summary
.circleci/config.yml Added alias restore-dummy-app-webpack-bundle-cache; modified package-js-tests and rspec-dummy-app-node-renderer jobs for cache restoration and workflow dependencies.
CHANGELOG.md Updated to include streaming server rendering support, new helper methods, improved error handling, and removal of Ruby 2.7 support.
lib/react_on_rails_pro/configuration.rb Introduced raise_non_shell_server_rendering_errors configuration option to Configuration class.
lib/react_on_rails_pro/stream_request.rb Updated each_chunk method for improved chunk processing and error handling.
packages/node-renderer/src/shared/utils.ts Added handleStreamError function for error handling in streams.
packages/node-renderer/src/worker/handleRenderRequest.ts Integrated handleStreamError in prepareResult function for stream error handling.
packages/node-renderer/tests/htmlStreaming.test.js Enhanced error handling in tests; updated createForm and makeRequest functions for dynamic configuration.
spec/dummy/app/controllers/application_controller.rb Improved error handling for ReactOnRails::PrerenderError with detailed responses based on response state.
spec/dummy/app/views/layouts/application.html.erb Added <div> with ID page-container to wrap existing content.
spec/dummy/client/app/ror-auto-load-components/AsyncComponentsTreeForTesting.jsx Enhanced error handling in AsyncHelloWorldHooks and AsyncComponentsTreeForTesting functions.
spec/dummy/client/app/ror-auto-load-components/StreamAsyncComponents.jsx Added comments for error handling guidance in asynchronous operations.
spec/dummy/config/initializers/react_on_rails_pro.rb Added raise_non_shell_server_rendering_errors configuration option.

Poem

🐰 In the garden of code, where the changes bloom,
New errors handled, dispelling the gloom.
With streams flowing freely, and caching in place,
Our app hops along, keeping up with the pace.
So here's to the updates, both big and small,
A leap for our project, we celebrate all! 🎉

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between c0bea11 and 03feee6.

📒 Files selected for processing (12)
  • .circleci/config.yml (4 hunks)
  • CHANGELOG.md (1 hunks)
  • lib/react_on_rails_pro/configuration.rb (3 hunks)
  • lib/react_on_rails_pro/stream_request.rb (1 hunks)
  • packages/node-renderer/src/shared/utils.ts (2 hunks)
  • packages/node-renderer/src/worker/handleRenderRequest.ts (2 hunks)
  • packages/node-renderer/tests/htmlStreaming.test.js (5 hunks)
  • spec/dummy/app/controllers/application_controller.rb (1 hunks)
  • spec/dummy/app/views/layouts/application.html.erb (1 hunks)
  • spec/dummy/client/app/ror-auto-load-components/AsyncComponentsTreeForTesting.jsx (1 hunks)
  • spec/dummy/client/app/ror-auto-load-components/StreamAsyncComponents.jsx (2 hunks)
  • spec/dummy/config/initializers/react_on_rails_pro.rb (1 hunks)

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

🪧 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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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 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.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

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.

alexeyr-ci
alexeyr-ci reviewed Sep 9, 2024
View reviewed changes
Comment thread spec/dummy/app/controllers/application_controller.rb Outdated
@AbanoubGhadban AbanoubGhadban force-pushed the abanoubghadban/pro426-add-support-for-console-replay-while-streaming-component branch 2 times, most recently from a13fe8d to d563dab Compare October 29, 2024 10:39
@AbanoubGhadban AbanoubGhadban force-pushed the pro431-handle-erros-happen-during-streaming-components branch from a19a3ea to 1bb7b9c Compare October 29, 2024 13:42
AbanoubGhadban
AbanoubGhadban commented Oct 31, 2024
View reviewed changes
Comment thread packages/node-renderer/tests/htmlStreaming.test.js
path.join(__dirname, './fixtures/projects/spec-dummy/220f7a3/server-bundle-web-target.js'),
);
const bundlePath = useTestBundle
? '../../../spec/dummy/public/webpack/test/server-bundle.js'
Copy link
Copy Markdown
Contributor Author

@AbanoubGhadban AbanoubGhadban Oct 31, 2024

Choose a reason for hiding this comment

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

I preferred to use the current testing bundle instead of keeping an old version of the bundle, because the old bundle includes an outdated version of the react-on-rails JavaScript package. Consequently, if there are any changes in the latest version of React on Rails, this test will not be aware of them. In follow up PRs, I can update other tests to do the same.

AbanoubGhadban
AbanoubGhadban commented Oct 31, 2024
View reviewed changes
Comment thread .circleci/config.yml
- package-js-tests:
requires:
- install-package-node-packages
- build-dummy-app-webpack-test-bundles
Copy link
Copy Markdown
Contributor Author

@AbanoubGhadban AbanoubGhadban Oct 31, 2024

Choose a reason for hiding this comment

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

I made the dummy app test bundles be built before running js tests because I added some tests that depend on the dummy bundles as you will see in htmlStreaming.test.js file.

alexeyr-ci
alexeyr-ci reviewed Oct 31, 2024
View reviewed changes
Comment thread packages/node-renderer/tests/htmlStreaming.test.js Outdated
Comment thread packages/node-renderer/tests/htmlStreaming.test.js
Comment thread spec/dummy/client/app/ror-auto-load-components/StreamAsyncComponents.jsx
alexeyr-ci
alexeyr-ci reviewed Oct 31, 2024
View reviewed changes
Comment thread packages/node-renderer/tests/htmlStreaming.test.js
@AbanoubGhadban AbanoubGhadban force-pushed the abanoubghadban/pro426-add-support-for-console-replay-while-streaming-component branch from aa5793e to 854f268 Compare November 1, 2024 15:24
@AbanoubGhadban AbanoubGhadban force-pushed the pro431-handle-erros-happen-during-streaming-components branch from 6c88364 to 6b1be1c Compare November 1, 2024 15:27
@AbanoubGhadban AbanoubGhadban force-pushed the abanoubghadban/pro426-add-support-for-console-replay-while-streaming-component branch from 854f268 to 1216862 Compare November 1, 2024 15:46
Base automatically changed from abanoubghadban/pro426-add-support-for-console-replay-while-streaming-component to master November 1, 2024 15:51
@AbanoubGhadban AbanoubGhadban force-pushed the pro431-handle-erros-happen-during-streaming-components branch from 6b1be1c to 03feee6 Compare November 1, 2024 15:57
@AbanoubGhadban AbanoubGhadban merged commit 2dfdc78 into master Nov 1, 2024
@AbanoubGhadban AbanoubGhadban deleted the pro431-handle-erros-happen-during-streaming-components branch November 1, 2024 16:13
@AbanoubGhadban AbanoubGhadban mentioned this pull request Nov 14, 2024
Closed
@claude claude Bot mentioned this pull request Feb 26, 2026
Merged
3 tasks
This was referenced Mar 8, 2026
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
This was referenced Mar 15, 2026
Merged
Merged
Merged
This was referenced Mar 24, 2026
Merged
Merged
Merged
Closed
Merged
Merged
Merged
This was referenced Apr 18, 2026
Merged
Merged
Merged
This was referenced May 4, 2026
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexeyr-ci alexeyr-ci alexeyr-ci approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@AbanoubGhadban @alexeyr-ci