问题排查调试工具使用手册

当前端发起对应用的访问时,如果出现错误,那么我们可以通过以下方式进行简易排查,如果排查不出来,则也可以把排查工具给出的信息发送给Oinone官方售后进行进一步分析。本文将通过模拟异常信息,来介绍排查工具,提供了哪些辅助信息帮我们来快速定位问题。

排查工具基础介绍

通过前端页面的 /debug 路由路径访问调试工具的页面,假设我们的前端页面访问地址为http://localhost:6800,那么我们的排查工具请求路径就是 http://localhost:6800/debug
image.png
排查工具可以帮我们排查前端页面元数据异常和后端接口的异常

排查前端页面元数据

将问题页面浏览器地址栏内 page 后的部分复制到调试工具的 debug 路由后重新发起请求,如图可以看到调试工具展示的信息,可以根据这些信息排查问题。
image.png
image.png
image.png

排查后端接口

  1. 后端接口出现问题后,打开(在原页面)浏览器的调试工具,切换到“网络”的标签页,在左侧的历史请求列表中找到需要调试的请求,右键会弹出菜单,点击菜单中的 “复制”,再次展开该菜单,点击二级菜单中的“以 fetch 格式复制”,这样可以复制到调试所需要的信息

image.png
2.复制调试信息到“接口调试”标签页内的文本框内,点击“发起请求”按钮获取调试结果

image.png
我们可以看到页面展示了该接口的各种调试信息,我们可以据此排查问题。
image.png
image.png
image.png

场景化的排查思路

业务代码中存在代码bug

image.png
报错后发起调试请求,
image.png
我们可以看到,调试工具直接给出了异常抛出的具体代码所在位置,
image.png
此时再切换到“全部堆栈”下,可以看到是业务类的233行导致的空指针异常,查看代码后分析可得是data.getName().eqauls方法在调用前未做条件判断
image.png
补全该判断后代码可以正常执行
image.png

业务代码中没有直接的错误,异常在平台代码中抛出

image.png
报错后发起调试请求
image.png
可以看到异常不在业务代码内
image.png
再切换到“全部堆栈”,可以看到具体异常信息,提示core_demo_item表出现了重复的主键,该表是DemoItem模型的
image.png
我们还可以切换到“sql调试”的标签页,可以看到出错的具体sql语句
image.png
经过分析可以得知是240行的data.create()�重复创建数据导致的。

三、排查工具无法定位怎么办

当我们通过排查工具还是没有定位到问题的时候,可以通过调试页面的“下载全部调试数据”和“下载调试数据”按钮将调试信息的数据发送给官方售后人员帮助我们定位排查问题。

点击页面最顶部的“下载全部调试数据”按钮,可以下载页面调试数据和接口调试数据
点击“调试接口”标签页内的“下载调试数据”按钮,可以下载接口调试数据
image.png

四、排查工具细节

Oinone社区 作者:shao原创文章,如若转载,请注明出处:https://doc.oinone.top/kai-fa-shi-jian/7484.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
shao的头像shao数式管理员
上一篇 2024年5月20日 pm9:04
下一篇 2024年5月21日 pm6:54

