Blazor中电路已关闭仍有任务依赖的问题排查咨询

错误信息 #

Error 02:26:42 [] Microsoft.AspNetCore.Components.Server.Circuits.RemoteNavigationManager - Navigation failed when changing the location to /Manager/Dashboard JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteNavigationManager.<>c__DisplayClass13_0.<<NavigateToCore>g__PerformNavigationAsync|0>d.MoveNext()
Error 02:26:42 [] Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost - Unhandled exception in circuit '-5JHigSs3RCwrNJcEKupxdNLrFtlNwcQDeAHENgzco8'. JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteJSRuntime.BeginInvokeJS(Int64 asyncHandle, String identifier, String argsJson, JSCallResultType resultType, Int64 targetInstanceId)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Microsoft.AspNetCore.Components.Server.Circuits.RemoteNavigationManager.<>c__DisplayClass13_0.<<NavigateToCore>g__PerformNavigationAsync|0>d.MoveNext()

排查步骤 #

1. 给所有导航调用添加唯一日志标记 #

针对17处导航到/Manager/Dashboard的调用，给每个位置添加专属日志标识，通过日志时间戳匹配错误发生点：

• 修改每个导航调用的代码，示例如下：

  _logger.LogInformation("触发导航[标记: 用户登录完成]到/Manager/Dashboard");
  try
  {
      _navigationManager.NavigateTo("/Manager/Dashboard");
      _logger.LogInformation("导航[标记: 用户登录完成]执行成功");
  }
  catch (Exception ex)
  {
      _logger.LogError(ex, "导航[标记: 用户登录完成]执行失败");
  }
  

• 每个导航点使用不同标记（如“角色校验通过跳转”“表单提交后跳转”等），结合错误日志的时间，直接定位触发错误的导航位置。

2. 排查导航触发的危险时机 #

该错误多发生在电路已进入销毁流程但代码仍执行导航的场景，重点检查以下情况：

• 异步任务完成后导航：比如长时间API调用、后台任务执行期间，用户已刷新页面或跳转路由导致电路断开，任务完成后仍触发导航。
  • 解决方法：给异步操作绑定组件生命周期的CancellationToken，导航前检查组件IsDisposed状态（继承ComponentBase可直接使用）。
• 组件销毁阶段导航：在OnDispose、OnAfterRenderAsync（非首次渲染）中触发导航，此时电路可能已处于断开状态。
• 跨电路实例导航：在后台服务、静态类中持有NavigationManager实例，尝试在非活跃电路中执行导航操作。

3. 封装安全导航方法 #

创建统一的导航封装方法，先验证电路连通性再执行导航，避免直接调用抛出异常：

public async Task SafeNavigateTo(string uri, bool forceLoad = false)
{
    try
    {
        // 通过简单JS互操作验证电路是否正常连通
        await _jsRuntime.InvokeVoidAsync("console.log", "验证电路状态");
        _navigationManager.NavigateTo(uri, forceLoad);
    }
    catch (JSDisconnectedException)
    {
        _logger.LogWarning("电路已断开，跳过导航到: {Uri}", uri);
    }
}

将所有导航到/Manager/Dashboard的调用替换为该方法，同时保留日志记录。

4. 监听电路状态变化 #

通过自定义CircuitHandler监控电路的开启、关闭事件，关联导航日志排查问题：

• 实现自定义电路处理器：

  public class CircuitMonitorHandler : CircuitHandler
  {
      private readonly ILogger<CircuitMonitorHandler> _logger;
  
      public CircuitMonitorHandler(ILogger<CircuitMonitorHandler> logger)
      {
          _logger = logger;
      }
  
      public override Task OnCircuitOpenedAsync(Circuit circuit, CancellationToken cancellationToken)
      {
          _logger.LogInformation("电路 {CircuitId} 已开启", circuit.Id);
          return base.OnCircuitOpenedAsync(circuit, cancellationToken);
      }
  
      public override Task OnCircuitClosedAsync(Circuit circuit, CancellationToken cancellationToken)
      {
          _logger.LogInformation("电路 {CircuitId} 已关闭", circuit.Id);
          return base.OnCircuitClosedAsync(circuit, cancellationToken);
      }
  }
  

• 在Program.cs中注册服务：

  builder.Services.AddScoped<CircuitHandler, CircuitMonitorHandler>();
  

通过错误日志中的电路ID，匹配对应的关闭时间，判断是否是电路关闭后触发的导航。

5. 客户端网络状态校验 #

客户端网络断开也会导致电路中断，可在客户端添加网络状态监听，避免离线时触发服务器端导航：

• 在wwwroot/index.html中添加监听：

  window.addEventListener('offline', () => {
      DotNet.invokeMethodAsync('你的项目名称', 'SetOfflineStatus', true);
  });
  window.addEventListener('online', () => {
      DotNet.invokeMethodAsync('你的项目名称', 'SetOfflineStatus', false);
  });
  

• 在Blazor组件中接收状态并校验：

  private bool _isOffline;
  
  [JSInvokable]
  public void SetOfflineStatus(bool isOffline)
  {
      _isOffline = isOffline;
  }
  
  // 导航前校验网络状态
  if (!_isOffline)
  {
      _navigationManager.NavigateTo("/Manager/Dashboard");
  }
  

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