线上崩了？一招教你快速定位问题！

背景

本文是 从零到亿体系性的树立前端构建常识体系✨ 中的第七篇。

某日周五下午五点，不才正逛着沸点，盘算着今日基金大涨晚上必须得整点好的。

正浏览着下班后去哪家店撸串，成果隔壁组搭档囧着脸过来问我：大哥，赶紧曩昔帮助看个问题！客户反应很多次了，一向找不出问题出在哪里！！！

我：能不能有点周五的样子！你小子耽误我下班啊！！

曩昔简略的了解一下，据说是个历史遗留问题，极难复现！

• 后端同学：数据肯定没问题，都仔细校正过了！
• 前端同学：线上报错信息啥也看不出来，我本地是好的！要不你们再试试？
• 测验同学：复现纯靠缘分！

我：这么说看来是有鬼了，要不你们在座位上摆个香炉烧根香？

坐下后我一顿操作猛如虎，五分钟后就定位出了问题，老板在知晓这件过后：

背面原因剖析

考虑这背面的原因，底子在所以咱们不知道怎么调试线上问题，都是靠猜。猜对了皆大欢喜，猜错了换个方向继续猜，直到堕入置疑自我的心情中……

今日借此机会，我决定祭出独门绝技，教咱们一招 bug 定位消失术！彻底摆脱线上问题恐惧症！

说回正题

线上问题大致能够分两类：一类是接口数据导致的，另一类是数据正常，前端哪里疏忽了导致的。

• 数据不同：本地更多的是用的测验环境的数据，而线上用的实在环境的数据。不同数据，页面的渲染以及交互可能不同；
• 代码疏忽：可能是某些场景的边界状况没有处理好，再或者是未做容错降级处理等；

模仿线上环境

文中所涉及到的代码均放到个人 github 仓库中：github.com/noBaldAaa/o…

通过 create-react-app 初始化一个项目（你也能够用 vue-cli，都相同）：

npx create-react-app my-app --template typescript

接着在控制台运行 yarn eject，把 Webpack 的装备暴露出来（用其他构建东西也相同，这儿以 Webpack 为例），此时项目目录结构：

├── build # 打包后的文件夹
├── config # webpack装备信息
|    └── webpack.config.js
├── node_modules
├── public
├── package-lock.json
├── package.json
└── src # 源码目录
     └── index.tsx

在 index.tsx 中写一段过错的代码模仿报错：

import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
function App() {
  const obj: any = {
    author: "不要秃头啊",
  };
  useEffect(() => {
    //报错代码在这儿！！！！！！！！！！！
    obj.abc.map((item: any) => item === "1111");
  });
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );
}
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

模仿出产环境打包，修正 config/webpack.config.js 中的装备：

   mode: "production",
   devtool: false,

• mode: "production" 表明采用出产形式打包，会启用代码紧缩等插件
• devtool: false 表明不生成 source-map文件

接着在控制台运行 yarn build 指令，生成打包后的文件：/build。

为了模仿线上，这儿用一个第三方库：http-server，根据官方介绍：它是是一个简略的、零装备的指令行静态 HTTP 服务器。下面是官方介绍图，的确挺形象……

该说不说，的确很简略，这点没吹牛比，一行代码就能够起一个静态的 HTTP 服务器：

npx http-server ./build

点击静态服务器地址，打开页面发现的确报错了：

所有代码都被紧缩成了一行，的确啥都看不出来。

小型必杀技

上面咱们说到，本地没问题，线上有问题，一部分原因便是因为后端数据有问题，这儿先祭出一个小型必杀技：Ajax Interceptor。

它是一个谷歌插件，能够阻拦页面上的 Ajax 恳求，并把回来成果替换成恣意文本。这对mock 数据、排查线上问题 来说简直便是神器！！！

Charles 等抓包软在它面前便是个弟弟（我没有侮辱 Charles 的意思，咱们各有利益）。当我知道了这个插件之后，才发现曾经的操作都花里胡哨的！！！

演示一下，把我的等级改成 8 级，掘力值和关注者加几个 999，这不过分吧！

此处 @运营 @优弧，叫你们开发来改 bug 啦，这小子数据现已爆表了。

使用方法：

（1）点击插件图标

（2）把你想要修正的接口 URL 地址复制到输入框中，然后把回来的内容放到下面的文本框

拍了个视频教程：

友谊提示：不需要用的时分别忘记关掉！！！要不然有可能剖析半天，最终发现忘关插件了……

终极必杀技

上面那个小东西能够处理大部分场景的问题，但如果不是后端数据的问题，是咱们自己的问题呢？

这个时分再说：我本地是好的，你再试试？

此时老板要拿刀过来了……

回归本质，线上不能定位到问题的原因是什么？不便是因为出产环境没有生成和上传 source-map 文件吗！！

那咱们直接给线上环境增加上 source-map 文件不就能够了吗？

部分心急的同学请你把刀放下，我并不是说在出产环境上传 source-map 文件。

我的意思是：出产环境 + 本地的 source-map 文件。

这儿悄悄告知咱们一个小秘密（99%的人都不知道，勿外传）：谷歌浏览器的 Sources 面板支撑右键增加 source-map：

有了方案后，现在只需把出产环境的代码按照如下装备在本地重新打包：

 output:{  path: path.resolve(__dirname, "build2") } //原build文件夹在模仿线上环境，这儿改成build2防止影响之前的服务
 devtool:"source-map"

然后用 http-server 起一个静态服务：

npx http-server ./build2

拿到 source-map 的文件链接增加到浏览器中：

操作视频：

这是增加前的作用：

这是增加后的作用：

仓库信息一望而知，一下就能看到是哪个文件下的哪行代码出了问题！

总结

本文从一个团队小故事动身，具体叙述了当前端开发者遇到线上问题时的囧境。从以下两个场景剖析，给出了对应的处理方案：

• 数据不同导致犯错：在本地环境下使用 Ajax Interceptor 来模仿线上数据；
• 代码疏忽导致犯错：直接在线上环境增加 source-map 链接来定位问题；

什么？这两个方案还不够？这现已是我知道的最简略的方法啦！！我现已把我知道的全说了

什么？你们项目里集成了 sentry 等监控体系？那就当我没说！我闭嘴了!

什么？……

引用：

• /post/704921…

推荐阅读

1. 从零到亿体系性的树立前端构建常识体系✨
2. 我是怎么带领团队从零到一树立前端规范的？
3. 【Webpack Plugin】写了个插件跟喜爱的女生表白，成果……
4. 前端工程化基石 — AST（抽象语法树）以及AST的广泛应用
5. 学会这些自定义hooks，让你摸鱼时刻再翻一倍
6. 浅析前端异常及降级处理
7. 前端重新部署后，领导跟我说页面溃散了…
8. 前端场景下的搜索框，你真的了解了吗？
9. 手把手教你完成React数据持久化机制
10. 面试官：你确认多窗口之间sessionStorage不能同享状态吗？？？

本文正在参与「金石计划 . 瓜分6万现金大奖」