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

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

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

  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) {// 更新状态使得下一次渲染能够显示降级后的UIreturn { hasError: true };}componentDidCatch(error, errorInfo) {// 你同样可以将错误日志上报给服务器const url = location.href;this.setState({ errorInfo: `${error.toString()}\n当前地址:${url}` });}render() {/* 复制去反馈 */const onCopy = () => {navigator.clipboard.writeText(this.state.errorInfo);Toast.show({content: "复制成功",});};if (this.state.hasError) {// 你可以渲染任何自定义的降级UIreturn (<div className={styles.errorBoundary}><h2>哦呦,出错啦</h2><p>{this.state.errorInfo}</p><div onClick={onCopy} className={styles.errorBoundaryFooter}>复制去反馈</div></div>);}return this.props.children;}
}export default ErrorBoundary;
ps: 样式可以自行定义
  1. 我们有时候前端打印了很多日志,想去排产问题或者查看数据格式,但是我们无法在浏览器中打开控制台查看,我们怎么去排查呢?
不推荐,但是可用

思路:实现一个react组件,该组件可以配置在最外层,则他的子组件里的所有原生的console方法,都会被重写,重写的console方法会自动收集打印的日志内容,并将内容存储起来,然后在ui中呈现出来

实现结果

//index.jsximport React, { createContext, useContext, useState, useEffect } from "react";// 创建一个日志上下文
const LogContext = createContext(null);// 创建一个高阶组件来提供日志收集功能
export const LogProvider = ({ children }: any) => {const [logs, setLogs] = useState([]);console.log(logs, "logs");// 存储原生 console 方法const consoleMethods = {} as any;useEffect(() => {// 重写 console 方法Object.keys(console).forEach((method: any) => {if (typeof console[method] === "function") {consoleMethods[method] = console[method];console[method] = (...args) => {/* 阻止打印日志logs的时候添加到集合中 */if (!args.toString().includes("logs") && logs?.length <= 100) {setLogs((prevLogs) => [...prevLogs, { method, args }]);}consoleMethods[method](...args);};}});// 清理函数,恢复原生 console 方法return () => {Object.keys(console).forEach((method) => {if (consoleMethods[method]) {console[method] = consoleMethods[method];}});};}, []);// 提供日志和日志收集状态return (<LogContext.Provider value={{ logs, setLogs }}>{children}</LogContext.Provider>);
};// 创建一个自定义 Hook 来访问日志上下文(可选)
export const useLogs = () => useContext(LogContext);
//  LogViewer.jsx
import React from "react";
import { useLogs } from "./index"; // 请根据实际文件路径调整
import _ from "lodash";
import JsonView from "react18-json-view";
import "react18-json-view/src/style.css";
import RedBox from "redbox-react";const LogViewer = () => {const { logs } = useLogs();return (<div><h3>Log Viewer</h3><ulstyle={{maxHeight: "300px",overflowY: "scroll",background: "#f0f0f0",padding: "1rem",border: "1px solid #ddd",}}>{logs.map((log: any, index: any) => (<li key={index}><strong>{log.method}</strong>:{" "}{log.args.map((arg: any) => {if (_.isObject(arg)) {return <JsonView src={arg} />;} else {return arg.toString();}})}</li>))}</ul></div>);
};export default LogViewer;

使用方式

// 在最外层使用
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LogProvider } from "./components/LogTools/index.tsx";
import LogViewer from "./components/LogTools/LogViewer.tsx";
import "./index.css";ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<React.StrictMode><LogProvider><LogViewer /><App /></LogProvider></React.StrictMode>
);

ps: 最好做一个悬浮的工具按钮,让其悬浮固定在页面某个位置,点击查看日志即可

  1. 如何收集查看日志/网络请求等关键信息,当然也可以重新二次封装我们的请求,但是这件事请已经有人帮我们做了有一个公共的npm库
    Mdebug
    安装: npm install --save-dev mdebug 测试环境/预发环境使用、别上生产环境
    使用: 在我们的项目主文件中main.tsx中直接引用即可
