在Angular 2中解释MVC错误的最佳实践

Question

我有一个用C#编写的MVC 5后端。它提供了用Razor编写的MVC视图和一些Angular 2页面。

当从客户端调用服务器时，处理潜在错误的最佳方式是什么？我真的希望建立一个强大且适用于所有情况的模式。以下是我迄今为止尝试过的方法。

后端C#代码：

public class MyController : Controller
{
    [HttpGet]
    public ActionResult GetUsers()
    {
        try
        {
            // Lot of fancy server code ...

            throw new Exception("Dummy error");

            return GetCompressedResult(json);

        }
        catch (Exception ex)
        {
            throw new HttpException(501, ex.Message);
        }
    }

    private FileContentResult GetCompressedResult(string json)
    {
        // Transform to byte array
        var bytes = Encoding.UTF8.GetBytes(json);

        // Compress array
        var compressedBytes = bytes.Compress();
        HttpContext.Response.AppendHeader("Content-encoding", "gzip");
        return new FileContentResult(compressedBytes, "application/json");
    }
}

客户端 Angular 2 代码：

public loadDataFromServer() {
    let response = this.http.get(this.urlGetData)
        .map((res: Response) => res.json())
        .catch(this.handleError);

    response.subscribe(response => {
        // Process valid result ...
    },
        err => { console.error(err); }
    );
};

private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = JSON.parse(JSON.stringify(error || null))
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}

以下是handleError方法处理的错误对象的屏幕截图:

这些都引发了一些问题:

1. 从服务器抛出自定义HttpException是否正确?
2. handleError方法是否正确或者过于复杂?
3. 在客户端我想看到自定义错误消息，但目前它只在一个巨大的“blob”HTML中找到，难以解析。
4. 在get调用和subscribe操作中是否都需要进行客户端错误处理?

- Jakob Lithner

---

如果 error 是一个 Response 对象，你试图做什么？这看起来相当晦涩和过度设计了 :-D... - n00dl3

@n00dl3 的 handleError 方法是从网络上获取的。调试时，我发现错误实际上是 Response 类型的。您建议应该是其他类型吗？我已经添加了当前错误的打印输出以进行调查。请就建议的改进提供建议。 - Jakob Lithner

Answer 1

我的当前建议是让服务器对所有处理的异常都返回Json对象。

在客户端，我会在处理有效结果之前检查结果对象是否存在可能的错误属性。

handleResponseError方法将解析类型化的响应对象并抛出可观察的消息。但至少我的浏览器（Chrome 57）似乎会自动将响应错误记录到控制台。因此，如果订阅者对不同的错误没有特定的额外处理需求，则订阅者无需为err对象执行任何额外操作。

请反馈是否有更好的方法！

后端C#代码：

public class MyController : Controller
{
    [HttpGet]
    public ActionResult GetUsers()
    {
        try
        {
            // Lot of fancy server code ...

            throw new ArgumentException("Dummy error");

            // Normal return of result ...

        }
        catch (Exception ex)
        {
            return Json(new { error = $"{ex.GetType().FullName}: '{ex.Message}'" }, JsonRequestBehavior.AllowGet);
        }
    }
}

客户端 Angular 2 代码：

public loadDataFromServer() {
    let response = this.http.get(this.urlGetData)
        .map((res: Response) => res.json())
        .catch(this.handleResponseError);

    response.subscribe(result => {
        if (result.error) {
            this.displayJsonError(this.urlGetUsers, result.error);
        }
        else {
            // Process valid result
        }
    });
};



private handleResponseError(value: Response | any) {
    let errorMessage = value.toString();
    let response = value as Response;
    if (response) {
        errorMessage = `${response.status}: ${response.statusText}\n${response.toString()}`;
    }
    if (value.error) {
        errorMessage = value.error;
    }
    if (value.message) {
        errorMessage = value.message;
    }
    return Observable.throw(errorMessage);
}

private displayJsonError(url: string, error: string) {
    console.error(`Call to '${url}' failed with ${error}`);
}

- Jakob Lithner