如何将Sinatra服务端的SystemExit错误消息传递给Vue.js客户端？

你当前的问题是：基于Sinatra的API里，模型的delete方法用abort抛出删除默认账户的错误，但路由无法正确捕获该错误，客户端只能拿到SystemExit异常，无法获取具体错误消息展示给用户。

核心思路 #

abort会触发Ruby的SystemExit异常，Sinatra默认不会将这类异常的详细消息返回给客户端。需要替换abort为自定义可捕获的异常，在路由中捕获后返回带错误消息的JSON响应，让Vue客户端能解析并展示。

具体步骤 #

1. 替换abort为自定义异常

修改模型代码，创建自定义异常类，用raise抛出错误而非abort：

# 定义自定义异常类
class CannotDeleteDefaultAccount < StandardError; end

def self.delete(account_id)
  account = Account[account_id]
  # 先判断账户是否存在，避免nil报错（可选但推荐）
  return 0 unless account
  
  if account[:default] == true
    raise CannotDeleteDefaultAccount, "无法删除默认账户，请先将其他账户设置为默认账户。"
  end
  
  # 执行删除逻辑，假设删除成功返回1
  account.destroy
  1
end

2. 在路由中捕获异常并返回JSON响应

修改app.rb的路由代码，添加异常捕获逻辑，返回对应HTTP状态码和错误消息：

delete '/account/:id' do
  content_type :json # 统一设置响应格式为JSON
  
  begin
    result = Account.delete(params[:id])
    
    if result == 1
      { message: "账户删除成功" }.to_json
    else
      status 404
      { error: "未找到该账户" }.to_json
    end
  rescue CannotDeleteDefaultAccount => e
    status 400 # 用400表示客户端请求错误
    { error: e.message }.to_json
  rescue => e
    # 处理其他未知异常
    status 500
    { error: "服务器内部错误" }.to_json
  end
end

3. Vue客户端处理错误消息

在Vue中发送请求时，捕获响应错误并展示消息（以axios为例）：

async deleteAccount(accountId) {
  try {
    await this.$axios.delete(`/account/${accountId}`);
    this.$message.success('账户删除成功');
    // 刷新账户列表等后续操作
  } catch (err) {
    if (err.response?.data?.error) {
      this.$message.error(err.response.data.error);
    } else {
      this.$message.error('删除账户失败，请稍后重试');
    }
  }
}

为什么这样可行？ #

• 自定义异常CannotDeleteDefaultAccount属于StandardError子类，能被begin-rescue正常捕获，不会终止程序。
• 路由返回JSON格式的错误响应，Vue客户端可以直接解析response.data.error拿到具体消息。
• 使用合适的HTTP状态码（400表示客户端请求不符合规则，404表示资源不存在），符合RESTful规范。

内容的提问来源于stack exchange，提问作者thiebo