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

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

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

  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,一经查实,立即删除!

相关文章

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

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

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

目录 图像清晰化的魔法棒&#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. 如果⽐较…

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: …

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

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

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

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

【网络世界】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;即浮点计算次数。模型的…

3D Web轻量化引擎HOOPS Communicator针对复杂大模型Web端可视化的解决方案

随着工程设计、制造和建筑领域中三维模型的日益复杂化&#xff0c;如何在Web端高效处理和展示这些大规模数据成为一大挑战。HOOPS Communicator作为一款强大的3D可视化工具&#xff0c;提供了一套针对复杂大模型的轻量化解决方案&#xff0c;涵盖了模型轻量化及格式转换、超大模…

PostgreSQL成为最受欢迎的数据库; TiDB马拉松大赛开启, Serverless和Vector为比赛焦点

重要更新 1. TiDB Hackathon大赛报名开启&#xff0c;总奖金达21万&#xff0c;主题是基于 TiDB Serverless 内置的向量搜索功能&#xff08;Vector Search&#xff09;构建 AI 创新应用&#xff0c;感兴趣的可以报名参加。( [1] ) 2. Stack Overflow 2024 开发者调研结果公布…

自学JavaScript(放假在家自学第一天)

目录 JavaScript介绍分为以下几点 1.1 JavaScript 是什么 1.2JavaScript书写位置 1.3 Javascript注释 1.4 Javascript结束符 1.5 Javascript输入输出语法 JavaScript(是什么?) 是一种运行在客户端(浏览器)的编程语言&#xff0c;实现人机交互效果。 2.作用(做什么?)网…

从头开始微调Llama 3.1模型

在今天的科技专栏中&#xff0c;我们将深入探讨如何微调Llama 3.1模型&#xff0c;以使其更好地适应您的特定领域数据。微调大型语言模型&#xff08;如Llama&#xff09;的主要目的是为了在特定领域的数据上表现更好&#xff0c;从而生成更符合您需求的输出。以下是我们将要介…

SpringBoot知识笔记

一、基本概念 1.1 特性 起步依赖 自动配置 其它特性:内嵌的Tomcat、Jetty(无需部署WAR文件),外部配置,不需要XML配置(properties/yml)。 1.2 配置文件 SpringBoot提供了多种属性配置方式 //application.properties server.port=9090 server.servlet.context-path…

Python爬虫知识体系-----Urllib库的使用

数据科学、数据分析、人工智能必备知识汇总-----Python爬虫-----持续更新&#xff1a;https://blog.csdn.net/grd_java/article/details/140574349 文章目录 1. 基本使用2. 请求对象的定制3. 编解码1. get请求方式&#xff1a;urllib.parse.quote&#xff08;&#xff09;2. ur…

邦布带你从零开始实现图书管理系统(java版)

今天我们来从零开始实现图书管理系统。 图书管理系统 来看我们的具体的实现&#xff0c;上述视频。 我们首先来实现框架&#xff0c;我们要实现图书管理系统&#xff0c;首先要搭框架。 我们首先定义一个书包&#xff0c;在书包中定义一个书类和一个书架类&#xff0c;再定义…

用Java手写jvm之实现查找class

写在前面 完成类加载器加载class的三阶段&#xff0c;加载&#xff0c;解析&#xff0c;初始化中的加载&#x1f600;&#x1f600;&#x1f600; 源码 。 jvm想要运行class&#xff0c;是根据类全限定名称来从特定的位置基于类加载器来查找的&#xff0c;分别如下&#xff1a;…

【SQL 新手教程 2/20】关系模型 -- 主键

&#x1f497; 关系数据库建立在关系模型上⭐ 关系模型本质上就是若干个存储数据的二维表 记录 (Record)&#xff1a; 表的每一行称为记录&#xff08;Record&#xff09;&#xff0c;记录是一个逻辑意义上的数据 字段 (Column)&#xff1a;表的每一列称为字段&#xff08;Colu…