分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-25 21:40:06

今天我们来学习一下Blazor应用的错误处理。

关于本章我们需要从如下几个方面来学习：

• Blazor WebAssembly和Blazor Server在错误处理上有什么不同点。

• Blazor框架默认预置哪些错误处理的配置和方法

• 异常和错误处理的一般方法。

• 错误和异常在Blazor应用哪些地方会出现。

• 详细的阐述每个出现错误或者异常该如何处理。

 我们之前讨论过Blazor WebAssembly和Blazor Server这两种部署之间的区别，这二者都是为Blazor框架的核心技术，只不过部署模式不同，Blazor Webassembly是通过WebAssembly技术通过blazorJavascript框架在浏览器端下载.Net运行时和用户的程序集之后，直接在浏览器的线程里运行C#代码，.Net运行时和浏览器的DOM交互从而渲染UI,  但是Blazor Server是将UI组件的编译，预渲染，渲染等都放在了服务端，客户端通过Blazor js框架通过SignalR 连接到服务端，将UI渲染需求，事件等等请求都发送至服务端，然后根据服务端返回的信息，通过Blazor js 框架和浏览器DOM 操作从而达到渲染UI的目录。

从这个总结中我们就可以看到基于WebAssembly和基于Blazor的错误处理上会有不少不一样的地方。

开发阶段的详细错误

在开发阶段，BlazorWebAssembly和Blazor Server都使用如下的方式在开发阶段来显示详细的错误：通过在首页添加一个隐藏的状态栏提示开发者在开发阶段的错误，同时引导开发者去浏览器的控制台观察错误的详细信息，但是在产品阶段，该状态栏会提示用户刷新页面。可以检查文件wwwroot/index.html, 如下图：

Blazor Server可以参考文件Pages/_Host.cshtml

Blazor Server的环路(Circuit)详细错误

在客户端是不包括调用的trace和详细的错误的，但是在服务端是可以配置该选项，通过在Blazor Server的服务端设置CircuitOptions.DetailError为true的选项可以打开该选项，在开发阶段为了添加更多的，详细的错误信息，建议使用配置文件appsettings.Development.json, 在这个配置里打开CircuitOptions.DetailError和打开SignalR的调试模式，如下图：

全局异常处理

 Blazor WebAssembly:

针对于Blazor WebAssembly，没有一个默认的全局处理异常的框架机制，但是我们可以通过设计一个专门用于处理异常的组件，然后将这个组件以级联参数的形式传入到所有子类中，关于什么是组件的级联参数，我们在后面的文章中会详细的解释，目前你可以将级联参数解释为一个可以在各个子类中均可以访问的实例变量。

首先我们需要定义一个出门处理错误的组件：Shared/Error.razor

定义好该组件之后，需要将该组件配置到顶级的组件中去，我们将该组件配置到App.razor组件中，如下图：

然后在需要处理错误的组件中可以直接使用级联参数/值引用该Error实例，例如：

然后在需要处理异常的地方使用try……catch和Error的实例来处理异常：

在Catch块中使用Error组件实例的ProcessError来处理异常就可以了。其实你也可以直接使用Logger的实例来处理异常。

使用具有持久性的日志Provider来记录错误的日志

由于Blazor 框架还是基于C#的系统，您可以直接引入Azure的技术将日志的信息持久化到其他的地方，例如Azure Application Insight, 您可以找到Azure的官方文档进一步学习Azure Application Insight的技术。

在Blazor应用有哪些地方可能会发生错误呢？

总结一下大概有如下几个地方或者时机会发生错误：

• 组件初始化的时候。

• 生命周期方法中

• 渲染

• 事件处理

• 组件disposal

• 和JavaScript交互的时候。

• Blazor Server渲染的时候。

在处理这些错误的时候主要有如下几个方法可以考虑：

1. 使用trye - catch 捕获异常并以Logger记录日志。

2. 在组件中定义属性或者字段展示可能发生的错误，并记录日志，如下图：
   
   
   

3.  渲染的时候也加入变量判断：