TensorZero项目中的错误处理优化实践

2025-06-18 12:58:13作者：郜逊炳

在TensorZero项目的开发过程中，我们发现了一个关于错误处理的重要问题：当用户通过TryWithVariant模态框或推理API路由进行操作时，来自网关的错误信息被TypeScript代码层"吞没"，导致用户只能看到一个简单的500错误提示，而无法获取更有价值的错误信息。

问题背景

在现代Web应用中，良好的错误处理机制对于用户体验至关重要。TensorZero作为一个涉及复杂AI推理的项目，其API网关层产生的错误信息往往包含关键的操作失败原因。然而，当前实现中，这些宝贵的信息在到达用户界面之前就被丢失了。

技术分析

问题的核心位于ui/app/routes/api/tensorzero/inference.ts文件中。这个文件负责处理来自前端的推理请求，并与后端API网关进行交互。当网关返回错误时，当前的实现没有正确地将错误信息传递回前端界面。

在TypeScript应用中，错误处理通常需要考虑以下几个层面：

API调用层的错误捕获
错误信息的解析和转换
用户界面的错误展示

解决方案

要解决这个问题，我们需要在以下几个方面进行改进：

1. 增强API错误处理中间件

在inference.ts路由处理器中，我们需要实现一个更健壮的错误处理中间件。这个中间件应该能够：

捕获来自网关的所有错误响应
解析错误响应体中的结构化错误信息
将错误信息转换为前端友好的格式
确保错误信息不会在传输过程中丢失

2. 统一错误响应格式

建立一个标准的错误响应格式对于前后端协作非常重要。建议采用如下结构：

interface ErrorResponse {
  statusCode: number;
  error: string;
  message: string;
  details?: any;
}

3. 前端错误展示优化

在TryWithVariant模态框中，我们需要：

捕获并显示来自API的详细错误信息
提供用户友好的错误提示
在适当情况下提供解决问题的建议

实现细节

在具体实现上，我们可以采用以下方法：

在inference.ts中添加错误处理中间件：

import type { RequestHandler } from '@sveltejs/kit';

export const POST: RequestHandler = async ({ request }) => {
  try {
    // 处理请求逻辑
  } catch (error) {
    // 标准化错误响应
    return new Response(JSON.stringify({
      statusCode: error.status || 500,
      error: error.name || 'Internal Server Error',
      message: error.message || 'An unexpected error occurred',
      details: process.env.NODE_ENV === 'development' ? error.stack : undefined
    }), {
      status: error.status || 500,
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
};

在前端组件中添加错误处理逻辑：

async function handleSubmit() {
  try {
    const response = await fetch('/api/tensorzero/inference', {
      method: 'POST',
      body: JSON.stringify(data)
    });
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Request failed');
    }
    
    // 处理成功响应
  } catch (error) {
    // 显示用户友好的错误信息
    errorStore.set(error.message);
  }
}