fix: catch format sql error

eosphoros-ai · Mar 20, 2024 · 74bb7f4 · 74bb7f4
1 parent aab67df
commit 74bb7f4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/web/components/chat/chat-content/chart-view.tsx b/web/components/chat/chat-content/chart-view.tsx
@@ -1,9 +1,9 @@
 import { Datum } from '@antv/ava';
 import { Table, Tabs, TabsProps } from 'antd';
 import React from 'react';
-import { format } from 'sql-formatter';
 import { AutoChart, BackEndChartType, getChartType } from '@/components/chart/autoChart';
 import { CodePreview } from './code-preview';
+import { formatSql } from '@/utils';
 
 function ChartView({ data, type, sql }: { data: Datum[]; type: BackEndChartType; sql: string }) {
   const columns = data?.[0]
@@ -20,10 +20,11 @@ function ChartView({ data, type, sql }: { data: Datum[]; type: BackEndChartType;
     label: 'Chart',
     children: <AutoChart data={data} chartType={getChartType(type)} />,
   };
+
   const SqlItem = {
     key: 'sql',
     label: 'SQL',
-    children: <CodePreview language="sql" code={format(sql ?? '', { language: 'mysql' }) as string} />,
+    children: <CodePreview language="sql" code={formatSql(sql)} />,
   };
   const DataItem = {
     key: 'data',

diff --git a/web/components/chat/chat-content/config.tsx b/web/components/chat/chat-content/config.tsx
@@ -1,7 +1,6 @@
 import { LinkOutlined, ReadOutlined, SyncOutlined } from '@ant-design/icons';
 import ReactMarkdown from 'react-markdown';
 import { Table, Image, Tag, Tabs, TabsProps, Popover } from 'antd';
-import { format } from 'sql-formatter';
 import { Reference } from '@/types/chat';
 import { AutoChart, BackEndChartType, getChartType } from '@/components/chart';
 import { CodePreview } from './code-preview';
@@ -15,6 +14,7 @@ import VisChart from './vis-chart';
 import VisDashboard from './vis-dashboard';
 import VisPlugin from './vis-plugin';
 import VisCode from './vis-code';
+import { formatSql } from '@/utils';
 
 type MarkdownComponent = Parameters<typeof ReactMarkdown>['0']['components'];
 
@@ -228,7 +228,7 @@ const extraComponents: MarkdownComponent = {
     const SqlItem = {
       key: 'sql',
       label: 'SQL',
-      children: <CodePreview code={format(data?.sql, { language: 'mysql' }) as string} language={'sql'} />,
+      children: <CodePreview code={formatSql(data?.sql, 'mysql')} language="sql" />,
     };
     const DataItem = {
       key: 'data',

diff --git a/web/components/chat/chat-content/vis-convert-error.tsx b/web/components/chat/chat-content/vis-convert-error.tsx
@@ -1,5 +1,5 @@
-import { format } from 'sql-formatter';
 import { CodePreview } from './code-preview';
+import { formatSql } from '@/utils';
 
 interface Props {
   data: {
@@ -15,7 +15,7 @@ function VisConvertError({ data }: Props) {
       <div className="p-3 text-white bg-red-500 whitespace-normal">{data.display_type}</div>
       <div className="p-3 bg-red-50">
         <div className="mb-2 whitespace-normal">{data.thought}</div>
-        <CodePreview code={format(data.sql)} language="sql" />
+        <CodePreview code={formatSql(data.sql)} language="sql" />
       </div>
     </div>
   );

diff --git a/web/components/chat/monaco-editor.tsx b/web/components/chat/monaco-editor.tsx
@@ -2,7 +2,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import Editor, { OnChange, loader } from '@monaco-editor/react';
 import classNames from 'classnames';
 import { useMemo } from 'react';
-import { format } from 'sql-formatter';
+import { formatSql } from '@/utils';
 
 loader.config({ monaco });
 
@@ -21,9 +21,9 @@ export default function MonacoEditor({ className, value, language = 'mysql', onC
       return value;
     }
     if (thoughts && thoughts.length > 0) {
-      return format(`-- ${thoughts} \n${value}`);
+      return formatSql(`-- ${thoughts} \n${value}`);
     }
-    return format(value);
+    return formatSql(value);
   }, [value, thoughts]);
 
   return (

diff --git a/web/utils/index.ts b/web/utils/index.ts
@@ -1,3 +1,5 @@
+import { format } from 'sql-formatter';
+
 /** Theme */
 export const STORAGE_THEME_KEY = '__db_gpt_theme_key';
 /** Language */
@@ -7,5 +9,14 @@ export const STORAGE_INIT_MESSAGE_KET = '__db_gpt_im_key';
 /** Flow nodes */
 export const FLOW_NODES_KEY = '__db_gpt_static_flow_nodes_key';
 
+export function formatSql(sql: string, lang?: string) {
+  if (!sql) return '';
+  try {
+    return format(sql, { language: lang });
+  } catch (e) {
+    return sql;
+  }
+}
+
 export * from './storage';
 export * from './constants';