feat: add ErrorBoundary to prevent full-page crashes#3350
Merged
seefs001 merged 2 commits intoQuantumNous:mainfrom Apr 8, 2026
Merged
feat: add ErrorBoundary to prevent full-page crashes#3350seefs001 merged 2 commits intoQuantumNous:mainfrom
seefs001 merged 2 commits intoQuantumNous:mainfrom
Conversation
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdded a React ErrorBoundary component, wrapped the app with it in PageLayout, and added two i18n keys (page-render error message and reload label) across multiple locale JSON files. Changes
Sequence Diagram(s)sequenceDiagram
participant App as App (child)
participant EB as ErrorBoundary
participant Console as Console
participant User as User
participant Browser as Browser
App->>EB: render / lifecycle (throws error)
EB->>EB: getDerivedStateFromError() sets hasError=true
EB->>Console: componentDidCatch(error, errorInfo) -> console.error(...)
EB-->>User: render fallback UI (message + "Reload" button)
User->>EB: clicks "Reload" button
EB->>Browser: window.location.reload()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/components/common/ErrorBoundary.jsx`:
- Around line 37-46: ErrorBoundary currently uses hardcoded Chinese strings for
the fallback description and Button label; wrap the ErrorBoundary class
component with the withTranslation() HOC and replace the hardcoded literals with
translated keys via this.props.t(...) (e.g., replace
description={this.props.description || '页面渲染出错，请刷新页面重试'} and the Button children
'刷新页面' with this.props.t('error.renderFailed') and
this.props.t('action.refresh') or your chosen keys), ensuring you import
withTranslation and export the component as withTranslation()(ErrorBoundary).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 3fa33442-9d44-4467-9976-6e3d9c732257
📒 Files selected for processing (2)
web/src/components/common/ErrorBoundary.jsxweb/src/components/layout/PageLayout.jsx
This comment was marked as spam.
This comment was marked as spam.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/i18n/locales/ru.json`:
- Around line 3326-3328: The two new Russian translations were added at the JSON
root instead of under the "translation" namespace, so i18next won't find them;
move the entries with keys "页面渲染出错，请刷新页面重试" and "刷新页面" into the existing
"translation" object alongside the other keys (same structure used for lines
3-3325) so the lookup for those Chinese source strings resolves correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cc5881e0-0c14-41f9-a904-fbaaceae98b2
📒 Files selected for processing (7)
web/src/i18n/locales/en.jsonweb/src/i18n/locales/fr.jsonweb/src/i18n/locales/ja.jsonweb/src/i18n/locales/ru.jsonweb/src/i18n/locales/vi.jsonweb/src/i18n/locales/zh-CN.jsonweb/src/i18n/locales/zh-TW.json
✅ Files skipped from review due to trivial changes (4)
- web/src/i18n/locales/zh-TW.json
- web/src/i18n/locales/zh-CN.json
- web/src/i18n/locales/fr.json
- web/src/i18n/locales/en.json
🚧 Files skipped from review as they are similar to previous changes (2)
- web/src/i18n/locales/ja.json
- web/src/i18n/locales/vi.json
Collaborator
|
改一下上面的内容就可以合并了 |
goodmorning10
force-pushed
the
feat/error-boundary
branch
from
2cd0bea to
559c98f
Compare
seefs001
previously approved these changes
Apr 8, 2026
| "例如：gpt-4.1-nano,regex:^claude-.*$,regex:^sora-.*$": "Example: gpt-4.1-nano,regex:^claude-.*$,regex:^sora-.*$", | ||
| "支持精确匹配；使用 regex: 开头可按正则匹配。": "Supports exact matching. Use a regex: prefix for regex matching." | ||
| } | ||
| }, |
seefs001
approved these changes
Apr 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📝 Description
Currently the project has no React Error Boundary. Any JS error thrown during component rendering (e.g. unexpected data from the backend)
causes a full white screen crash with no recovery option.
This PR adds an ErrorBoundary component wrapping the content area in PageLayout. On error, it displays a Semi UI styled error page with a
reload button. Header, sidebar, and footer remain functional.
🚀 Type of change
🔗 Related Issue
✅ Checklist
📸 Proof of Work
This PR updates 9 files in total.
Added
web/src/components/common/ErrorBoundary.jsxas a class-based React ErrorBoundary usinggetDerivedStateFromErrorandcomponentDidCatch.Updated
web/src/components/layout/PageLayout.jsxto wrap<App />with<ErrorBoundary>.Added the related ErrorBoundary i18n texts to:
web/src/i18n/locales/en.jsonweb/src/i18n/locales/fr.jsonweb/src/i18n/locales/ja.jsonweb/src/i18n/locales/ru.jsonweb/src/i18n/locales/vi.jsonweb/src/i18n/locales/zh-CN.jsonweb/src/i18n/locales/zh-TW.jsonNo new dependencies were added, supports dark mode.
The implementation uses the existing
@douyinfe/semi-uiand@douyinfe/semi-illustrationscomponents.