fix: improve JSON comparison error reporting and add line numbers

src/pages/tools/json/json-comparison/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import LineNumberInput from '@components/input/LineNumberInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { compareJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -122,7 +122,7 @@ export default function JsonComparison({ title }: ToolComponentProps) {
           <StyledGrid container spacing={2}>
             <Grid item xs={4}>
               <StyledInputWrapper>
-                <ToolTextInput
+                <LineNumberInput
                   title="First JSON"
                   value={input1}
                   onChange={handleInput1Change}
@@ -132,7 +132,7 @@ export default function JsonComparison({ title }: ToolComponentProps) {
             </Grid>
             <Grid item xs={4}>
               <StyledInputWrapper>
-                <ToolTextInput
+                <LineNumberInput
                   title="Second JSON"
                   value={input2}
                   onChange={handleInput2Change}

src/pages/tools/json/json-comparison/service.ts

@@ -18,12 +18,20 @@ const tryParseJSON = (
     const data = JSON.parse(fixedJson);
     return { valid: true, data };
   } catch (error) {
+    const errorMessage =
+      error instanceof SyntaxError ? error.message : 'Invalid JSON format';
+    // Extract line and column info from the error message if available
+    const match = errorMessage.match(/at line (\d+) column (\d+)/);
+    if (match) {
+      const [, line, column] = match;
+      return {
+        valid: false,
+        error: `${errorMessage}\nLocation: Line ${line}, Column ${column}`
+      };
+    }
     return {
       valid: false,
-      error:
-        error instanceof SyntaxError
-          ? `Invalid JSON: ${error.message}`
-          : 'Invalid JSON format'
+      error: errorMessage
     };
   }
 };
@@ -42,14 +50,14 @@ export const compareJson = (
 
   // Handle parsing errors
   if (!parsed1.valid || !parsed2.valid) {
-    throw new Error(
-      [
-        parsed1.valid ? null : parsed1.error,
-        parsed2.valid ? null : parsed2.error
-      ]
-        .filter(Boolean)
-        .join('\n')
-    );
+    const errors = [];
+    if (!parsed1.valid) {
+      errors.push(`First JSON: ${parsed1.error}`);
+    }
+    if (!parsed2.valid) {
+      errors.push(`Second JSON: ${parsed2.error}`);
+    }
+    throw new Error(errors.join('\n\n'));
   }
 
   // Compare the valid JSON objects