notify large json (#182, #186)

[ArjunCodess]

fixes #186 and #182 by improving file size handling and error notifications.

Changes

File size handling

• Increase limit from 1MB to 5MB (maxSize: 1024 * 1024 * 5)
• Add onDropRejected with clear error messages
• Show actual file size vs. limit
• Display "Maximum file size: 5MB" in the UI

Error handling

• Client-side JSON validation before submission
• Server-side error handling with toast notifications
• Visual error indicators with warning icons
• Clear, actionable error messages

User experience

• Immediate feedback on file rejection
• Visual error styling with red borders and warning icons
• Better error recovery with guidance
• Consistent error handling across client and server

Technical details

Client-side (DragAndDropForm.tsx)

// File rejection handling
const onDropRejected = useCallback((fileRejections: any[]) => {
  const rejection = fileRejections[0];
  if (rejection?.errors?.[0]?.code === 'file-too-large') {
    setErrorMessage(`File is too large. Maximum size is 5MB. Your file is ${(rejection.file.size / (1024 * 1024)).toFixed(2)}MB.`);
  }
  // ... other error handling
}, []);

// Client-side JSON validation
try {
  JSON.parse(jsonValue);
  rawJsonInputRef.current.value = jsonValue;
  submit(formRef.current);
} catch (error) {
  const errorMsg = error instanceof Error ? error.message : "Invalid JSON format";
  setErrorMessage(`JSON parsing error: ${errorMsg}`);
}

Server-side (createFromFile.ts)

// Comprehensive error handling
try {
  const doc = await createFromRawJson(filename, rawJson);
  return redirect(`/j/${doc.id}`);
} catch (error) {
  if (error instanceof Error) {
    if (error.message.includes("JSON")) {
      setErrorMessage(toastCookie, "Invalid JSON format", "The file contains invalid JSON...");
    } else if (error.message.includes("too large")) {
      setErrorMessage(toastCookie, "File too large", "The JSON file is too large to process...");
    }
    // ... more error handling
  }
}

JSON validation (jsonDoc.server.ts)

// Enhanced JSON validation with better error messages
try {
  JSON.parse(contents);
} catch (error) {
  const errorMessage = error instanceof Error ? error.message : "Invalid JSON format";
  throw new Error(`JSON parsing failed: ${errorMessage}`);
}

Issues resolved

Issue #186: "Notify if file is too big"

• Users get immediate feedback when files exceed the size limit
• Clear error messages show actual file size vs. limit
• Visual indicators with warning icons
• Real-time feedback when files are rejected

Issue #182: "Local JSON Hero failing on 25K line file"

• Increased file size limit from 1MB to 5MB
• Better error handling for large files
• Improved JSON parsing error messages
• Handles 25K+ line files

Testing

• File size validation with files over 5MB
• JSON parsing error handling with invalid JSON
• Visual error indicators display correctly
• Toast notifications work for server-side errors
• File size information displays correctly
• No linting errors introduced

Screenshots

Before

• No feedback when files are too large
• Silent failures for invalid JSON
• 1MB file size limit

After

• Clear error messages with file size information
• Visual error indicators with warning icons
• 5MB file size limit with user-friendly notifications

Breaking changes

None.

Checklist

• Code follows the project's style guidelines
• Self-review completed
• Comments added for complex logic
• Documentation updated (if needed)
• No new warnings introduced
• Changes are backward compatible

Related issues

• Fixes #186
• Fixes #182

Additional notes

This improves the experience for large JSON files while maintaining performance and reliability. Users get clear, actionable feedback when encountering file size or JSON parsing issues.

[ArjunCodess]

@matt-aitken hey! :)

if there is anything left to implement / anything to be edited, please let me know!

[ArjunCodess]

@matt-aitken just a follow-up.

[ArjunCodess]

@matt-aitken just a follow-up.