前端混沌元件初探

混沌即混沌工程，首先我們得知道混沌工程是什麼。

混沌工程起源於netflix公司，netflix公司的工程師建立了一種驗證服務可靠性的測試工具chaos monkey。使用這個工具，可以在我們的web系統中隨機的製造一些麻煩，比如觸發網路異常，流量激增，容器退出等異常，我們可以在這些異常發生時，觀察我們的系統是否依舊按照我們預期的方式執行。假設在流量激增突破承載能力的場景下，我們的系統是否會觸發熔斷機制來保障功能穩定執行。該工具最大的作用是，讓故障在造成重大損失之前暴露出來，給工程師提供足夠的時間和機會來修復問題。隨著時間的發展，混動工具演變成了一套方**，用來指導工程師如何讓系統提前暴露問題，及時修復問題。

目前國內很多大廠都有相關的混沌工程實踐，不過多數都在後端領域實踐，在前端中實踐混沌工程的相對較少。那在前端中，如何將混沌的方**和思想落地呢？

近期在逛github的時候，找到了乙個讓react元件混沌起來的開源庫 react-chaos。這個元件的功能非常簡單，它提供了乙個高階元件，該高階元件的功能是通過乙個隨機數，讓元件隨機的throw exception出來。如果你的元件沒有處理異常的**，那元件在頁面就不會渲染出來的，並且在控制台中會顯示出相應的錯誤資訊。出錯時的效果如下圖所示：

我們來看看他的原始碼

const withchaos =
(  level: level,
errormessage?
: string,
runinproduction?
: boolean
): withchaosreturn =>
if(process.env.
node_env
==='production'
&& runinproduction)
return
class
extends react.component 
errormessage=
runinproduction=
>
...this
.props}
/>
<
/chaos>);
}};}
;

高階元件withchaos會把傳入的原始元件用chaos元件wrap之後返回，chaos除了實現混沌相關的邏輯外，沒有其他的用途，下面是chaos的原始碼

export
function
chaos
(: args)
:jsx
.element |
null

chaos元件中通過createchaos函式返回的值來判斷是否渲染children元件

if
(process.env.
node_env
==='production'
&&!runinproduction)if(
typeof level !==
'number')`
);}const chaoslevel = level !==5?
convertchaoslevel
(level)
:0.5
;const chaoson = math.
random()
>= chaoslevel;
if(chaoson)
return
false
;

createchaos函式的核心邏輯就是建立乙個隨機數來實現元件隨機拋異常。

這個庫功能和原理雖然簡單，但它其實是混沌思想在前端的乙個非常好的實踐。它能讓你檢測出你的react元件是否對**異常有比較完善的處理機制。

如果想要讓元件具有隨機拋異常的功能，需要通過react-chaos的withchaos來將元件hoc一下。當你專案中元件非常多且想都增加這個功能的時候，如果每個元件都去手動withchaos然後返回，那工作量會比較大。所以我這邊寫了乙個babel外掛程式，可以在webpack構建的時候，自動的將react元件使用withchaos包裹並返回。

這個外掛程式所做的事情就是通過babel提供的操作ast的能力，將源**轉換為帶有withchaos呼叫的**

import react from
'react'
function
hello()
export
default hello;

轉換後

import react from
'react'
import withchaos from
'react-chaos'
function
hello()
export
default
withchaos
(hello,
|chaoslevel|
);

前端混沌元件初探

前端初探 JavaScript

Web前端CSS初探

Android 桌面元件 widget 初探

前端混沌元件初探

前端初探 JavaScript

Web前端CSS初探

Android 桌面元件 widget 初探

相關推薦