try-error Documentation
React Integration
Install and set up try-error with React for enhanced error handling in your components
Package Installation
Core Library
Installation
$pnpm add try-error
React Integration (Optional)
Installation
$pnpm add @try-error/react
Note: The React integration package provides hooks and utilities specifically designed for React applications.
Basic Setup
The React integration works seamlessly with the core try-error library:
UserProfile.tsxtsx
1import { useTryAsync, useTrySync } from '@try-error/react';
2import { tryAsync, isTryError } from 'try-error';
3
4function UserProfile({ userId }: { userId: string }) {
5 // Using the React hook
6 const { data: user, error, loading } = useTryAsync(
7 () => fetchUser(userId),
8 [userId]
9 );
10
11 if (loading) return <div>Loading...</div>;
12 if (error) return <div>Error: {error.message}</div>;
13 if (!user) return <div>No user found</div>;
14
15 return (
16 <div>
17 <h1>{user.name}</h1>
18 <p>{user.email}</p>
19 </div>
20 );
21}TypeScript Configuration
For the best TypeScript experience with React, ensure your tsconfig.json includes:
tsconfig.jsonjson
{
"compilerOptions": {
"strict": true,
"jsx": "react-jsx",
"exactOptionalPropertyTypes": true,
"noUncheckedIndexedAccess": true
},
"include": [
"src/**/*"
]
}Error Boundary Integration
try-error works well with React Error Boundaries for comprehensive error handling:
App.tsxtsx
1import { ErrorBoundary } from 'react-error-boundary';
2import { TryErrorBoundary } from '@try-error/react';
3
4function App() {
5 return (
6 <TryErrorBoundary
7 fallback={({ error, resetError }) => (
8 <div>
9 <h2>Something went wrong:</h2>
10 <pre>{error.message}</pre>
11 <button onClick={resetError}>Try again</button>
12 </div>
13 )}
14 >
15 <UserProfile userId="123" />
16 </TryErrorBoundary>
17 );
18}