前言
前端开发是一个复杂的过程，涉及到需求评审、方案设计、编码开发、测试验证和上线部署等各个环节，以及协同产品、后端、前端、UI 和测试等各个角色。在我们研发的过程中，对于任何开发者来说 Bug 都是不可避免的，只有对 Bug 正确地进行分类和分析才能让我们更加从容地面对 Bug，正视 Bug，敬畏 Bug，避免 Bug。本文旨在帮助开发者对前端 Bug 进行分类，并提供一些常见的解决方案。（内容非完全，不定期更新，欢迎评论分享 😊）
Bug分类及解决方案
1、逻辑实现类
💡 逻辑实现类 Bug 在前端开发过程中占据了相当大的比例，这类 Bug 往往源于编码时的逻辑疏漏、不规范的语法使用、对 API 的不当应用、边界情况考虑不到位或极端情况未覆盖等。
1.1 空值场景
🪲 场景描述：开发中未考虑数据为 null 或 undefined 的场景，在后续字段直接取值时就引起 JS 错误，从而导致页面异常。
👏 解决方案：在对象取值时使用?. 或者使用 lodash 库的 get 方法安全取值，此外数据为 null 或 undefined 时可以利用??设置默认值来保证数据的正确性。
1.2 接口重复请求
🪲 场景描述：用户快速点击按钮多次，会导致短时间内多次请求同一后端接口，如果这个是一个信息提交类的内容，则可能会出现多条记录，甚至导致后端数据库脏数据异常。
👏 解决方案：合理选择防抖或节流的方式来进行接口调用，避免重复提交内容；或者对按钮等交互元素加入禁用或loading的效果，当未完成一次交互时不允许进行下一次交互。
1.3 接口时序错乱
🪲 场景描述：当用户对内容进行筛选或搜索时，短时间内进行不同条件的查询，会出现第二次查询快于第一次查询的情况，当第一次查询结果返回时会进行展示，导致查询条件与展示内容不匹配。
👏 解决方案：当进行第二次查询的时候应该结束第一次的查询请求，我们使用 Axios 的话可以使用API-AbortController；此外还可以使用防抖或节流的方式在一定程度上减少短时间内快速请求。
1.4 函数参数对应
🪲 场景描述：当函数的参数是多个的时候，例如(p1, p2, p3, p4)，如果新增参数插入在中间，例如(p1, p2, pNew, p3, p4)，所有引用地方都需要进行位置调整，当遗漏的时候就会异常。
👏 解决方案：一般当入参超过 3 个的时候，建议将函数入参扩展为对象的形式，这样不管新增多少个参数，都不用关注顺序的问题，例如({ p1, p2, pNew, p3, p4 }) 。
1.5 API 使用不当
🪲 场景描述：对第三方库 API 的错误调用导致出现异常。
👏 解决方案：熟悉API文档，合理使用API，当然也不排除库本身就有 Bug，在综合考量实现成本和维护成本下也可以参考源码自行实现。
1.6 组件状态更新
🪲 场景描述：在表格或列表类展示内容时，当我们进行分页切换时或者内容进行增删时会出现内容不更新，内容位置不对，或者内容展示不对等场景。
👏 解决方案：在 Vue/React 等框架下合理使用 Key（表格组件一般可设置 rowKey），以便在内容发生改变时重新 re-render，避免了组件状态不更新的情况。
🪲 场景描述：多个组件使用了同一个状态，并且通过 Props 等方式进行透传，导致一个组件更新了状态但在另一个组件中没有更新状态值，或者状态更新不及时。
👏 解决方案：多个组件共享状态数据时，可以通过状态管理库来进行状态管理，例如 Pinia(Vue)、Redux/ZUstand(React)等。React 技术栈推荐阅读 叮！React 必须掌握的“状态管理”知识大放送 📣
2、页面样式类
💡 页面样式类的 Bug 在功能逻辑上是正常的，但在展示样式上存在问题，例如页面布局的错位、元素显示不完整或是视觉效果与设计预期不符等。
2.1 文本极端场景
🪲 场景描述：单行文本内容超出容器预期的宽度，导致页面其他内容错位或者被挤压。
👏 解决方案：可以采用文本溢出截断并结合 Tooltip 组件来支持展示完整内容，Vue3 推荐组件vue3-text-clamp。
2.2 不同分辨率错乱
🪲 场景描述：当我们在自己的电脑上开发内容展示一切正常，但是不同的用户使用的电脑不同，在不同分辨率或设备上就有可能出现布局错乱。
👏 解决方案：使用响应式设计，确保布局在不同设备上均表现良好；或者对页面设置一个最小宽度，小于这个宽度则滚动，我们只需要保证在最小宽度的场景下展示正常。
2.3 元素 zIndex 问题
🪲 场景描述：元素样式设置 z-index 后优先级会发生变化，导致元素覆盖在按钮等交互元素上，使得无法进行点击或操作。
👏 解决方案：非必要不设置 z-index，如果设置后评估所设值的影响范围，当多个元素设置z-index确定好层级关系。
3、协作问题类
💡 一个需求的研发涉及多方合作，如产品、前端和后端等，多方协作的过程中如果存在流程不规范或者存在理解偏差等情况都会导致 Bug 的产生。
3.1 产品方
🪲 场景描述：产品方案梳理不全导致研发遗漏处理某些场景，用户实际在使用中就会暴露出问题。
👏 解决方案：当然改动影响范围不光是产品的原因和责任，我们产研在评审阶段都应该考虑清楚所有的边界场景，当产品逻辑有漏洞或者表述不清楚时及时提出并要求完善，对于复杂/重要模块可以要求相关熟悉的同学都一起把关确认所有场景。
3.2 后端方
🪲 场景描述：后端更改了接口内容并且没有通知前端，然后系统崩了，天塌了。
👏 解决方案：严格遵守协作规范，协议变更一定同步双方，建立接口变更通知机制，如果是已有接口变更还需要全面梳理对现有使用的地方的影响；前端在开发中要保持“后端返回内容不可信”的思想做好各种兜底的预案。
🪲 场景描述：表单等需要校验的场景前端先进行校验，前端的校验规则通过，但提交至后端时出现报错，前后端的逻辑不匹配。
👏 解决方案：当前后端都进行校验的时候应该要提前约定所有的校验规则并保持一致；当然更加建议校验行为只在一方进行（一般推荐后端），避免了规则的不一致。
📌 一些业界前后端协作规范参考：你想知道的前后端协作规范都在这了、前后端接口规范、前后端分离的接口规范、前后端接口规范。
3.3 前端方
🪲 场景描述：当多个前端同时开发同一需求或者多个前端开发多个需求，当开发内容都涉及同一模块时可能会导致在合并代码出问题。
👏 解决方案：产品层面对于同一模块的需求应该尽量分开时间去改动或在同一需求中改动，前端研发应该尽量了解团队内成员进行中的内容，并且在合并代码时及时自测并同步测试进行回归。
4、非确定性类
💡 非确定性类的 Bug 是指那些不总是复现或者在特定条件下才会出现的 Bug，这类 Bug 往往较难发现和定位，也较难去进行解决。
4.1 浏览器兼容性
🪲 场景描述：前端代码在不同浏览器上的渲染可能会有所不同，导致兼容性问题。
👏 解决方案：通过跨浏览器测试工具来验证功能；通过 caniuse.com 来查看浏览器对特定功能的支持情况；使用 Polyfills 来支持旧浏览器的现代特性等。
4.2 环境依赖问题
🪲 场景描述：一些代码功能在开发环境正常，但是在生产环节就出现问题。
👏 解决方案：这一类问题往往较难去调试和定位，我们应该尽量地保证开发、测试和生产环境的一致（一句废话送给大家）。
4.3 随机性问题
🪲 场景描述：由于一些特定的操作路径导致一些异步操作的时序出现非预期情况从而导致问题。
👏 解决方案：这一类问题往往较难去调试和定位，往往是由一些特殊的操作路径触发，我们应该更加合理处理异步逻辑（一句废话送给大家）。
4.4 依赖库版本
🪲 场景描述：大多数 Web 应用程序都依赖于第三方库、框架和其他依赖项才能正常运行，依赖库版本选择不当也会导致问题出现。
👏 解决方案：做好依赖包的管理（一句废话送给大家），并且在引入新依赖库时确认使用条件。
📌 性能问题在这里我们不将其列为 Bug，将其归为影响用户体验的问题。如何体系化追踪性能问题，推荐阅读 👉 性能优化进阶 💥 前端性能埋点&监控体系建设！
