【在开发小程序的时候如何排查问题】

在开发小程序的时候如何排查问题

在最近开发小程序的时候，经常出现本地在浏览器中调试没有问题，但是一发布到预发环境就出现各种个样的问题

1. 手机兼用性问题

   有时候会出现苹果🍎手机键盘弹出，导致ui界面高度出现异常
   

2. 边界问题，导致js报错

   小程序页面出现白屏，可能是js报错，但是我们没办法像在浏览器中一样去打开控制台查看日志报错信息
   但是自己本地又复现不了
   

3. 后端接口报错

 有时候新增/修改调用后端接口的时候，后端接口可能会对字段进行校验，抛出错误信息，
 说你某个字段传递的有问提，但是我们无法真正捕获到有用的信息，比如这个字段传递给后端的时候到底是怎样的，
 有时候不得不麻烦后端同学去查看一下后端接口的日志信息，每次这样去找后端，也是会被讨厌的不是吗。

所以，作为前端的小伙伴我们应该怎样处解决小程序开发中所出现的问题呢？

我们这边以react开发小程序为例

1. 面对js报错问题，我们可以开发一下 ErrorBoundary 组件，在组件内部捕获js报错，并在页面上展示错误信息
   不管是在开发环境还是在生产环境，这个组件都能很好的帮助开发者排查前端问题。

ErrorBoundary 原理使用 react 类组件中的 componentDidCatch生命周期 进行错误的捕获，如果有错误信息则展示错误信息否则展示正常的页面

  
import React from "react";
import styles from "./index.less";
import {
   
    Toast } from "antd-mobile";

class ErrorBoundary extends React.Component<any,{
   
    hasError: boolean; errorInfo: string }> {
   
   
  constructor(props) {
   
   
    super(props);
    this.state = {
   
    hasError: false, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
   
   
    // 更新状态使得下一次渲染能够显示降级后的UI
    return {
   
    hasError: true };
  }

  componentDidCatch(error, errorInfo) {
   
   
    // 你同样可以将错误日志上报给服务器
    const url = location.href;
    this.setState({
   
    errorInfo: `${
     
     error.toString()}\n当前地址：${
     
     url}` });
  }

  render() {
   
   
    /* 复制去反馈 */
    const onCopy = ()