故障排除

¥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 父容器需要宽度和高度来渲染图形。

  ¥Description: The Vue Flow parent container needs a width and a height to render the graph.

• 修复：确保 Vue Flow 的父容器已定义宽度和高度。

  ¥Fix: Ensure the parent container of Vue Flow has defined width and height.

<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

• 描述：节点被视为无效，可能是由于配置不正确。

  ¥Description: A node is considered invalid, potentially due to incorrect configuration.

• 修复：检查节点配置的正确性，确保所有必需的属性都已设置。

  ¥Fix: Check the node configuration for correctness, ensuring all required properties are set.

// 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 时找不到相应的节点。

  ¥Description: A corresponding node could not be found when calling useNode.

• 修复：在自定义节点组件之外调用 useNode 时，请验证节点是否存在。

  ¥Fix: Verify the node exists when you call useNode outside of a custom node component.

NODE_MISSING_PARENT

• 描述：节点缺少定义的父节点，而嵌套节点必须有父节点。

  ¥Description: A node is missing a defined parent node, necessary for nested nodes.

• 修复：在为父节点添加子节点之前，请确保其存在。

  ¥Fix: Ensure the parent node exists before adding a child node for it.

// 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

• 描述：节点的类型没有定义相应的组件。

  ¥Description: A node's type has no corresponding component defined.

• 修复：为你使用的每种节点类型定义一个组件，以确保自定义节点的正确渲染。

  ¥Fix: Define a component for every node-type you use to ensure correct rendering of your custom nodes.

NODE_EXTENT_INVALID

• 描述：只有子节点可以使用父级范围，这表示配置无效。

  ¥Description: Only child nodes can use a parent extent, indicating an invalid configuration.

• 修复：确保只有子节点使用父级范围，并且父节点存在。

  ¥Fix: Ensure only child nodes use a parent extent, and that the parent node exists.

EDGE_INVALID

• 描述：边缘缺少源节点或目标节点。

  ¥Description: An edge is missing a source or target.

• 修复：确保所有边的 source 和 target 属性均正确设置。

  ¥Fix: Ensure all edges have both source and target properties correctly set.

// 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 时找不到相应的边。

  ¥Description: A corresponding edge could not be found when calling useEdge.

• 修复：在自定义边缘组件之外调用 useEdge 时，请验证边缘是否存在。

  ¥Fix: Verify the edge exists when you call useEdge outside of a custom edge component.

EDGE_SOURCE_MISSING / EDGE_TARGET_MISSING

• 描述：边缘的源节点或目标节点缺失。

  ¥Description: An edge's source or target node is missing.

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

  ¥Fix: Ensure both the source and target nodes exist and are correctly set for each edge.

EDGE_TYPE_MISSING

• 描述：边缘的类型没有定义相应的组件。

  ¥Description: An edge's type has no corresponding component defined.

• 修复：为你使用的每种边类型定义一个组件，以确保正确渲染自定义边。

  ¥Fix: Define a component for every edge-type you use to ensure correct rendering of your custom edges.

EDGE_SOURCE_TARGET_SAME

• 描述：边缘的源节点和目标是同一个节点。

  ¥Description: An edge's source and target are the same node.

• 修复：如果你有意为之，可以忽略此错误。否则，请确保源节点和目标节点不同。

  ¥Fix: If this is intentional, you can ignore this error. Otherwise, ensure the source and target nodes are different.

EDGE_SOURCE_TARGET_MISSING

• 描述：边缘中缺少源节点和目标节点。

  ¥Description: Both, the source and target nodes are missing from an edge.

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

  ¥Fix: Ensure both the source and target nodes exist and are correctly set for each edge.

EDGE_ORPHANED

• 描述：边缘丢失了其源节点或目标节点，可能是由于节点被删除。

  ¥Description: An edge has lost its source or target node, likely due to node deletion.

• 修复：如果你故意将边设置为孤立状态，则可以忽略此错误。否则，请确保源节点和目标节点存在，或者在边变为孤立节点之前清理它们。

  ¥Fix: If you intentionally orphaned the edge, you can ignore this error. Otherwise, ensure the source and target nodes exist or that you clean up edges before they are 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>