故障排除

🌐 Troubleshooting

本节旨在帮助你理解、避免和修复使用 Vue Flow 时可能出现的错误。

🌐 This section aims to help you understand, avoid, and fix errors that may occur when using Vue Flow.

错误与修复

🌐 Errors and Fixes

Vue Flow 可以触发多种错误类型，以帮助诊断和解决问题。

🌐 Vue Flow can emit several error types to help diagnose and resolve issues.

MISSING_VIEWPORT_DIMENSIONS

• 描述: Vue Flow 父容器需要有宽度和高度才能渲染图表。
• 修复： 确保 Vue Flow 的父容器有明确的宽度和高度。

<template>
  <!-- Ensure the parent container has a width and height -->
  <div style="width: 500px; height: 500px">
    <VueFlow :nodes="nodes" :edges="edges" />
  </div>
</template>

NODE_INVALID

• 描述: 节点被视为无效，可能是由于配置错误导致。
• 修复： 检查节点配置是否正确，确保所有必需的属性都已设置。

// Here's an example of some valid node configurations
const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 } },
  { id: '4', type: 'special', label: 'Node 4', position: { x: 400, y: 200 } },
])

NODE_NOT_FOUND

• 描述： 调用 useNode 时找不到对应的节点。
• 修复： 在你在自定义节点组件外调用 useNode 时，验证节点是否存在。

NODE_MISSING_PARENT

• 描述： 一个节点缺少定义的父节点，这是嵌套节点所必需的。
• 修复： 在为父节点添加子节点之前，确保父节点存在。

// Here's an example of a valid nested node configuration
const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, parentNode: '1' },
  { id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 }, parentNode: '1' },
])

NODE_TYPE_MISSING

• 描述: 节点的类型没有定义对应的组件。
• 修复： 为你使用的每种节点类型定义一个组件，以确保自定义节点能被正确渲染。

NODE_EXTENT_INVALID

• 描述： 只有子节点可以使用父节点的范围，这表明配置无效。
• 修复： 确保只有子节点使用父节点范围，并且父节点存在。

EDGE_INVALID

• 描述: 一条边缺少源节点或目标节点。
• 修复： 确保所有边的 source 和 target 属性都已正确设置。

// Here's an example of some valid edge configurations
const edges = ref([
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-4', source: '1', target: '4' },
])

EDGE_NOT_FOUND

• 描述： 调用 useEdge 时未找到对应的边。
• 修复： 在自定义边组件之外调用 useEdge 时，确认边是否存在。

EDGE_SOURCE_MISSING / EDGE_TARGET_MISSING

• 描述: 边的源节点或目标节点丢失。
• 修复： 确保每条边的源节点和目标节点都存在并且设置正确。

EDGE_TYPE_MISSING

• 描述: 边的类型没有定义对应的组件。
• 修复： 为你使用的每种边类型定义一个组件，以确保自定义边能被正确渲染。

EDGE_SOURCE_TARGET_SAME

• 描述： 边的起点和终点是同一个节点。
• 修复: 如果这是有意的，可以忽略此错误。否则，请确保源节点和目标节点不同。

EDGE_SOURCE_TARGET_MISSING

• 描述： 边的源节点和目标节点都缺失。
• 修复： 确保每条边的源节点和目标节点都存在并且设置正确。

EDGE_ORPHANED

• 描述: 一条边已经丢失了其源节点或目标节点，这很可能是由于节点被删除造成的。
• 修复： 如果你是故意将该边置为孤立状态，可以忽略此错误。否则，请确保源节点和目标节点存在，或者在边成为孤立状态之前将其清理。

运行时错误评估

🌐 Evaluating Errors During Runtime

在开发过程中，Vue Flow 会在控制台中触发遇到错误的警告。这些警告旨在帮助开发者识别和解决问题，而不会默默失败。然而，在生产环境中，这些警告会被抑制。

🌐 During development, Vue Flow emits warnings to the console for errors encountered. These warnings are intended to help developers identify and resolve issues without failing silently. In production, however, these warnings are suppressed.

错误处理

🌐 Handling Errors

你可以通过连接到 onError 事件来处理错误。 这允许你根据遇到的错误类型执行自定义操作。 下面是如何使用 isErrorOfType 工具处理 NODE_INVALID 类型错误的示例。

🌐 You can handle errors by hooking into the onError event. This allows you to perform custom operations based on the type of error encountered. Here's an example of how to use the isErrorOfType utility to handle an error of NODE_INVALID type.

<script lang="ts" setup>
import { isErrorOfType, ErrorCode, useVueFlow, VueFlowError, VueFlow } from '@vue-flow/core'

const { onError } = useVueFlow()

onError(handleError)

function handleError(error: VueFlowError) {
  if (isErrorOfType(error, ErrorCode.NODE_INVALID)) {
    const [nodeId] = error.args
    // handle the error
  }
}
</script>

<template>
  <VueFlow @error="handleError" />
</template>