美文网首页
前端组件 混沌

前端组件 混沌

作者: WEB前端含光 | 来源:发表于2020-09-11 19:03 被阅读0次

    什么是混沌

    混沌即混沌工程,首先我们得知道混沌工程是什么。

    混沌工程起源于Netflix公司,Netflix公司的工程师创建了一种验证服务可靠性的测试工具Chaos Monkey。使用这个工具,可以在我们的web系统中随机的制造一些麻烦,比如触发网络异常,流量激增,容器退出等异常,我们可以在这些异常发生时,观察我们的系统是否依旧按照我们预期的方式运行。假设在流量激增突破承载能力的场景下,我们的系统是否会触发熔断机制来保障功能稳定运行。该工具最大的作用是,让故障在造成重大损失之前暴露出来,给工程师提供足够的时间和机会来修复问题。随着时间的发展,混动工具演变成了一套方法论,用来指导工程师如何让系统提前暴露问题,及时修复问题。

    目前国内很多大厂都有相关的混沌工程实践,不过多数都在后端领域实践,在前端中实践混沌工程的相对较少。那在前端中,如何将混沌的方法论和思想落地呢?

    混沌组件

    近期在逛github的时候,找到了一个让react组件混沌起来的开源库 react-chaos 。这个组件的功能非常简单,它提供了一个高阶组件,该高阶组件的功能是通过一个随机数,让组件随机的Throw Exception出来。如果你的组件没有处理异常的代码,那组件在页面就不会渲染出来的,并且在控制台中会显示出相应的错误信息。出错时的效果如下图所示:


    我们来看看他的源码
    const withChaos = (
      WrappedComponent: React.ElementType,
      level: Level,
      errorMessage?: string,
      runInProduction?: boolean
    ): WithChaosReturn => {
      if (process.env.NODE_ENV === 'production' && !runInProduction) {
        console.warn(
          `You tried to use React Chaos in production. You probably didn't mean to do this. Chaos will not occur in production.`
        );
        return WrappedComponent;
      }
    
      if (process.env.NODE_ENV === 'production' && runInProduction) {
        console.warn('You are running React Chaos in production.');
      }
      return class extends React.Component {
        render() {
          return (
            <Chaos
              level={level}
              errorMessage={errorMessage}
              runInProduction={runInProduction}
            >
              <WrappedComponent {...this.props} />
            </Chaos>
          );
        }
      };
    };
    复制代码
    

    高阶组件withChaos会把传入的原始组件用Chaos组件wrap之后返回,Chaos除了实现混沌相关的逻辑外,没有其他的用途,下面是Chaos的源码

    export function Chaos({
      children,
      level,
      errorMessage,
      runInProduction,
    }: Args): JSX.Element | null {
      return createChaos(level, errorMessage, runInProduction) ? null : children;
    }
    复制代码
    

    Chaos组件中通过createChaos函数返回的值来判断是否渲染children组件

    if (process.env.NODE_ENV === 'production' && !runInProduction) {
        /** Chaos will not occur in production. */
        return false;
      }
    
      if (typeof level !== 'number') {
        throw new Error(
          `Please provide a number level. You provided: ${typeof level}`
        );
      }
    
      const chaosLevel = level !== 5 ? convertChaosLevel(level) : 0.5;
      const chaosOn = Math.random() >= chaosLevel;
      if (chaosOn) {
        throw new Error(errorMessage);
      }
      return false;
    复制代码
    

    createChaos函数的核心逻辑就是创建一个随机数来实现组件随机抛异常。

    这个库功能和原理虽然简单,但它其实是混沌思想在前端的一个非常好的实践。它能让你检测出你的react组件是否对代码异常有比较完善的处理机制。

    构建插件

    如果想要让组件具有随机抛异常的功能,需要通过react-chaos的withChaos来将组件HOC一下。当你项目中组件非常多且想都增加这个功能的时候,如果每个组件都去手动withChaos然后返回,那工作量会比较大。所以我这边写了一个babel插件,可以在webpack构建的时候,自动的将react组件使用withChaos包裹并返回。

    Github地址:

    github.com/SugarTurboS…

    这个插件所做的事情就是通过babel提供的操作AST的能力,将源代码转换为带有withChaos调用的代码

    import React from 'react'
    
    function Hello(){
        return (
            <div>Hello</div>
        )
    }
    
    export default Hello;
    复制代码
    

    转换后

    import React from 'react'
    import withChaos from 'react-chaos'
    
    function Hello(){
        return (
            <div>Hello</div>
        )
    }
    
    export default withChaos(Hello, |chaosLevel|);
    复制代码
    

    通过这个插件,就能轻松的将react-chaos加入到项目中使用了。

    如果你现在也想学习前端开发技术,在学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以加入到我的Q群中:前114中6649后671,里面有许多前端学习资料以及2020大厂面试真题 点赞、评论、转发 即可免费获取,希望能够对你们有所帮助。

    相关文章

      网友评论

          本文标题:前端组件 混沌

          本文链接:https://www.haomeiwen.com/subject/sqmbektx.html