update error handling

This commit is contained in:
Andrew Pareles 2024-11-26 02:16:57 -08:00
parent f6f6259f23
commit 8ff4f1c6e1
2 changed files with 30 additions and 18 deletions

View file

@ -248,7 +248,7 @@ export const SidebarChat = () => {
setInstructions('');
formRef.current?.reset(); // reset the form's text when clear instructions or unexpected behavior happens
threadsStateService.setStaging([]) // clear staging
setLatestError('')
setLatestError(null)
}

View file

@ -3,30 +3,43 @@ import { AlertCircle, ChevronDown, ChevronUp, X } from 'lucide-react';
import { getCmdKey } from '../../../getCmdKey.js';
const opaqueMessage = `\
Unfortunately, Void can't see the full error. However, you should be able to find more details by pressing ${getCmdKey()}+Shift+P, typing "Toggle Developer Tools", and looking at the console.\n
This error often means you have an incorrect API key. If you're self-hosting your own server, it might mean your CORS headers are off, and you should make sure your server's response has the header "Access-Control-Allow-Origins" set to "*", or at least allows "vscode-file://vscode-app".`
// const opaqueMessage = `\
// Unfortunately, Void can't see the full error. However, you should be able to find more details by pressing ${getCmdKey()}+Shift+P, typing "Toggle Developer Tools", and looking at the console.\n
// This error often means you have an incorrect API key. If you're self-hosting your own server, it might mean your CORS headers are off, and you should make sure your server's response has the header "Access-Control-Allow-Origins" set to "*", or at least allows "vscode-file://vscode-app".`
// if ((error instanceof Error) && (error.cause + '').includes('TypeError: Failed to fetch')) {
// e = error as any
// e['Void Team'] = opaqueMessage
// }
type Details = {
message: string,
name: string,
// stack: string | null,
cause: string | null,
code: string | null,
additional: Record<string, any>
}
// Get detailed error information
const getErrorDetails = (error: unknown) => {
let details: { message: string, name: string, stack: string | null, cause: string | null, code: string | null, additional: Record<string, any> };
let details: Details;
let e: Error & { [other: string]: undefined | any }
// If fetch() fails, it gives an opaque message. We add extra details to the error.
if ((error instanceof Error) && (error.cause + '').includes('TypeError: Failed to fetch')) {
e = error as any
e['Void Team'] = opaqueMessage
}
else if (error instanceof Error) {
if (error instanceof Error) {
e = error
}
// sometimes error is an object but not an Error
else if (typeof error === 'object') {
e = new Error('More details below.', { cause: JSON.stringify(error) })
}
else {
e = new Error(String(error))
}
// console.log('error display', JSON.stringify(e))
const message = e.message && e.error ?
(e.message + ':\n' + e.error)
@ -35,7 +48,7 @@ const getErrorDetails = (error: unknown) => {
details = {
name: e.name || 'Error',
message: message,
stack: e.stack || null,
// stack: e.stack || null, // can we remove this? it looks awful and not sure stack is ever useful
cause: e.cause ? String(e.cause) : null,
code: e.code || null,
additional: {}
@ -57,7 +70,7 @@ export const ErrorDisplay = ({
showDismiss = true,
className = ''
}: {
error: Error | string,
error: Error | object | string,
onDismiss: (() => void) | null,
showDismiss?: boolean,
className?: string
@ -65,7 +78,7 @@ export const ErrorDisplay = ({
const [isExpanded, setIsExpanded] = useState(false);
const details = getErrorDetails(error);
const hasDetails = details.stack || details.cause || Object.keys(details.additional).length > 0;
const hasDetails = details.cause || Object.keys(details.additional).length > 0;
return (
<div className={`rounded-lg border border-red-200 bg-red-50 p-4 ${className}`}>
@ -132,15 +145,14 @@ export const ErrorDisplay = ({
</pre>
</div>
)}
{details.stack && (
{/* {details.stack && (
<div>
<span className="font-semibold text-red-800">Stack Trace:</span>
<pre className="mt-1 text-sm text-red-700 overflow-x-auto whitespace-pre-wrap">
{details.stack}
</pre>
</div>
)}
)} */}
</div>
)}
</div>