异常和错误的诊断方法

调试是应用开发中关键的一个环节，学习在出现错误、异常等情况下，如何观察现象、定位错误、修复问题，是开发者的基本素质。

调试四步法：复现问题 → 观察现象 → 提出猜想 → 验证猜想

🎯 调试通用流程

第一步：复现问题

尝试在相同操作路径下复现问题
确认是否为偶发或持续性问题
记录问题发生的具体步骤和环境

第二步：观察现象

从四个层面系统观察：

层面	观察要点	检查工具
UI 层	组件样式、布局、交互是否符合预期	浏览器开发者工具、小程序预览
前端状态层	变量、数据流是否正常，是否有前端报错	Console、vConsole、状态管理工具
请求层	请求体和响应体是否符合预期，是否有网络错误	Network 面板、日志服务
数据库层	数据、模型、约束、关联等是否正确	数据库查询、日志分析

第三步：提出猜想

分析收集到的信息
推测可能的原因
可让 AI 协助分析（参考下方 AI 提示词）

第四步：验证猜想

修改配置后再次运行
观察问题是否解决
如果未解决，重新收集信息并提出新的猜想

🚨 常见错误类型及解决方案

1. 编辑时错误

典型表现：编辑器右上角错误图标有数字显示

处理办法：

点击”去修复”跳转到错误位置
根据报错提示修改

常见类型：

⚠️

类型错误：字段类型不匹配

例：原价字段需为 Int 类型却填入字符串”1元”
解决：去掉”元”仅填数值 1

编辑器类型错误提示示例

⚠️

必填项缺失：必填字段未填写

编辑器必填项缺失提示示例

2. 部署和发布时错误

典型表现：

更新预览报错
后端部署失败

处理流程：

更新预览报错

查看错误信息（如有）
根据错误信息处理，看不懂可咨询 AI
上报官方处理

后端更新失败

直接点击上报，官方会协助处理

后端更新失败上报示例

3. 线上 UI 显示异常

典型表现：

编辑器上高度对齐的组件在预览后未对齐
宽度正常的组件在手机端超出屏幕

处理办法：

布局问题排查

相对布局 vs 绝对布局
- 相对布局：组件位置相对于父容器
- 绝对布局：组件位置相对于整个页面
- 在不同宽度容器下可能出现对齐问题

响应式适配问题
- 在宽度 375 的机型上显示正常，宽度 430 时绝对布局会偏移

文本溢出处理
- 文本超出视图组件：可将视图组件”溢出”配置为”隐藏”或”滚动”

文本超出视图组件示例

视图组件溢出配置示例

平台 Bug 反馈
- 编辑器上组件平齐，手机端未对齐，若配置无误可能为平台 bug
- 可反馈官方处理

4. 请求异常

典型表现：

报错：行为流调用失败、API 执行失败、内置行为报错等
异常：运行结果不符业务预期

处理办法：

第一步：根据错误信息快速处理

前往请求错误对照表检查对应错误及处理方式
也可让 AI 帮助分析错误信息

AI 分析提示词：


你是一位精通 PostgreSQL 数据库和 GraphQL API 的开发专家。你的任务是：
1. 分析请求信息：检查 GraphQL 请求语法、目标、数据库返回的错误信息
2. 识别错误类型和原因：如语法错误、类型错误、数据库约束冲突等
3. 提供详细的错误描述和解决方案
4. 输出格式要求：
   - 明确是否存在错误
   - 列出错误及解决方案
   - 格式：**错误描述：** [描述]  **解决方案：** [方案]

第二步：找到错误或异常的请求

小程序调试：

右上角菜单 > 开发调试 > vConsole
查看 request 和 result

网页调试：

F12 或右键”检查” > Network
查找 graphql-v2 请求

日志分析：

编辑器右上角”日志”功能
更多内容见日志服务

第三步：分析请求内容

请求体（Request body）

包含发送请求的关键信息
可在小程序”request”或浏览器”Payload”中查看

示例请求体：


{
  "query": "query blogArticleList_82df5ec2($where: blog_article_bool_exp!, $orderBy: [blog_article_order_by!]!) {blog_article ( where: $where order_by: $orderBy limit: 2) { id \n title}\n\n}",
  "variables": {
    "where": { "title": { "_like": "%AI%" } },
    "orderBy": [ { "created_at": "asc_nulls_last" } ]
  }
}

响应体（Response body）

包含请求返回结果
可在小程序”result”或浏览器”Response”中查看
如报错，可在”Response”找到”errors”

示例错误响应：


{
  "data": null,
  "errors": [
      {
          "errorCode": 403,
          "extensions": {
              "classification": "TABLE_ACCESS"
          },
          "locations": [
              {
                  "column": 3,
                  "line": 2
              }
          ],
          "message": "User 1 has no permission for SELECT on order",
          "operation": "order",
          "path": [
              "order"
          ]
      }
  ]
}