前端监控
前端监控包括行为监控、异常监控、性能监控。
前端产生异常的原因主要分 5 类：
- 逻辑错误
- 业务逻辑判断条件错误
- 事件绑定顺序错误
- 调用栈时序错误
- 错误的操作 js 对象
- 数据类型错误
- 将 null 视作对象读取 property
- 将 undefined 视作数组进行遍历
- 将字符串形式的数字直接用于加运算
- 函数参数未传
- 语法句法错误
- 网络错误
- 请求过慢
- 服务端未返回数据但仍 200，前端按正常进行数据遍历
- 提交数据时网络中断
- 服务端 500 错误时前端未做任何错误处理
- 系统错误
- 内存不够用
- 磁盘塞满
- 壳不支持 API
- 不兼容
Istanbul 测试覆盖率的实现原理
Istanbul （伊斯坦布尔）是一个基于 JavaScript 的测试覆盖率统计工具，目前绝大多数测试框架比如 jest mocha 等都是使用 Istanbul 来统计覆盖率的。
测试覆盖率的四个维度
- Statements
- 语句覆盖率，所有语句的执行率；
- Branches
- 分支覆盖率，所有代码分支如 if、三目运算的执行率；
- Functions
- 函数覆盖率，所有函数的被调用率；
- Lines
- 行覆盖率，所有有效代码行的执行率，和语句类似，但是计算方式略有差别；
Istanbul 的使用
istanbul 最新的版本为： nyc，官方站点为：https://istanbul.js.org，github: https://github.com/istanbuljs/nyc。下面将简称 Istanbul 为 nyc
传统的前端项目测试，假设使用 mocha 测试，我们会执行以下的测试用例：
`mocha test/suite/\*_/_.spec.js`
接着开发者安装 nyc npm 类库（npm install nyc -D），然后加个 nyc 前缀就会自动 完成运行时的覆盖统计与最终结果展现；
// nyc 无参数的默认用法 nyc mocha test/suite/**/\*.spec.js // nyc 携带参数：html 格式 nyc --reporter=html mocha test/suite/**/\*.spec.js // 也可以通过项目根目录增加配置文件（如：nyc.config.js）的形式，然后执行上面的命令 module.exports = { reporter: ['html'] }
该命令执行时，会依次完成以下几件事：
-
将项目 src 源码目录中的 JS 文件做转换并缓存起来；
-
接着将后面的 mocha 参数放到子进程（child_process）执行，即：调用 mocha 执行测试用例；
-
测试用例中所测试的 src 源码文件实际是上面的缓存文件，期间完成的语句与分支执行的统计，记录在 JS 内存的某个变量中；
-
子进程的测试用例执行结束之后，将统计数据发送给 nyc 命令所在线程并保存到文件，默认目录名为：.nyc_output，它记录了本次测试的代码覆盖最完整的数据；
-
nyc 线程内部调用 report 方法，完成从原始数据到可读性良好的内容转换；它会将 .nyc_output 目录中的数据读取出来，并使用 html 格式 进行转换，并默认生成在目录 coverage 下；
cypress 笔记
cypress 是通过模拟用户点击来测试的端到端测试框架，它也允许你编写集成测试与单元测试。
Cypress 为什么好？
- 真实模拟用户点点点，可靠高效
- 免去开发完成后大量手动去检查的行为，即原本代价很高的 UI 测试。
- 易发现因修改而造成的其他模块 BUG
- 开发人员开发某个功能，对自己模块的需求多数情况都是完成的不错的，但有时候因为改 A 模块而导致但 B 模块的 BUG 难以用单测发现
- 整个流程拉通，甚至能及时发现后端 BUG
- 调用真实后端接口，如果原本正常然后突然跑不通，就是后端问题
- 查错方便
- Cypress 支持录制视频与截图，跑挂了有截图还有当时的报错信息
- 最低成本保证主流程
- Cypress 属于黑盒测试，Cypress 模拟用户从头到尾使用网站的流程。能最简单又快速的避免那种页面都挂了但还不知道的情况，也是最惨情况。
经验
隔离环境测试
Cypress 是用的真正的后端数据，而不是 mock 一个数据然后测试组件行为。所以在测试时最好不要使用线上环境，这会使得后端写入很多测试脏数据。最好的就是在专门的沙箱环境测试，如果有租户概念可用新租户，测试时机为发起 MR 代码时。
Cypress 不适合边界测试、细节测试
Cypress 主要用于跑通主流程，测试的是预期内的东西，而对于有大量计算或复杂判断的纯函数方法而言，单测肯定是更好。
题目
Given a compressed string, return its original form.
For example.
uncompress('3(ab)') // 'ababab' uncompress('3(ab2(c))') // 'abccabccabcc'
a number k followed by a pair of parenthesis, meaning to repeat the substring inside the parenthesis by k times, k is positive integer.
inputs are guaranteed to be valid input like above example, there is no numerical digit in original form.
package.json
npm 离不开 package.json ，要了解 npm 的运行机制，我们先看看 package.json 文件是做什么的。首先 package.json 文件是每个前端项目存在于根目录的文件，包含了项目的一些基本信息（例如项目名称，版本号，描述，一些脚本，依赖等等），大致的结构如下：
{ "name": "whyknown", "version": "1.0.0", "description": "whyknown，前端开发者必备网站", "main": "src/index.js", "scripts": { "start": "node index.js", "lint": "eslint **/*.js" }, "dependencies": { "express": "^4.16.4", "compression": "~1.7.4" }, "devDependencies": { "eslint": "^5.16.0", "nodemon": "^1.18.11" }, "repository": { "type": "git", "url": "https://github.com/xxx.git" }, "author": "whyknown", "contributors": [ { "name": "whyknown", "email": "example@example.com", "url": "https://www.whyknown.com" } ], "keywords": ["server", "osiolabs", "express", "compression"] }
我们这里重点关注 script 的配置，该配置罗列了一些可以运行的脚本，当我们在根目录执行 npm run 或者 yarn run 的时候，就会去调用这里的命令。我们拿上面的 start 命令来讲解。
