feat(onError): add onError prop #2772

packages/core/src/components/Edges/wrapEdge.tsx

@@ -9,7 +9,7 @@ import { EdgeAnchor } from './EdgeAnchor';
 import { getMarkerId } from '../../utils/graph';
 import { getMouseHandler } from './utils';
 import { elementSelectionKeys } from '../../utils';
-import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
+import type { EdgeProps, WrapEdgeProps, Connection, HandleType } from '../../types';
 
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
@@ -115,7 +115,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         getState: store.getState,
         setState: store.setState,
         isValidConnection,
-        elementEdgeUpdaterType: handleType,
+        edgeUpdaterType: handleType,
         onEdgeUpdateEnd: _onEdgeUpdateEnd,
       });
     };

packages/core/src/components/Handle/index.tsx

@@ -5,7 +5,7 @@ import { shallow } from 'zustand/shallow';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { handlePointerDown } from './handler';
-import { devWarn, getHostForElement, isMouseEvent } from '../../utils';
+import { getHostForElement, isMouseEvent } from '../../utils';
 import { addEdge } from '../../utils/graph';
 import { Position } from '../../types';
 import type { HandleProps, Connection, ReactFlowState } from '../../types';
@@ -42,7 +42,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     const nodeId = useNodeId();
 
     if (!nodeId) {
-      devWarn('Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+      store
+        .getState()
+        .onError?.('010', 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.');
+
       return null;
     }
 

packages/core/src/components/Handle/utils.ts

@@ -98,7 +98,7 @@ export function isValidHandle(
     const isValid =
       connectionMode === ConnectionMode.Strict
         ? (isTarget && handleIsSource) || (!isTarget && handleIsTarget)
-        : handleNodeId !== handle.nodeId || handleId !== handle.id;
+        : handleNodeId !== fromNodeId || handleId !== fromHandleId;
 
     if (isValid) {
       result.isValid = isValidConnection(connection);

packages/core/src/components/StoreUpdater/index.tsx

@@ -47,6 +47,7 @@ type StoreUpdaterProps = Pick<
   | 'elevateNodesOnSelect'
   | 'autoPanOnConnect'
   | 'autoPanOnNodeDrag'
+  | 'onError'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -123,6 +124,7 @@ const StoreUpdater = ({
   rfId,
   autoPanOnConnect,
   autoPanOnNodeDrag,
+  onError,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -178,6 +180,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('rfId', rfId, store.setState);
   useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
   useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
+  useDirectStoreUpdater('onError', onError, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);