Fix Safari browser client-side error when opening blog posts

[tyaga001]

Overview

When users attempt to open any blog post on Safari (macOS), they encounter a client-side error message instead of the blog content. This is a critical issue affecting all blog posts specifically on Safari desktop browser.

Error Details

Application error: a client-side exception has occurred (see the browser console for more information).

Affected Pages

All blog posts including:

• Supabase vs Clerk comparison
• MongoDB vs PostgreSQL comparison
• State of Databases 2024
• Neon vs Supabase comparison

Environment

• Browser: Safari on macOS
• Status: Reproducible on all blog posts
• Working on: Mobile Safari, Chrome, Firefox, Brave
• Issue occurs: Only on desktop Safari

Impact

• High severity: Users cannot access any blog content
• Affects main product functionality
• Potential loss of Safari users (significant macOS market share)
• SEO implications due to content inaccessibility

Debug Information Needed

1. Safari console logs
2. Network tab information
3. Stack trace of the error
4. Safari version details
5. MDX rendering process logs

Potential Causes

1. Safari-specific JavaScript compatibility issues
2. MDX processing problems specific to Safari
3. Client-side rendering conflicts
4. Next.js hydration issues
5. Safari's stricter security policies affecting content loading

Immediate Investigation Steps

1. Check Safari console for detailed error messages
2. Verify Safari version compatibility
3. Test static vs. dynamic rendering
4. Analyze MDX processing pipeline
5. Check for Safari-specific polyfills needed

Proposed Solutions

1. Implement Safari-specific error handling:

// Add Safari-specific checks
if (isSafari()) {
  // Enhanced error handling
  try {
    // Content rendering
  } catch (error) {
    // Graceful fallback
  }
}

2. Consider SSR fallback:

// Fallback to SSR for Safari
export const getServerSideProps = async (context) => {
  const isSafari = context.req.headers['user-agent'].includes('Safari');
  if (isSafari) {
    // Server-side render approach
  }
}

Acceptance Criteria

• Blog posts load successfully on Safari desktop
• No client-side errors appear
• Content renders correctly
• Navigation between posts works
• Images and code blocks display properly
• Performance metrics meet standards
• No regression in other browsers

Testing Requirements

1. Test across multiple Safari versions
2. Verify on different macOS versions
3. Check both Intel and M1/M2 Macs
4. Test with different network conditions
5. Verify with cache cleared/enabled

Additional Notes

• Consider adding browser compatibility warning
• Implement error tracking for Safari-specific issues
• Add Safari-specific tests to CI pipeline

Priority: Critical (blocking content access)

[nirnejak]

@tyaga001 it's not a safari-specific issue, the cause of the issue in the next.js server timeout.
The solution for this is to change the blog implementation

[nirnejak]

Fixed in #69