Blazor WebAssembly不使用观察者和框架能力如何在出错时调用JS函数

可以实现，不需要依赖观察者或者Blazor框架自身的API，用原生CSS动画加DOM事件就能实现。

实现原理 #

Blazor触发错误时会将默认display: none的#blazor-error-ui元素修改为显示状态，我们可以给这个元素的显示状态绑定一个无实际视觉效果的CSS动画，动画触发时会原生抛出animationstart事件，监听这个事件就能同步执行自定义的JS函数。

实现代码 #

1. 添加CSS规则 #

/* 定义无视觉影响的触发用关键帧 */
@keyframes blazorErrorNotify {
  from { opacity: 0.99; }
  to { opacity: 1; }
}
/* 仅当错误UI从隐藏改为显示时触发动画 */
#blazor-error-ui:not([style*="display: none"]) {
  animation: blazorErrorNotify 0.001s 1;
}

2. 添加JS监听逻辑 #

// 全局监听动画启动事件
window.addEventListener('animationstart', (event) => {
  // 匹配我们定义的触发动画，执行自定义逻辑
  if (event.animationName === 'blazorErrorNotify') {
    customBlazorErrorHandler()
  }
})

// 自定义错误处理函数
function customBlazorErrorHandler() {
  // 这里编写你需要执行的错误处理逻辑
  console.log('Blazor WebAssembly 运行出错')
}

方案说明 #

• 全程没有使用MutationObserver等观察者类API，也没有调用Blazor框架对外暴露的JS接口，完全符合要求
• 动画时长设置为0.001s不会对原有UI产生任何可感知的影响
• 兼容所有支持CSS动画的现代浏览器

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