import mdebug from "mdebug";
mdebug.init();

效果图:
img

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/49780.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用PageHelper插件来分页查询

目录 一.什么是PageHelper&#xff1f; 二.PageHelper的实战操作&#xff1a; 1.导入PageHelper的相关依赖&#xff1a; 2.配置代码展示&#xff1a; 3.分页查询代码解析&#xff1a; 另外&#xff0c;肯定读者会好奇为什么能够自动动态拼接&#xff1f; 一.什么是PageH…

关于Static 误用问题,总是记不住

一、常规的 静态局部变量&#xff0c;静态成员变量和成员函数没啥疑问 二、全局变量问题。。。 * 如果在 C 文件中使用 static 修饰全局变量&#xff0c; * 它将限制变量的作用域在当前文件内。 * 这意味着其他文件无法直接访问或修改这个变量的值。 …

Arduino IDE界面和设置(基础知识)

Arduino IDE界面和设置&#xff08;基础知识&#xff09; 1-2 Arduino IDE界面和设置如何来正确选择Arduino开发板型号如何正确选择Arduino这个端口如何来保存一个Arduino程序Arduino ide 的界面功能按钮验证编译上传新建打开保存工作状态 1-2 Arduino IDE界面和设置 大家好这…

day00-系统重要文件

01.知识点回顾 1.resolv.conf dns的配置文件 [rootlinux ~]# vim /etc/resolv.conf [rootlinux ~]# nslookup www.baidu.com Server: 8.8.8.8 Address: 8.8.8.8#53Non-authoritative answer: www.baidu.com canonical name www.a.shifen.com. Name: www.a.shifen.com Addre…

MongoDB适合哪些人使用

MongoDB 是一款高性能、开源、无模式的文档型数据库&#xff0c;它使用 BSON&#xff08;Binary JSON&#xff09;作为其数据格式&#xff0c;这使得 MongoDB 非常适合于存储和查询复杂的数据结构。MongoDB 的灵活性、可扩展性和高性能特性吸引了多种类型的用户。以下是 MongoD…

如何穿透模糊,还原图片真实面貌

目录 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 前言 论文背景 论文思路 模型介绍 复现过程 演示视频 使用方式 本文所涉及所有资源均在传知代码平台可获取。 图像清晰化的魔法棒&#xff1a;AI如何穿透模糊&#xff0c;还原图片真实面貌 在我…

全网最最实用--模型高效推理:量化基础

文章目录 一、量化基础--计算机中数的表示1. 原码&#xff08;Sign-Magnitude&#xff09;2. 反码&#xff08;Ones Complement&#xff09;3. 补码&#xff08;Twos Complement&#xff09;4. 浮点数&#xff08;Floating Point&#xff09;a.常用的浮点数标准--IEEE 754(FP32…

状态机 XState 使用

状态机 一般指的是有限状态机&#xff08;Finite State Machine&#xff0c;FSM&#xff09;&#xff0c;又可以称为有限状态自动机&#xff08;Finite State Automation&#xff0c;FSA&#xff09;&#xff0c;简称状态机&#xff0c;它是一个数学模型&#xff0c;表示有限个…

【计算机网络】数据链路层实验

一&#xff1a;实验目的 1&#xff1a;学习WireShark软件的抓包操作&#xff0c;分析捕获的以太网的MAC帧结构。 2&#xff1a;学习网络中交换机互相连接、交换机连接计算机的拓扑结构&#xff0c;理解虚拟局域网&#xff08;WLAN&#xff09;的通信机制。 3&#xff1a;学习…

cas 和 synchronized 优化过程

cas 什么是CAS CAS:全称Compareandswap&#xff0c;字⾯意思:”⽐较并交换“&#xff0c;⼀个CAS涉及到以下操作&#xff1a; 我们假设内存中的原数据V&#xff0c;旧的预期值A&#xff0c;需要修改的新值B。 1. ⽐较A与V是否相等。&#xff08;⽐较&#xff09; 2. 如果⽐较…

