Best Practices

Follow these guidelines to build performant, reliable, and secure applications with the MIMS SDK.

Performance

Optimize rendering, reduce re-renders, and improve user experience.

Error Handling

Handle errors gracefully and provide helpful feedback to users.

Security

Protect API keys, validate input, and secure document handling.

Quick Tips

Performance

Use selectors with useDocumentStore to prevent unnecessary re-renders
Lazy load the SDK only when document viewing is needed
Implement virtual scrolling for documents with many pages
Cache document metadata to reduce API calls

Error Handling

Always wrap SDK operations in try-catch blocks
Implement retry logic with exponential backoff
Provide user-friendly error messages
Log errors for debugging while keeping sensitive data out of logs

Security

Never expose secret keys (sk_*) in client-side code
Validate all user input before submission
Use HTTPS in production
Implement proper CORS configuration

Code Example: Production Setup

Recommended Setuptsx

import { MIMSProvider, useSDK, useDocumentStore } from '@mims/sdk-react';
import { ErrorBoundary } from 'react-error-boundary';

// 1. Wrap SDK in error boundary
function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <MIMSProvider
        apiKey={process.env.NEXT_PUBLIC_MIMS_API_KEY!}
        debug={process.env.NODE_ENV === 'development'}
        timeout={30000}
        onError={handleSDKError}
        onReady={handleSDKReady}
      >
        <DocumentApp />
      </MIMSProvider>
    </ErrorBoundary>
  );
}

// 2. Use selectors for optimal rendering
function PageIndicator() {
  // Only re-renders when these specific values change
  const currentPage = useDocumentStore((s) => s.currentPage);
  const totalPages = useDocumentStore((s) => s.totalPages);
  
  return <span>{currentPage} / {totalPages}</span>;
}

// 3. Handle errors gracefully
function handleSDKError(error: string) {
  // Log to monitoring service
  console.error('[MIMS SDK Error]', error);
  
  // Don't expose internal errors to users
  if (error.includes('API key')) {
    showToast('Configuration error. Please contact support.');
  } else {
    showToast('Something went wrong. Please try again.');
  }
}

Development vs Production

Enable debug: true in development to see detailed SDK logs, but disable it in production to avoid performance overhead and potential information leakage.