rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-11 09:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add stack trace to boundary (#8040)

Browse Source
This commit is contained in:
Sid
2026-05-21 00:49:59 +05:30
committed by GitHub
parent f916b19a6f
commit 2d25b2cfb0
1 changed files with 58 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/bruno-app/src/pages/ErrorBoundary/index.js
View File

@@ -39,15 +39,18 @@ class ErrorBoundary extends React.Component {
render() {
if (this.state.hasError) {
const { error, errorInfo } = this.state;
const stackTrace = error?.stack || errorInfo?.componentStack || 'No stack trace available';
return (
<div className="flex text-center justify-center p-10 h-full">
<div className="bg-white rounded-lg p-10 w-full">
<div className="m-auto" style={{ width: '256px' }}>
<Bruno width={256} />
<div className="flex p-10 h-full min-h-screen gap-6">
<div className="flex-1 bg-white rounded-lg p-10 text-center flex-shrink-0">
<div className="m-auto" style={{ width: '120px' }}>
<Bruno width={120} />
</div>
<h1 className="text-2xl font-medium text-red-600 mb-2">Oops! Something went wrong</h1>
<p className="text-red-500 mb-2">
<p className="mb-2">
If you are using an official production build: the above error is most likely a bug!
<br />
Please report this under:
@@ -60,41 +63,59 @@ class ErrorBoundary extends React.Component {
</a>
</p>
<button
className="bg-red-500 text-white px-4 py-2 mt-4 rounded hover:bg-red-600 transition"
onClick={() => this.returnToApp()}
>
Return to App
</button>
<div className="mt-5 pt-4 border-t border-gray-100 flex flex-col items-center gap-2">
<label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer select-none hover:text-gray-800 transition">
<input
type="checkbox"
checked={this.state.clearCaches}
onChange={(e) => this.setState({ clearCaches: e.target.checked })}
className="cursor-pointer"
/>
Clear caches on quit
</label>
<a
href=""
className="text-sm text-red-400 border border-red-400 hover:text-red-600 px-4 py-2 rounded transition cursor-pointer"
onClick={async (e) => {
e.preventDefault();
try {
if (this.state.clearCaches) {
await this.clearCache();
}
} finally {
this.forceQuit();
}
}}
<div className="inline-flex flex-col items-center mt-4">
<button
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition"
onClick={() => this.returnToApp()}
>
Force Quit
</a>
Return to App
</button>
<div className="flex items-center my-3 w-full">
<div className="flex-1 border-t border-gray-300"></div>
<span className="px-3 text-gray-500 text-sm">or</span>
<div className="flex-1 border-t border-gray-300"></div>
</div>
<div className="mt-1 pt-1 flex flex-col items-center gap-2">
<label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer select-none hover:text-gray-800 transition">
<input
type="checkbox"
checked={this.state.clearCaches}
onChange={(e) => this.setState({ clearCaches: e.target.checked })}
className="cursor-pointer"
/>
Clear caches on quit
</label>
<a
href=""
className="text-sm text-red-400 border border-red-400 hover:text-red-600 px-4 py-2 rounded transition cursor-pointer"
onClick={async (e) => {
e.preventDefault();
try {
if (this.state.clearCaches) {
await this.clearCache();
}
} finally {
this.forceQuit();
}
}}
>
Force Quit
</a>
</div>
</div>
</div>
<div className="bg-white rounded-lg p-6 flex-shrink-0 flex-1 overflow-auto">
<h2 className="text-lg font-medium text-red-600 mb-3">Stack Trace</h2>
{error?.message && (
<p className="text-red-500 font-medium mb-2">{error.message}</p>
)}
<pre className="text-left text-sm text-gray-700 whitespace-pre-wrap break-words font-mono bg-gray-100 p-4 rounded overflow-auto max-h-full">
{stackTrace}
</pre>
</div>
</div>
);
}