跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

如何处理HTML视频资源加载出错和前端异常？

陆砚码
陆砚码
• 👁 0人浏览过

大家好，我是陈景序，今天我们来聊聊HTML视频资源加载出错和前端异常的处理方法。相信很多人在开发过程中都遇到过这些问题，今天我们就来一一解决。

错误类型和数据

错误类型主要分为运行过程中的前端报错，比如JavaScript原生提供的Error构造函数，所有抛出的错误都是它的实例。Error实例对象有以下属性：

  • message：错误提示信息
  • name：错误名称
  • stack：错误的栈

异常情况

总的来说，异常情况可以分为很多种，轻则影响局部流程问题，严重的会影响页面崩溃甚至白屏。常见的异常类型有：

  • SyntaxError：语法错误
  • TypeError：类型错误
  • RangeError：范围错误
  • ReferenceError：引用错误
  • URIError：URL错误
  • AggregateError：多个错误（实验中的功能）
  • Failed to load resource：资源加载错误

处理方法

下面我们来介绍几种常见的处理方法：

Try-Catch

这种方式适用于你知道这段代码可能会出现异常或者当做代码出现异常的后备处理方式。try 语句测试代码块的错误，catch 语句处理错误，throw 语句创建自定义错误，finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

try {
    console.log(a)
} catch (error) {
    console.log('a is not defined')
} finally {
    console.log('always')
}
// a is not defined
// always

Promise Catch

Promise catch 和 try-catch 的区别其实也跟回调函数和 Promise 的关系有渊源，前者也可用于捕获异步编程异常，后者仅支持同步流程。

new Promise(resolve => {
    resolve(a)
}).catch (err => {
    console.log('catch: ', err)
})
// catch:  ReferenceError: a is not defined

React && Vue 捕获API

依赖框架所提供的API，功能强大，但是也有版本兼容的问题。以下是一些常用的API：

  • Vue errorHandler：Vue.config.errorHandler = function (err, vm, info) { // handle error }
  • React componentDidCatch：部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

window.onerror

相比于 try-catch 捕获可预知代码块，window.onerror 用于全局捕获错误，当 JavaScript 运行时错误（包括语法错误）发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。

window.onerror = function(message, source, lineno, colno, error) {
    console.log('捕获到异常：',{message, source, lineno, colno, error});
}

window.addEventListener

和 window.onerror 类似，只是捕获的参数不同，并且 window.addEventListener 还可以捕获到资源加载失败的异常。

window.addEventListener('error', (error) => {
    console.log('捕获到异常：', error);
}, true)

以上就是关于HTML视频资源加载出错和前端异常的处理方法，希望对大家有所帮助。我是陈景序，来自 websoft 网络软件专家（www.phpwebsoft.com），如果你对 Web 开发有任何疑问，欢迎关注我们的网站了解更多内容。

相关文章