Error Handling & Debugging Skill

Comprehensive error handling and debugging strategies for Tauri + Rust + React applications.

Rust Error Handling

Error Chain with anyhow

use anyhow::{Context, Result, anyhow, bail};

pub async fn complex_operation(&self) -> Result<Output> { let data = self.fetch_data() .await .context("获取数据失败")?;

if data.is_empty() {
    bail!("数据为空，无法继续处理");
}

let processed = self.process_data(&data)
    .context("处理数据失败")?;

Ok(processed)

}

ApiResponse Conversion Pattern

use crate::utils::error::{api_err, api_ok, ApiResponse};

#[tauri::command] #[specta::specta] pub async fn handle_formula_request( dto: FormulaDto, state: State<'_, TauriAppState>, ) -> ApiResponse<Formula> { // Using with_service helper for automatic error conversion with_service(state, |ctx| async move { ctx.formula_service.create_formula(dto).await }) .await }

// Manual conversion #[tauri::command] #[specta::specta] pub async fn manual_error_handling() -> ApiResponse<Data> { match perform_operation().await { Ok(data) => api_ok(data), Err(e) => { // Log error internally error!("Operation failed: {:?}", e); // Return user-friendly message api_err(format!("操作失败，请检查输入后重试")) } } }

Custom Error Types

use thiserror::Error;

#[derive(Error, Debug)] pub enum FormulaError { #[error("配方不存在: {id}")] FormulaNotFound { id: i64 },

#[error("营养约束冲突: {nutrient}")]
NutritionConflict { nutrient: String },

#[error("优化失败: {reason}")]
OptimizationFailed { reason: String },

#[error("数据库错误: {0}")]
Database(#[from] sqlx::Error),

#[error("IO错误: {0}")]
Io(#[from] std::io::Error),

}

impl From<FormulaError> for ApiResponse<()> { fn from(err: FormulaError) -> Self { match err { FormulaError::FormulaNotFound { id } => { api_err(format!("配方 ID {} 不存在", id)) } FormulaError::NutritionConflict { nutrient } => { api_err(format!("营养约束 {nutrient} 冲突，请调整约束范围")) } FormulaError::OptimizationFailed { reason } => { api_err(format!("配方优化失败: {}", reason)) } _ => api_err(format!("操作失败: {}", err)), } } }

TypeScript Error Handling

Try-Catch with User Feedback

import { message } from 'antd'; import { commands } from '../bindings';

export async function safeExecute<T>( operation: () => Promise<ApiResponse<T>>, errorMessage: string = '操作失败' ): Promise<T | null> { try { const result = await operation(); if (!result.success) { message.error(result.message || errorMessage); return null; } return result.data; } catch (error) { message.error(${errorMessage}: ${error instanceof Error ? error.message : String(error)}); return null; } }

// Usage const formula = await safeExecute( () => commands.getFormula(id), '加载配方失败' );

Error Boundaries

import React, { Component, ErrorInfo, ReactNode } from 'react'; import { Result, Button } from 'antd';

interface Props { children: ReactNode; }

interface State { hasError: boolean; error: Error | null; }

export class ErrorBoundary extends Component<Props, State> { constructor(props: Props) { super(props); this.state = { hasError: false, error: null }; }

static getDerivedStateFromError(error: Error): State { return { hasError: true, error }; }

componentDidCatch(error: Error, errorInfo: ErrorInfo) { console.error('Error caught by boundary:', error, errorInfo); }

render() { if (this.state.hasError) { return ( <Result status="error" title="发生错误" subTitle={this.state.error?.message} extra={ <Button type="primary" onClick={() => window.location.reload()}> 刷新页面 </Button> } /> ); }

return this.props.children;

} }

Debugging Techniques

Rust Debugging

Tracing Instrumentation

use tracing::{info, debug, error, instrument}; use tracing_subscriber;

pub fn init_logging() { tracing_subscriber::fmt() .with_max_level(tracing::Level::DEBUG) .init(); }

#[instrument(skip(self))] pub async fn optimize_formula(&self, formula_id: i64) -> Result<Formula> { info!(formula_id, "开始优化配方");

let formula = self.get_formula(formula_id).await?;
debug!(material_count = formula.materials.len(), "加载配方原料");

let result = self.run_optimization(&formula).await?;
info!(cost = result.total_cost, "优化完成");

Ok(result)

}

Structured Debugging

#[derive(Debug)] pub struct OptimizationContext { pub formula_id: i64, pub material_count: usize, pub constraint_count: usize, pub start_time: std::time::Instant, }

impl OptimizationContext { pub fn log_summary(&self) { debug!( formula_id = self.formula_id, material_count = self.material_count, constraint_count = self.constraint_count, elapsed_ms = self.start_time.elapsed().as_millis(), "优化上下文信息" ); } }

TypeScript Debugging

Debug Component (No console.log!)

import { Alert } from 'antd';

interface DebugInfoProps { data: unknown; title?: string; }

export const DebugInfo: React.FC<DebugInfoProps> = ({ data, title }) => { if (process.env.NODE_ENV === 'production') { return null; }

return ( <Alert type="info" message={title || 'Debug Info'} description={ <pre style={{ maxHeight: 200, overflow: 'auto' }}> {JSON.stringify(data, null, 2)} </pre> } closable /> ); };

Common Error Patterns & Solutions

Database Errors

Connection Pool Exhausted

// Error: Pool exhausted // Solution: Increase pool size or reduce concurrent operations

let pool = SqlitePoolOptions::new() .max_connections(10) // Increase from 5 .acquire_timeout(Duration::from_secs(60)) // Increase timeout .connect(&database_url) .await?;