半导体行业黑话-02

31. #Silicon Chef# - 硅厨师,指负责设计和制造芯片的工程师。 32. #Silicon Chefs Kitchen# - 硅厨师的厨房,指半导体设计和制造的实验室或工作区。 33. #Silicon Ghetto# - 硅贫民区,有时用来形容那些技术落后或条件较差的制造厂。 34. #Silicon Jungle# - 硅丛林,形容半…

ubuntu22.04单个网口两个IP

其中 4网段IP可用来上网&#xff0c;3 网段用来内网 界面显示: 配置文件&#xff1a; 01-network-manager-all.yaml 放在 /etc/netplan/ # Let NetworkManager manage all devices on this systemnetwork:version: 2renderer: networkdethernets:eth0:dhcp4: falsedhcp6: …

防火墙与入侵检测系统(IDS/IPS)在现代网络安全中的关键角色

在数字化日益加速的今天&#xff0c;网络安全变得尤为重要。随着网络攻击的复杂性和频率不断增加&#xff0c;保护关键信息资产已成为各大小组织的首要任务。防火墙&#xff08;Firewall&#xff09;和入侵检测系统&#xff08;Intrusion Detection System&#xff0c;IDS&…

开放式耳机哪个牌子好?五大超值机型整理,速速收藏!!

大家都知道现在的开放式耳机是越来越火了&#xff0c;后台也有非常多的小伙伴来私信&#xff0c;作为一个耳机测评师&#xff0c;当然是为了你们服务啦&#xff0c;所以这一期文章&#xff0c;就是为了个大家答疑解惑&#xff0c;告诉大家如何才能选购出一款比较好用的开放式耳…

【Python】字母 Rangoli 图案

一、题目 You are given an integer N. Your task is to print an alphabet rangoli of size N. (Rangoli is a form of Indian folk art based on creation of patterns.) Different sizes of alphabet rangoli are shown below: # size 3 ----c---- --c-b-c-- c-b-a-b-c --…

3106. 满足距离约束且字典序最小的字符串 Medium

给你一个字符串 s 和一个整数 k 。 定义函数 distance(s1, s2) &#xff0c;用于衡量两个长度为 n 的字符串 s1 和 s2 之间的距离&#xff0c;即&#xff1a; 字符 a 到 z 按 循环 顺序排列&#xff0c;对于区间 [0, n - 1] 中的 i &#xff0c;计算所有「 s1[i] 和 s2[i] 之间…

万字长文详解Java反射技术 | JavaSE | Java进阶知识 | 源码

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f4cc;今天分享的是JavaSE中的进阶知识&#x1f6d1;&#xff1a;反射技术。内容有点长&#xff0c;非常全面&#xff0c;记得点赞&#x1f44d;、收藏✅加关…

最长回文字符串

# 状态转移方程 P(i,j)P(i1,j−1)∧(SiSj)class Solution:def longestPalindrome(self, s: str) -> str:n len(s)if n < 2:return smax_len 1begin 0# dp[i][j] 表示s[i..j]是否是回文串dp [[False] * n for _ in range(n)]for i in range(n):dp[i][i] True# 开始递…

【网络世界】HTTP协议

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 概念 &#x1f4c1; URL &#x1f4c2; urlencode 和 urldecode &#x1f4c1; 协议格式 &#x1f4c1; 方法 &#x1f4c2; GET/get &#x1f4c2; POST/post &#x1f4c1; 常见的报头 &#x1f4c1; 状态码 &…

模型大小的指标和模型量化的指标和手段

一、模型大小的指标 1.计算量 计算次数&#xff0c;反映了模型对硬件计算单元的需求。计算量的单位是 OPs(Operations) 。最常用的数据格式 为 float32&#xff0c;因此float32类型下的计算量单位被写作 FLOPs (Floating Point Operations)&#xff0c;即浮点计算次数。模型的…