相关推荐

  • 如何通过浏览器开发者工具提高调试效率

    1.通过vue devtool查看vue组件和oinone组件的信息 平台字段、动作、视图组件都是以Widget结尾的,可以通过关键字快速找到组件 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址,隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后,可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名,据此特性可以得出自定义组件的时候,可继承该命名的父类 一般oinone的组件以Widget后缀命名,也推荐大家也以此为后缀,方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息,部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具,进入标签页源代码/来源(英文版为Source),win系统用快捷键ctrl+O,mac系统用快捷键cmd+O, 可以打开文件搜索面板,通过关键字搜索文件名找到代码文件,可直接在里面debug调试或者查看执行逻辑

    2024年9月9日
    1.4K00
  • 如何用调试工具提升效率

    相关文档参考 问题排查调试工具使用手册:https://doc.oinone.top/kai-fa-shi-jian/7484.html 调试工具在业务场景的使用-前端https://doc.oinone.top/shu-shi-oinone-xue-yuan/kai-fa-pai-cuo-ji-qiao/18412.html 调试工具在业务场景的使用-前端:https://doc.oinone.top/wen-ti-zhen-duan/17746.html 如何通过浏览器开发者工具提高调试效率https://doc.oinone.top/frontend/17130.html

    2024年10月29日
    1.2K00
  • 项目中常用的 Tools 工具类

    模型拷贝工具类 KryoUtils.get().copy(modelData); ArgUtils.convert(DataReport.MODEL_MODEL, DataDesignerReport.MODEL_MODEL, report); pro.shushi.pamirs.framework.common.utils.ObjectUtils#clone(T) Rsql工具类 RsqlParseHelper.parseRsql2Sql(queryWrapper.getModel(), rsql); RSQLHelper.getRsqlValues(sql.getOriginRsql(), fieldSet); 序列化工具类 后端使用的JSON序列化 JsonUtils.toJSONString(nodes); 前端使用的JSON序列化 PamirsJsonUtils.toJSONString(nodes, SerializerFeature.DisableCircularReferenceDetect, SerializerFeature.WriteDateUseDateFormat, SerializerFeature.BrowserCompatible); 生成ID //根据模型生成id Long generate = (Long) Spider.getDefaultExtension(IdGenerator.class).generate(PamirsTableInfo.fetchKeyGenerator(Teacher.MODEL_MODEL)); //生成id Long l = Long.valueOf(UidGeneratorFactory.getCachedUidGenerator().getUID()); 权限相关 // 获取权限路径path AccessResourceInfoSession.getInfo().getOriginPath(); 其他 PamirsSession相关 PamirsSession.isAdmin() # 是否admin用户 PamirsSession.getUserId() # 获取登录用户ID PamirsSession.getRequestVariables() PamirsSession.getContext().getModelCache().get(PetShop.MODEL_MODEL).getTable(); # 获取模型信息 PamirsSession.getContext().getExtendCache(ActionCacheApi.class).get(Teacher.MODEL_MODEL, "importArchivesInfo") # 获取函数信息

    2025年5月8日
    92901
  • 使用Mapper方式进行联表查询

    有些业务场景需要查询两张表的数据,这时候就需要用到联表查询。下面将介绍两种方式进行联表查询。 场景:A模型页面,查询条件中包含B模型字段 模型A @Model.model(YesOne.MODEL_MODEL) @Model(displayName = "YesOne", summary = "YesOne") public class YesOne extends IdModel { public static final String MODEL_MODEL = "top.YesOne"; @Field.Integer @Field(displayName = "YesId") private Long yesId; @Field.String @Field(displayName = "名字") private String name; @Field.String @Field(displayName = "科目名字") private String professionalName; @Field(displayName = "关联YesTwo") @Field.many2one @Field.Relation(relationFields = {"yesId"},referenceFields = {"id"}) private YesTwo yesTwo; } 模型B @Model.model(YesTwo.MODEL_MODEL) @Model(displayName = "YesTwo", summary = "YesTwo") public class YesTwo extends IdModel { public static final String MODEL_MODEL = "top.YesTwo"; @Field.Integer @Field(displayName = "科目id") private Long professionalId; @Field.String @Field(displayName = "科目名字") private String professionalName; } 1. 使用in的方式查询 通过B模型的查询条件查询出符合条件的所有数据ID,再根据这个ID去A模型里面查询出所需的数据。 @Function.Advanced(displayName = "查询列表", type = FunctionTypeEnum.QUERY, category = FunctionCategoryEnum.QUERY_PAGE, managed = true) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<YesOne> queryPage(Pagination<YesOne> page, IWrapper<YesOne> queryWrapper) { String professionalName = (String) queryWrapper.getQueryData().get("professionalName"); if (StringUtils.isNotBlank(professionalName)) { List<Long> yesTwoId = new YesTwo().queryList(Pops.<YesTwo>lambdaQuery() .from(YesTwo.MODEL_MODEL) .eq(YesTwo::getProfessionalName, professionalName)) .stream().map(YesTwo::getId) .collect(Collectors.toList()); LambdaQueryWrapper<YesOne> wq = Pops.<YesOne>lambdaQuery().from(YesOne.MODEL_MODEL); if (CollectionUtils.isNotEmpty(yesTwoId)) { wq.in(YesOne::getYesId, yesTwoId); } return new YesOne().queryPage(page, wq); } return new YesOne().queryPage(page, queryWrapper); } 2. 使用mapper的方式查询 利用sql的方式去直接查询出结果。使用联表查询的方式查询 @Autowired private YesOneQueryMapper yesOneQueryMapper; @Function.Advanced(displayName = "查询列表", type = FunctionTypeEnum.QUERY, category = FunctionCategoryEnum.QUERY_PAGE, managed = true) @Function(openLevel = {FunctionOpenEnum.LOCAL,…

    2024年9月27日
    1.1K00
  • oinoneConsole调试工具使用说明

    oioConsole 一个轻量、针对网页的前端开发者调试面板。 oioConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。 功能特性 查看GraphQL的接口请求 快速查看到接口的模型和方法 格式化请求中的GraphQL语句 格式化请求中的响应 支持重试请求 支持跳转到oinone管理后台的调试页面进一步查看接口 【oinone前端6.4.0版本开始支持】 提供快捷文档和工具的跳转链接 详情可参考下方的截图。 使用方式 用浏览器环境的前端工程都可以使用,不限于oinone前端 直接插入到 HTML <!– 根据环境条件引入 oioConsole调试控制台 –> <% if (process.env.NODE_ENV === 'development') { %> <script src="https://pamirs.oss-cn-hangzhou.aliyuncs.com/oinone/oinoneconsole/latest/oioconsole.min.js"></script> <script> const mode = localStorage.getItem('mode') // 开发模式下打开控制台,不需要的可以删掉 if (mode === 'dev') { new window.OioConsole({ // network: { // maxNetworkNumber: 100, // 最多显示多少条网络请求 // longRequestTime: 400, // 单位:毫秒ms,超过多少毫秒的请求会显示为长请求 // } }); } </script> <% } %> 进阶用法 可以根据cross-env插件自定义其他环境变量来判断是否需要加载调试工具

    2025年12月24日
    40600

Leave a Reply

登录后才能评论