Lock Timeout

// Error: Database is locked // Solution: Enable WAL mode and reduce transaction time

sqlx::query("PRAGMA journal_mode=WAL") .execute(&pool) .await?;

sqlx::query("PRAGMA busy_timeout=5000") // 5 second timeout .execute(&pool) .await?;

Tauri Command Errors

Type Mismatch

// Error: Failed to deserialize // Solution: Ensure types match between Rust and TypeScript

// Rust #[derive(Serialize, Deserialize, Type)] #[serde(rename_all = "camelCase")] // Match TypeScript naming pub struct CreateFormulaDto { pub formula_name: String, // camelCase pub species_code: String, }

// TypeScript interface CreateFormulaDto { formulaName: string; // camelCase speciesCode: string; }

Missing specta Attributes

// Error: Type not exported // Solution: Add #[specta::specta] and #[specta(inline)]

#[derive(Serialize, Deserialize, Type)] #[specta(inline)] // Required for inline export pub struct MaterialDto { pub code: String, pub name: String, }

#[tauri::command] #[specta::specta] // Required for command pub async fn create_material(dto: MaterialDto) -> ApiResponse<Material> { // ... }

React Errors

Hook Dependency Warning

// Warning: React Hook dependency missing // Solution: Include all dependencies

// ❌ Bad useEffect(() => { fetchData(userId, category); }, [userId]); // Missing 'category'

// ✅ Good useEffect(() => { fetchData(userId, category); }, [userId, category]); // All dependencies

Memory Leaks

// Warning: Can't perform a React state update on an unmounted component // Solution: Cleanup effects

useEffect(() => { let isMounted = true;

const fetchData = async () => { const result = await commands.getData(); if (isMounted) { setData(result); } };

fetchData();

return () => { isMounted = false; // Cleanup }; }, []);

Error Recovery Strategies

Retry Logic

use tokio::time::{sleep, Duration}; use backoff::{ExponentialBackoff, future::retry};

pub async fn retry_operation<T, E, Fn, Fut>(mut operation: Fn) -> Result<T, E> where Fn: FnMut() -> Fut, Fut: std::future::Future<Output = Result<T, E>>, E: std::fmt::Debug, { let mut attempts = 0; let max_attempts = 3;

loop {
    match operation().await {
        Ok(result) => return Ok(result),
        Err(e) => {
            attempts += 1;
            if attempts >= max_attempts {
                error!("操作失败，已重试 {} 次", max_attempts);
                return Err(e);
            }
            warn!("操作失败，第 {} 次重试", attempts);
            sleep(Duration::from_millis(1000 * attempts as u64)).await;
        }
    }
}

}

Graceful Degradation

export function useFormulaData(formulaId: number) { const { data, isLoading, error } = useQuery({ queryKey: ['formula', formulaId], queryFn: async () => { const result = await commands.getFormula(formulaId); if (!result.success) throw new Error(result.message); return result.data; }, retry: 3, retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), });

// Graceful degradation if (error) { return { data: null, isLoading: false, error, // Provide fallback data fallbackData: { id: formulaId, name: '加载失败', materials: [], }, }; }

return { data, isLoading, error: null }; }

Logging Strategy

Rust Logging Levels

use tracing::{error, warn, info, debug, trace};

// ERROR: Application errors requiring immediate attention error!( error = ?e, formula_id = id, "配方优化失败" );

// WARN: Warning messages, potentially harmful situations warn!( formula_id = id, "配方未满足所有营养约束" );

// INFO: Important informational messages info!( formula_id = id, cost = result.total_cost, "配方优化成功" );

// DEBUG: Detailed diagnostic information debug!( material_count = materials.len(), constraint_count = constraints.len(), "开始优化" );

// TRACE: Very detailed diagnostic information trace!("详细追踪信息");

Desktop Application Logging (No console!)

// ❌ Bad - Console logging console.log('Data loaded', data); console.error('Error', error);

// ✅ Good - User-facing messages import { message } from 'antd';

// For debugging: use debug component or send to backend message.success('数据加载成功'); message.error('加载失败');

// Optional: implement debug logger that sends to Rust backend export async function debugLog(level: 'info' | 'warn' | 'error', message: string) { if (process.env.NODE_ENV === 'development') { await commands.debugLog({ level, message }); } }

Testing Error Scenarios

Rust Error Tests

#[cfg(test)] mod tests { use super::*;

#[tokio::test]
async fn test_formula_not_found() {
    let result = FormulaService::new(pool)
        .get_formula(99999)
        .await;

    assert!(result.is_err());
    match result {
        Err(FormulaError::FormulaNotFound { id }) => {
            assert_eq!(id, 99999);
        }
        _ => panic!("Expected FormulaNotFound error"),
    }
}

}

TypeScript Error Tests

describe('Error Handling', () => { it('should handle API errors gracefully', async () => { const mockCommands = { getFormula: vi.fn().mockResolvedValue({ success: false, message: '配方不存在', }), };

const { result } = renderHook(() => useFormula(1, { commands: mockCommands }));

await waitFor(() => {
  expect(result.current.error).toBeTruthy();
  expect(result.current.data).toBeNull();
});

}); });

When to Use This Skill

Activate this skill when:

• Implementing error handling in Rust or TypeScript

• Debugging application issues

• Investigating Tauri command failures

• Handling database errors

• Implementing retry logic

• Writing logging code

• Creating error recovery strategies

• Testing error scenarios

• Troubleshooting type errors

• Fixing memory leaks

• Resolving performance issues