From 922005e236b63045cf778f06e7d978645085d08a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Tue, 26 Apr 2022 16:33:54 +0200 Subject: [PATCH] chore(warnings): format warning logs, add troubleshooting page --- src/components/Attribution/index.tsx | 3 ++- src/container/EdgeRenderer/MarkerSymbols.tsx | 4 +++- src/container/EdgeRenderer/index.tsx | 8 ++++++-- src/container/NodeRenderer/index.tsx | 4 +++- src/container/ReactFlow/utils.ts | 2 +- src/hooks/useResizeHandler.ts | 4 +++- src/store/utils.ts | 4 +++- src/utils/graph.ts | 12 +++++++++--- 8 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/components/Attribution/index.tsx b/src/components/Attribution/index.tsx index 8dcaeabb..ed7c9f10 100644 --- a/src/components/Attribution/index.tsx +++ b/src/components/Attribution/index.tsx @@ -10,7 +10,8 @@ type AttributionProps = { function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) { if ( - (proOptions?.account === 'paid-sponsor' || + (proOptions?.account === 'paid-pro' || + proOptions?.account === 'paid-sponsor' || proOptions?.account === 'paid-enterprise' || proOptions?.account === 'paid-custom') && proOptions?.hideAttribution diff --git a/src/container/EdgeRenderer/MarkerSymbols.tsx b/src/container/EdgeRenderer/MarkerSymbols.tsx index b9f47a81..94d19876 100644 --- a/src/container/EdgeRenderer/MarkerSymbols.tsx +++ b/src/container/EdgeRenderer/MarkerSymbols.tsx @@ -39,7 +39,9 @@ export function useMarkerSymbol(type: MarkerType) { const symbolExists = MarkerSymbols.hasOwnProperty(type); if (!symbolExists) { - console.warn(`marker type "${type}" doesn't exist.`); + console.warn( + `[React Flow]: marker type "${type}" doesn't exist. Help: https://reactflow.dev/docs/guides/troubleshooting` + ); return () => null; } diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index a648ecb3..0cfc5454 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/src/container/EdgeRenderer/index.tsx @@ -106,12 +106,16 @@ const EdgeRenderer = (props: EdgeRendererProps) => { const targetPosition = targetHandle?.position || Position.Top; if (!sourceHandle) { - console.warn(`couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}`); + console.warn( + `[React Flow]: couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/docs/guides/troubleshooting` + ); return null; } if (!targetHandle) { - console.warn(`couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}`); + console.warn( + `[React Flow]: couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/docs/guides/troubleshooting` + ); return null; } diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 663458d3..10b1e2a0 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -71,7 +71,9 @@ const NodeRenderer = (props: NodeRendererProps) => { const nodeType = node.type || 'default'; if (!props.nodeTypes[nodeType]) { - console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`); + console.warn( + `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/docs/guides/troubleshooting` + ); } const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType; diff --git a/src/container/ReactFlow/utils.ts b/src/container/ReactFlow/utils.ts index 42e8becb..f6197286 100644 --- a/src/container/ReactFlow/utils.ts +++ b/src/container/ReactFlow/utils.ts @@ -16,7 +16,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any const typeKeys = Object.keys(nodeOrEdgeTypes); if (shallow(typesKeysRef.current, typeKeys)) { console.warn( - "React Flow: It looks like that you created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them." + "[React Flow]: It looks like you have created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them. Help: https://reactflow.dev/docs/guides/troubleshooting" ); } diff --git a/src/hooks/useResizeHandler.ts b/src/hooks/useResizeHandler.ts index 0c0573b4..a9ecf40b 100644 --- a/src/hooks/useResizeHandler.ts +++ b/src/hooks/useResizeHandler.ts @@ -17,7 +17,9 @@ function useResizeHandler(rendererNode: MutableRefObject) const size = getDimensions(rendererNode.current); if (size.height === 0 || size.width === 0) { - console.warn('The React Flow parent container needs a width and a height to render the graph.'); + console.warn( + '[React Flow]: The React Flow parent container needs a width and a height to render the graph. Help: https://reactflow.dev/docs/guides/troubleshooting' + ); } store.setState({ width: size.width || 500, height: size.height || 500 }); diff --git a/src/store/utils.ts b/src/store/utils.ts index 0cc8ba3c..97c11e48 100644 --- a/src/store/utils.ts +++ b/src/store/utils.ts @@ -141,7 +141,9 @@ export function createPositionChange({ ] : currentExtent; } else { - console.warn('Only child nodes can use parent extent'); + console.warn( + '[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/docs/guides/troubleshooting' + ); currentExtent = nodeExtent; } } diff --git a/src/utils/graph.ts b/src/utils/graph.ts index a0927dbc..b720d66a 100644 --- a/src/utils/graph.ts +++ b/src/utils/graph.ts @@ -57,7 +57,9 @@ const connectionExists = (edge: Edge, edges: Edge[]) => { export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => { if (!edgeParams.source || !edgeParams.target) { - console.warn("Can't create edge. An edge needs a source and a target."); + console.warn( + "[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/docs/guides/troubleshooting" + ); return edges; } @@ -80,14 +82,18 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => { if (!newConnection.source || !newConnection.target) { - console.warn("Can't create new edge. An edge needs a source and a target."); + console.warn( + "[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/docs/guides/troubleshooting" + ); return edges; } const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge; if (!foundEdge) { - console.warn(`The old edge with id=${oldEdge.id} does not exist.`); + console.warn( + `[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/docs/guides/troubleshooting` + ); return edges; }