html视频资源加载出错处理,如何处理前端异常
錯誤類型數據
錯誤類型主要是運行過程中的前端報錯，Javascript原生提供Error構造函數，所有拋出的錯誤都是它的實例。Error實例對象有以下屬性屬性描述message錯誤提示信息
name錯誤名稱
stack錯誤的棧
異常情況
總的來說其實可以分很多種,輕則影響局部流程問題,嚴重的會影響頁面崩潰甚至白屏SyntaxError: 語法錯誤
TypeError: 類型錯誤
RangeError: 范圍錯誤
ReferenceError: 引用錯誤
EvalError: eval錯誤
URIError: URL錯誤
AggregateError: 多個錯誤(實驗中的功能)
Failed to load resource: 資源加載錯誤
SyntaxError
當Javascript語言解析代碼時,Javascript引擎發現了不符合語法規范的tokens或token順序時拋出SyntaxError.
也可以手動拋出，語法如下new SyntaxError([message[, fileName[, lineNumber]]])
TypeError
當傳入函數的操作數或參數的類型并非操作符或函數所預期的類型時，將拋出一個 TypeError 類型錯誤。
也可以手動拋出，語法如下new TypeError([message[, fileName[, lineNumber]]])
RangeError
試圖傳遞一個number參數給一個范圍內不包含該number的函數時則會引發RangeError。當傳遞一個不合法的length值作為 Array 構造器的參數創建數組，或者傳遞錯誤值到數值計算方法(Number.toExponential()，Number.toFixed() ，Number.toPrecision())，會出現RangeError。.
也可以手動拋出，語法如下new RangeError([message[, fileName[, lineNumber]]])
ReferenceError
當你嘗試引用一個未被定義的變量時，將會拋出一個 ReferenceError 。
也可以手動拋出，語法如下new ReferenceError([message[, fileName[, lineNumber]]])
EvalError
本對象代表了一個關于 eval 函數的錯誤.此異常不再會被JavaScript拋出，但是EvalError對象仍然保持兼容性.
也可以手動拋出，語法如下new EvalError([message[, fileName[, lineNumber]]])
URIError
當向全局 URI 處理函數傳遞一個不合法的URI時，URIError 錯誤會被拋出。
也可以手動拋出，語法如下new URIError([message[, fileName[, lineNumber]]])
AggregateError
一個AggregateError當需要由操作報告多個錯誤被拋出，例如通過Promise.any()，在傳遞給它的所有Promise拒絕。
也可以手動拋出，語法如下new AggregateError(errors[, message])
Failed to load resource
以下標簽加載資源出錯 , , ,
可以通過onerror或者全局監聽error事件捕獲，下文會提到
我們排除掉資源和語法等不可控的因素,從代碼角度分析有哪些可以協助我們開發提高代碼的健壯性.
Try-Catch
這種方式適用于你知道這段代碼可能會出現異常或者當做代碼出現異常的后備處理方式
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤。
throw 語句創建自定義錯誤。
finally 語句在 try 和 catch 語句之后，無論是否有觸發異常，該語句都會執行。
1, 僅支持捕獲同步異常try {
console.log(a)
} catch (error) {
console.log('a is not defined')
} finally {
console.log('always')
}
// a is not defined
// always
2, 不能用于捕獲異步異常try {
setTimeout(() => {
console.log(a)
}, 1000)
} catch (e) {
console.log('捕獲到異常：', e);
}
// ReferenceError: a is not defined
3, 語法錯誤不在其可捕獲范圍try {
str = '
} catch (e) {
console.log('捕獲到異常：', e);
}
// SyntaxError: Invalid or unexpected token
Promise Catch
promise catch和try-catch的區別其實也跟回調函數和Promise的關系有淵源,前者也可用于捕獲異步編程異常,后者僅支持同步流程
1, 同步異常捕獲new Promise(resolve => {
resolve(a)
}).catch (err => {
console.log('catch: ', err)
})
// catch: ReferenceError: a is not defined
2, 異步異常捕獲new Promise(resolve => {
setTimeout(() => {
resolve(a)
}, 1000)
}).catch(err => {
console.log('catch: ', err)
})
// ReferenceError: a is not defined
3, 同樣不能捕獲語法錯誤new Promise(resolve => {
setTimeout(() => {
str = '
resolve()
}, 1000)
}).catch(err => {
console.log('catch: ', err)
})
// SyntaxError: Invalid or unexpected token
React && Vue 捕獲API
依賴框架所提供的API,功能強大,但是也有版本兼容的問題
Vue errorHandlerVue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的錯誤信息，比如錯誤所在的生命周期鉤子
// 只在 2.2.0+ 可用
}
指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例從 2.2.0 起，這個鉤子也會捕獲組件生命周期鉤子里的錯誤。同樣的，當這個鉤子是 undefined 時，被捕獲的錯誤會通過 console.error 輸出而避免應用崩潰。
從 2.4.0 起，這個鉤子也會捕獲 Vue 自定義事件處理函數內部的錯誤了。
從 2.6.0 起，這個鉤子也會捕獲 v-on DOM 監聽器內部拋出的錯誤。另外，如果任何被覆蓋的鉤子或處理函數返回一個 Promise 鏈 (例如 async 函數)，則來自其 Promise 鏈的錯誤也會被處理。
React componentDidCatch
這個沒用過,貼上官網給你們自己看.
部分 UI 的 JavaScript 錯誤不應該導致整個應用崩潰，為了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界。
錯誤邊界是一種 React 組件，這種組件可以捕獲并打印發生在其子組件樹任何位置的 JavaScript 錯誤，并且，它會渲染出備用 UI，而不是渲染那些崩潰了的子組件樹。錯誤邊界在渲染期間、生命周期方法和整個組件樹的構造函數中捕獲錯誤。
注意
錯誤邊界無法捕獲以下場景中產生的錯誤：事件處理
異步代碼(例如 setTimeout 或 requestAnimationFrame 回調函數)
服務端渲染
它自身拋出來的錯誤(并非它的子組件)
如果一個 class 組件中定義了 static getDerivedStateFromError() 或 componentDidCatch() 這兩個生命周期方法中的任意一個(或兩個)時，那么它就變成一個錯誤邊界。當拋出錯誤后，請使用 static getDerivedStateFromError() 渲染備用 UI ，使用 componentDidCatch() 打印錯誤信息。class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能夠顯示降級后的 UI
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 你同樣可以將錯誤日志上報給服務器
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 你可以自定義降級后的 UI 并渲染
return
Something went wrong.
;}
return this.props.children;
}
}
錯誤邊界的工作方式類似于 JavaScript 的 catch {}，不同的地方在于錯誤邊界只針對 React 組件。只有 class 組件才可以成為錯誤邊界組件。大多數情況下, 你只需要聲明一次錯誤邊界組件, 并在整個應用中使用它。
注意錯誤邊界僅可以捕獲其子組件的錯誤，它無法捕獲其自身的錯誤。如果一個錯誤邊界無法渲染錯誤信息，則錯誤會冒泡至最近的上層錯誤邊界，這也類似于 JavaScript 中 catch {} 的工作機制。
window.onerror
相比于try-catch捕獲可預知代碼塊,window.onerror用于全局捕獲錯誤,當JavaScript運行時錯誤(包括語法錯誤)發生時，window會觸發一個ErrorEvent接口的error事件，并執行window.onerror()。
當一項資源(如或
函數參數：message：錯誤信息(字符串)。可用于HTML οnerrοr=""處理程序中的event。
source：發生錯誤的腳本URL(字符串)
lineno：發生錯誤的行號(數字)
colno：發生錯誤的列號(數字)
error：Error對象(對象)
若該函數返回true，則阻止執行默認事件處理函數。
1, 同步異常捕獲window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
2, 異步異常捕獲window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
new Promise(resolve => {
setTimeout(() => {
resolve(a)
}, 1000)
}).catch(err => {
console.log('catch: ', err)
})
3, 同樣不能捕獲語法錯誤window.onerror = function(message, source, lineno, colno, error) {
console.log('捕獲到異常：',{message, source, lineno, colno, error});
}
str = '
// Uncaught SyntaxError: Invalid or unexpected token
window.addEventListener
和window.onerror類似,只是捕獲的參數不同,并且window.addEventListener還可以捕獲到資源加載失敗的異常window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
1, 同步異常捕獲window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
a
2, 異步異常捕獲window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
new Promise(resolve => {
setTimeout(() => {
resolve(a)
}, 1000)
}).catch(err => {
console.log('catch: ', err)
})
3, 同樣不能捕獲語法錯誤window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
str = '
// Uncaught SyntaxError: Invalid or unexpected token
4, 資源加載失敗
window.addEventListener('error', (error) => {
console.log('捕獲到異常：', error);
}, true)
總結
以上是生活随笔為你收集整理的html视频资源加载出错处理,如何处理前端异常的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 改python,如何正确
- 下一篇： 华为 鸿蒙只是物联网,“鸿蒙”不只是手机