Merge pull request #1506 from redpanda-data/nf/better-error

rpcn: pretty print linter errors on update
redpanda-data · Nov 8, 2024 · 994815e · 994815e
2 parents c6ca423 + c3306d8
commit 994815e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 30 deletions.
diff --git a/frontend/src/components/pages/rp-connect/Pipelines.Create.tsx b/frontend/src/components/pages/rp-connect/Pipelines.Create.tsx
@@ -23,8 +23,7 @@ import { Link } from 'react-router-dom';
 import { Link as ChLink } from '@redpanda-data/ui';
 import Tabs from '../../misc/tabs/Tabs';
 import { PipelineCreate } from '../../../protogen/redpanda/api/dataplane/v1alpha2/pipeline_pb';
-import { ConnectError } from '@connectrpc/connect';
-import { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
+import { formatPipelineError } from './errors';
 const { ToastContainer, toast } = createStandaloneToast();
 
 const exampleContent = `
@@ -139,32 +138,10 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
                 appGlobal.history.push('/connect-clusters');
             })
             .catch(err => {
-                const details = [];
-                let genDesc = String(err);
-                if (err instanceof ConnectError) {
-                    genDesc = err.message;
-                    for (const detail of err.details) {
-                        if (isLintHint(detail)) {
-                            const hint = LintHint.fromJsonString(JSON.stringify(detail.debug));
-                            details.push(`Line ${hint.line}, Col ${hint.column}: ${hint.hint}`)
-                        }
-                    }
-                }
-                let desc = <Text as="span">{genDesc}</Text>
-                if (details.length > 0) {
-                    desc = <>
-                        <Text as="span">{genDesc}</Text>
-                        <ul>
-                            {details.map((d, idx) => (
-                                <li style={{ listStylePosition: 'inside' }} key={idx}>{d}</li>
-                            ))}
-                        </ul>
-                    </>
-                }
                 toast({
                     status: 'error', duration: null, isClosable: true,
                     title: 'Failed to create pipeline',
-                    description: desc,
+                    description: formatPipelineError(err),
                 })
             })
             .finally(() => {
@@ -264,7 +241,3 @@ const isKafkaConnectPipeline = (value: string | undefined): boolean => {
 
     return matchCount > 0;
 };
-
-function isLintHint(obj: any): obj is { type: string, debug: any } {
-    return obj && obj.type === LintHint.typeName;
-}
diff --git a/frontend/src/components/pages/rp-connect/Pipelines.Edit.tsx b/frontend/src/components/pages/rp-connect/Pipelines.Edit.tsx
@@ -22,6 +22,7 @@ import { Link } from 'react-router-dom';
 import { PipelineUpdate } from '../../../protogen/redpanda/api/dataplane/v1alpha2/pipeline_pb';
 import { PipelineEditor } from './Pipelines.Create';
 import { Link as ChLink } from '@redpanda-data/ui';
+import { formatPipelineError } from './errors';
 const { ToastContainer, toast } = createStandaloneToast();
 
 
@@ -146,7 +147,7 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
                 toast({
                     status: 'error', duration: null, isClosable: true,
                     title: 'Failed to update pipeline',
-                    description: String(err),
+                    description: formatPipelineError(err),
                 })
             })
             .finally(() => {

diff --git a/frontend/src/components/pages/rp-connect/errors.tsx b/frontend/src/components/pages/rp-connect/errors.tsx
@@ -0,0 +1,35 @@
+import { Text } from '@redpanda-data/ui';
+import { ConnectError } from '@connectrpc/connect';
+import { LintHint } from '../../../protogen/redpanda/api/common/v1/linthint_pb';
+
+export function formatPipelineError(
+    err: any,
+): any {
+    const details = [];
+    let genDesc = String(err);
+    if (err instanceof ConnectError) {
+        genDesc = err.message;
+        for (const detail of err.details) {
+            if (isLintHint(detail)) {
+                const hint = LintHint.fromJsonString(JSON.stringify(detail.debug));
+                details.push(`Line ${hint.line}, Col ${hint.column}: ${hint.hint}`)
+            }
+        }
+    }
+    let desc = <Text as="span">{genDesc}</Text>
+    if (details.length > 0) {
+        desc = <>
+            <Text as="span">{genDesc}</Text>
+            <ul>
+                {details.map((d, idx) => (
+                    <li style={{ listStylePosition: 'inside' }} key={idx}>{d}</li>
+                ))}
+            </ul>
+        </>
+    }
+    return desc
+}
+
+function isLintHint(obj: any): obj is { type: string, debug: any } {
+    return obj && obj.type === LintHint.typeName;
+}