开头要说的话

目前项目大都基于各大框架进行开发实现，在这个过程中，会遇到很多告警和报错。有些可能会和宿主环境相关，有的就是和项目的依赖版本相关。虽然不同人遇到的问题各式各样，甚至说，有些告警信息跟实际问题毫无相关，这样导致将大量的时间浪费在搜索问题上，所以这次想总结分享现阶段自己在平时工作中遇到过的错误和告警，当然每个人遇到问题的场景可能会不一样，这篇主要是总结自己当时遇到的一些问题，有需要的可以作为参考，有问题的也欢迎评论。

本地终端github拉取失败

错误描述： fatal: unable to access 'github.com/akira-cn/ht…': Failed to connect to github.com port 443: Operation timed out

前提： 在github相关配置都正确的情况下，之前还可以正常拉取，突然拉取失败。

解决方法：

设置代理，git config --global https.proxy；
取消代理，git config --global --unset https.proxy再重新拉取，如果拉取失败可以关闭终端重新打开拉取。

快速切换后台管理菜单出现告警

告警描述： Warning: Can‘t perform a React state update on an unmounted component

问题分析： 出现这种告警主要是当访问第一个菜单有请求数据，请求还没结束立马又切换到另一个菜单，但上一个请求还在继续，上一个请求返回后执行之后的代码对组件状态进行更新，但是现在已经被切换到另一个菜单页面，之前的组件已经被卸载，所以就会出现上述的告警。

解决方法：

在卸载的时候对所有的操作执行清除：AbortController，通过在return内部执行abort操作进行清除。

 useEffect(() => {
     let abortController = new AbortController()
     return () => {
         abortController.abort()
     }
 }, [])

设置flag，在请求外层定义一个标志，在请求中根据标志值判断是否要更新状态，在return阶段将标识更新。

 let isMount = true
 useEffect(() => {
     fetch().then(()=>{
         if(isMount) setState(..)
     })
     return () => {
         isMount = false
     }
 }, [])

自定义Hook用来设置异步请求得到的数据set（推荐，因为可以自定义通用Hook统一管理）将通过异步获取设置的状态统一封装特定的Hook，使用这个Hook统一设置异步状态数据。

const useFetchState = (props) => {
    const focus = useRef()
    const [state, setState] = useState(...props)
    useEffect(() => {
        focus.current = true
        return () => (focus.current = false)
    }, [])
    const setFetchState = useCallback((...params) => {
        focus.current && setState(...params)
    }, [])
    return [state, setFetchState]
}

sortablejs在分页表格的报错

错误描述： react-dom.development.js:10301 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

问题分析： 在分页table表格中使用sortablejs，如果将table中的一个row拖拽到另一个非table的div里，因为使用clone的模式将该行拷贝复制到了另一个非table的dom元素里面。由于当前table没有更新，导致虚拟dom和真实dom没有对应，在切换页面的时候识别的那一个row是非table元素下的（即找到的是克隆的那个而不是原来的那个row。这样在分页渲染table的逻辑中就会报上述的错误）。

解决：在拖拽之后手动给table做一次更新

项目突然启动失败

错误描述：Error occurred while trying to proxy request

这个问题我之前也搜索过类似的问题，网上给的就是几种解决方案：

检查npm版本，是不是自己本地环境npm版本过低；
是不是代理配置有问题，需要检查proxyTable配置。

但是上面两种方式我都没有成功，后面发现是因为将iphone通过数据线插在了mac mini（办公环境）上，可能是这样影响了电脑的网络环境？导致访问不了公司内网的api接口？原理实在是不清楚😿。反正我一拔掉启动成功，一插上启动失败，就很突然。（PS 之后我都不用数据线了，改用无线充电了😬）

nodejs 413 (Payload too large)

问题描述： 公司网站上传图片时接口提示：Payload too large

问题分析： 公司网站项目我们使用了express做了一层接口代理，而这次的上传图片报错，就是客户端传递数据时，超过了代理服务器允许的最大限制。之前没有做相关限制大小的设置，后面发现代理服务器默认最大是1mb，需要根据实际实际情况配置limit。

const proxy = require('express-http-proxy');
server.use('/v1/upload', proxy(PROXY_HOST, {
    limit: '10mb',
    ...
}));

结尾要说的话

关于框架或者组件的相关报错，其实只要是和代码相关的内容，是不难解决的，因为这些完善的错误提示不仅告诉你总的问题描述，还有问题相关的详细内容链接，虽然问题描述都是英文，虽然乍一看上去不咋懂，但是不妨用翻译软件翻译一下，不妨点击更多进入详情链接，其实问题就会很快被你找到。保持一个对解决问题的积极心态，相信很多问题都会迎刃而解。

But像我上面那个数据线问题，真的是好谜啊😭

这些告警和报错你都遇到过吗？