Skip to content

fix: resolve gray screen of death issue during long chats #7166

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

fix: resolve gray screen of death issue during long chats #7166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 107 additions & 24 deletions webview-ui/src/components/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from "react"
import { telemetryClient } from "@src/utils/TelemetryClient"
import { withTranslation, WithTranslation } from "react-i18next"
import { enhanceErrorWithSourceMaps } from "@src/utils/sourceMapUtils"
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"

type ErrorProps = {
children: React.ReactNode
Expand All @@ -11,12 +12,19 @@ type ErrorState = {
error?: string
componentStack?: string | null
timestamp?: number
hasError: boolean
errorCount: number
}

class ErrorBoundary extends Component<ErrorProps, ErrorState> {
private retryTimeoutId: NodeJS.Timeout | null = null

constructor(props: ErrorProps) {
super(props)
this.state = {}
this.state = {
hasError: false,
errorCount: 0,
}
}

static getDerivedStateFromError(error: unknown) {
Expand All @@ -31,31 +39,71 @@ class ErrorBoundary extends Component<ErrorProps, ErrorState> {
return {
error: errorMessage,
timestamp: Date.now(),
hasError: true,
}
}

async componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
const componentStack = errorInfo.componentStack || ""
const enhancedError = await enhanceErrorWithSourceMaps(error, componentStack)

// Increment error count
this.setState((prevState) => ({
errorCount: prevState.errorCount + 1,
}))

telemetryClient.capture("error_boundary_caught_error", {
error: enhancedError.message,
stack: enhancedError.sourceMappedStack || enhancedError.stack,
componentStack: enhancedError.sourceMappedComponentStack || componentStack,
timestamp: Date.now(),
errorType: enhancedError.name,
errorCount: this.state.errorCount + 1,
Copy link
Contributor

@ellipsis-dev ellipsis-dev bot Aug 18, 2025

Choose a reason for hiding this comment

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

Auto-retry check relies on 'this.state.errorCount' immediately after incrementing it with setState. Since setState is asynchronous, the value may be stale. Consider capturing the updated error count (e.g. by using the updater’s returned value or storing it in a local variable) to ensure correct retry logic.

})

this.setState({
error: enhancedError.sourceMappedStack || enhancedError.stack,
componentStack: enhancedError.sourceMappedComponentStack || componentStack,
})

// Auto-retry after 5 seconds if this is the first error
if (this.state.errorCount === 0 && !this.retryTimeoutId) {
Copy link
Contributor Author

@roomote roomote bot Aug 18, 2025

Choose a reason for hiding this comment

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

Is this intentional? The auto-retry logic checks if errorCount === 0 but we've already incremented it to 1 by this point (line 51-53). This means auto-retry will never trigger. Should this be checking errorCount === 1 instead?

Suggested change
if (this.state.errorCount === 0 && !this.retryTimeoutId) {
if (this.state.errorCount === 1 && !this.retryTimeoutId) {

this.retryTimeoutId = setTimeout(() => {
this.handleReset()
}, 5000)
}
}

componentWillUnmount() {
if (this.retryTimeoutId) {
clearTimeout(this.retryTimeoutId)
this.retryTimeoutId = null
}
}

handleReset = () => {
if (this.retryTimeoutId) {
clearTimeout(this.retryTimeoutId)
this.retryTimeoutId = null
}

this.setState({
error: undefined,
componentStack: undefined,
timestamp: undefined,
hasError: false,
// Don't reset errorCount to track total errors in session
})
}

handleReload = () => {
window.location.reload()
}

render() {
const { t } = this.props

if (!this.state.error) {
if (!this.state.hasError || !this.state.error) {
return this.props.children
}

Expand All @@ -64,30 +112,65 @@ class ErrorBoundary extends Component<ErrorProps, ErrorState> {

const version = process.env.PKG_VERSION || "unknown"

// Use a white background to ensure visibility and prevent gray screen
return (
<div>
<h2 className="text-lg font-bold mt-0 mb-2">
{t("errorBoundary.title")} (v{version})
</h2>
<p className="mb-4">
{t("errorBoundary.reportText")}{" "}
<a href="https://github.com/RooCodeInc/Roo-Code/issues" target="_blank" rel="noreferrer">
{t("errorBoundary.githubText")}
</a>
</p>
<p className="mb-2">{t("errorBoundary.copyInstructions")}</p>

<div className="mb-4">
<h3 className="text-md font-bold mb-1">{t("errorBoundary.errorStack")}</h3>
<pre className="p-2 border rounded text-sm overflow-auto">{errorDisplay}</pre>
</div>

{componentStackDisplay && (
<div>
<h3 className="text-md font-bold mb-1">{t("errorBoundary.componentStack")}</h3>
<pre className="p-2 border rounded text-sm overflow-auto">{componentStackDisplay}</pre>
<div
className="fixed inset-0 bg-vscode-editor-background overflow-auto p-4"
style={{ backgroundColor: "var(--vscode-editor-background, white)", zIndex: 9999 }}>
<div className="max-w-4xl mx-auto">
<h2 className="text-lg font-bold mt-0 mb-2 text-vscode-editor-foreground">
{t("errorBoundary.title")} (v{version})
</h2>

{this.state.errorCount === 1 && (
<div className="mb-4 p-3 bg-vscode-notifications-background border border-vscode-notifications-border rounded">
<p className="text-vscode-notifications-foreground">
The application will attempt to recover automatically in a few seconds...
Copy link
Contributor Author

@roomote roomote bot Aug 18, 2025

Choose a reason for hiding this comment

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

These UI strings should use i18n translations for consistency with the rest of the application. Consider adding translation keys for:

  • "The application will attempt to recover automatically in a few seconds..."
  • "Try Again"
  • "Reload Window"
  • "(Click to expand)"

</p>
</div>
)}

<div className="flex gap-2 mb-4">
<VSCodeButton appearance="primary" onClick={this.handleReset}>
Try Again
</VSCodeButton>
<VSCodeButton appearance="secondary" onClick={this.handleReload}>
Reload Window
</VSCodeButton>
</div>
)}

<p className="mb-4 text-vscode-editor-foreground">
{t("errorBoundary.reportText")}{" "}
<a
href="https://github.com/RooCodeInc/Roo-Code/issues"
target="_blank"
rel="noreferrer"
className="text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground">
{t("errorBoundary.githubText")}
</a>
</p>
<p className="mb-2 text-vscode-editor-foreground">{t("errorBoundary.copyInstructions")}</p>

<details className="mb-4">
<summary className="cursor-pointer text-vscode-editor-foreground font-bold mb-2">
{t("errorBoundary.errorStack")} (Click to expand)
</summary>
<pre className="p-2 border border-vscode-panel-border rounded text-sm overflow-auto bg-vscode-editor-background text-vscode-editor-foreground mt-2">
{errorDisplay}
</pre>
</details>

{componentStackDisplay && (
<details>
<summary className="cursor-pointer text-vscode-editor-foreground font-bold mb-2">
{t("errorBoundary.componentStack")} (Click to expand)
</summary>
<pre className="p-2 border border-vscode-panel-border rounded text-sm overflow-auto bg-vscode-editor-background text-vscode-editor-foreground mt-2">
{componentStackDisplay}
</pre>
</details>
)}
</div>
</div>
)
}
Expand Down
Loading
Loading