Best Practices

import { DocCentralProvider, useSDK, useDocumentStore } from '@doccentral/react';
import { ErrorBoundary } from 'react-error-boundary';

// 1. Wrap SDK in error boundary
function App() {
  return (
    <ErrorBoundary fallback={<ErrorFallback />}>
      <DocCentralProvider
        apiKey={process.env.NEXT_PUBLIC_DOCCENTRAL_API_KEY!}
        debug={process.env.NODE_ENV === 'development'}
        timeout={30000}
        onError={handleSDKError}
        onReady={handleSDKReady}
      >
        <DocumentApp />
      </DocCentralProvider>
    </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('[DocCentral 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.');
  }
}