2022 年 8 月 – 滩之南

1. 演示代码工程

为了方便讨论，请先下载演示代码工程，整个工程结构如下，

+ phantom-core 演示基础类。 + phantom-demo 演示web应用，这是一个简单的sprint boot应用，运行在端口18080。 + phantom-agent 一个Java agent，里面通过ByteBuddy对指定类以无侵入方式切面增强，在演示工程中主要对Tomcat web的请求进行切面处理。 + phantom-agent-plugin 一个增强类插件，这个是为了解决NoClassDefFoundError问题而提供的一个插件解决方案，应用于phantom-agent的TransformerV3.tranform()中，项目构建后需要复制构建包到路径/tmp/phantom-agent-plugin.jar上。

下载后，分别对项目进行构建、启动和测试，命令如下，

# 使用mvn工具编译构建 mvn clean package 1. 启动演示web应用 java -jar ./phantom-demo/target/phantom-demo.jar 1. 测试web请求命令 curl -X POST http://127.0.0.1:18080/api/hello

若上面的web应用启动成功，则测试web请求将会收到“hello,world”的消息响应，这个简单的测试请求已经走过web服务的完整路径。工程中的Transformer将通过java agent方式对tomcat web请求进行切面处理，获取所有http请求的执行前、执行后、执行异常相关情况并打印到日志中，tomcat切点定义为，

# 切点：tomcat核心类StandardHostValve的invoke方法 org.apache.catalina.core.StandardHostValve.invoke(Request request, Response response);

演示工程中Transformer类有三个，

com.phantom.agent.trace.TransformerV1 ：用于演示问题的复现和定位

com.phantom.agent.trace.TransformerV2 ：用于演示问题的解决思路1

com.phantom.agent.trace.TransformerV3 ：用于演示问题的解决思路2

本文记录一个前端页面开发出现的问题，涉及的前端框架版本为，

“vue”: “^3.2.22”
“element-plus”: “^2.0.4”

1. 问题

近期在使用vue 3 + element plus进行前端页面开发，在前端页面运行过程浏览器后台中出现如下错误消息，

error.ts:12 ElementPlusError: [ElOnlyChild] no valid child node found
    at debugWarn (error.ts:12:18)
    at Proxy.<anonymous> (only-child.ts:35:9)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5098:34)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
    at updateComponent (runtime-core.esm-bundler.js:4968:26)
    at processComponent (runtime-core.esm-bundler.js:4901:13)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5107:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)

出现这个错误消息概率比较高，但不是每次都必现。页面上各个组件按钮都运行正常，出现这个问题感觉有些纳闷，上面的错误消息也没有直接给出哪里不对，一时不知道问题在哪里。

2. 定位

从错误消息[ElOnlyChild] no valid child node found来看，报的是子组件无效，估计是什么组件使用的不当，没有映射到相应的模型数据，是不是哪里变量命名有拼写错误，使用Ctrl+F检查了一番代码，没有发现任何变量拼写错误。

为了发现问题，开始对页面组件进行二分法排查，把页面组件逐一过滤，定位问题出现在如下一个气泡确认框组件上，

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text" v-if="row.version != 'new'">删除</el-button>
   </template>
</el-popconfirm>

这个组件没有什么特别，之前已经在很多地方用的很好，唯一不同的是添加了v-if控制，稍微判断了一下，应该就是这个v-if导致。

若把上面的el-button去掉，则直接可以复现这个问题，

<el-popconfirm title="确定要删除吗?" @confirm="deleteConfig(row)">
   <template #reference>
   </template>
</el-popconfirm>

气泡确认框组件的用途，主要是在点击某个元素弹出一个简单的气泡确认框，其需要绑定在一个子组件上，若子组件为空，则会报出如下的错误信息，

[ElOnlyChild] no valid child node found...

在了解到如上的问题后，将v-if移到el-popconfirm组件，正确的书写方法为，

<el-popconfirm title="确定要删除吗?" v-if="row.version != 'new'" @confirm="deleteConfig(row)">
   <template #reference>
       <el-button type="text">删除</el-button>
   </template>
</el-popconfirm>

至此问题解决。

月度归档： 2022 年 8 月

Java字节码增强技术Bytebuddy探路篇二（NoClassDefFoundError问题）

1. 演示代码工程

前端页面在运行过程中出现ElementPlusError错误，报[ElOnlyChild] no valid child node found错误消息

1. 问题

2. 定位