Error Handling
Best practices for error handling in OneKey codebase.
Core Principles
- Use try/catch blocks for async operations that might fail
- Provide appropriate error messages and fallbacks
- Use
useAsyncCallhook for operations needing loading/error states - Never swallow errors silently
Quick Reference
Basic Try/Catch
async function fetchData() {
try {
const result = await apiCall();
return result;
} catch (error) {
console.error('Failed to fetch data:', error);
throw error; // Re-throw if caller needs to handle
}
}With Fallback Value
async function fetchDataWithFallback() {
try {
const result = await apiCall();
return result;
} catch (error) {
console.error('Failed to fetch, using fallback:', error);
return defaultValue; // Return fallback instead of throwing
}
}Using useAsyncCall Hook
import { useAsyncCall } from '@onekeyhq/kit/src/hooks/useAsyncCall';
function MyComponent() {
const { run, isLoading, error, result } = useAsyncCall(
async () => {
return await fetchData();
},
{
onError: (e) => {
Toast.error({ title: 'Failed to load data' });
},
}
);
if (error) {
return <ErrorView error={error} onRetry={run} />;
}
return <DataView data={result} loading={isLoading} />;
}User-Facing Errors
async function submitForm(data: FormData) {
try {
await api.submit(data);
Toast.success({ title: 'Submitted successfully' });
} catch (error) {
// Show user-friendly message
Toast.error({
title: 'Submission failed',
message: getUserFriendlyMessage(error),
});
// Log detailed error for debugging
console.error('Form submission error:', error);
}
}Anti-Patterns
Silent Error Swallowing
// ❌ BAD: Error silently ignored
async function badExample() {
try {
await riskyOperation();
} catch (error) {
// Nothing here - error lost forever
}
}
// ✅ GOOD: At minimum, log the error
async function goodExample() {
try {
await riskyOperation();
} catch (error) {
console.error('Operation failed:', error);
// Handle appropriately
}
}Missing Error State in UI
// ❌ BAD: No error state
function BadComponent() {
const { data } = useQuery();
return <View>{data}</View>; // What if data fetch fails?
}
// ✅ GOOD: Handle all states
function GoodComponent() {
const { data, isLoading, error } = useQuery();
if (isLoading) return <Loading />;
if (error) return <Error error={error} />;
return <View>{data}</View>;
}Detailed Guide
For comprehensive error handling patterns and examples, see error-handling.md.
Topics covered:
- Core principles
- Error handling patterns (try/catch, fallbacks, hooks)
- Error boundaries for React
- Error types (network, validation, user-facing)
- Anti-patterns to avoid
- Error handling checklist
Checklist
- All async operations wrapped in try/catch
- Errors logged for debugging
- User-friendly messages shown to users
- Loading and error states handled in UI
- No silent error swallowing
- Specific error types caught when appropriate
Related Skills
/1k-coding-patterns- General coding patterns and promise handling/1k-sentry-analysis- Sentry error analysis and fixes