chore: error boundaries

apps/ai-hero/package.json

@@ -155,8 +155,8 @@
 		"react-hook-form": "^7.48.0",
 		"react-hot-toast": "^2.4.1",
 		"react-icons": "^4.11.0",
-		"react-instantsearch": "7.15.1",
-		"react-instantsearch-nextjs": "0.4.2",
+		"react-instantsearch": "^7.13.9",
+		"react-instantsearch-nextjs": "^0.3.20",
 		"react-markdown": "9.0.3",
 		"react-resizable-panels": "^2.1.5",
 		"react-stately": "^3.33.0",

apps/ai-hero/src/app/(search)/q/_components/search.tsx

@@ -12,7 +12,6 @@ import { InstantSearchNext } from 'react-instantsearch-nextjs'
 
 import { InfiniteHits } from './infinite-hits'
 import ClearRefinements from './instantsearch/clear-refinements'
-import { HitsPerPageSelect } from './instantsearch/hits-per-page-select'
 import { RefinementList } from './instantsearch/refinement-list'
 import { SearchBox } from './instantsearch/searchbox'
 
@@ -31,7 +30,15 @@ const hitsPerPageItems = [
 const ErrorFallback = ({ error }: FallbackProps) => (
 	<div className="rounded-lg border border-red-200 bg-red-50 p-4">
 		<h3 className="font-semibold text-red-800">Search Error</h3>
-		<p className="text-red-600">{error.message}</p>
+		<p className="text-red-600">
+			{error.message || 'An error occurred while loading search'}
+		</p>
+		<button
+			onClick={() => window.location.reload()}
+			className="mt-2 rounded bg-red-100 px-4 py-2 text-red-800 hover:bg-red-200"
+		>
+			Try Again
+		</button>
 	</div>
 )
 
@@ -58,54 +65,65 @@ function Search() {
 	const [instructor, setInstructor] = useQueryState('instructor')
 	const [query, setQuery] = useQueryState('q')
 	const [tagsValue, setTagsValue] = useQueryState('tags')
+	const [isReady, setIsReady] = React.useState(false)
+
+	React.useEffect(() => {
+		// Ensure all query params are initialized
+		if (type !== undefined && query !== undefined && tagsValue !== undefined) {
+			setIsReady(true)
+		}
+	}, [type, query, tagsValue])
+
+	if (!isReady) {
+		return <div>Initializing search...</div>
+	}
+
+	const initialUiState = {
+		[TYPESENSE_COLLECTION_NAME]: {
+			query: query || '',
+			refinementList: {
+				...(typeof type === 'string' && {
+					type: type.split(','),
+				}),
+				...(typeof tagsValue === 'string' && {
+					'tags.fields.label': tagsValue.split(','),
+				}),
+			},
+		},
+	}
 
 	return (
 		<InstantSearchNext
 			searchClient={typesenseInstantsearchAdapter.searchClient}
 			indexName={TYPESENSE_COLLECTION_NAME}
 			routing={false}
 			onStateChange={({ uiState, setUiState }) => {
-				function handleRefinementListChange(
-					attribute: string,
-					setState: (value: any) => void,
-				) {
-					const refinementList =
-						uiState[TYPESENSE_COLLECTION_NAME]?.refinementList?.[attribute]
-					if (refinementList && refinementList.length > 0) {
-						setState(refinementList)
-					} else {
-						setState(null)
+				try {
+					function handleRefinementListChange(
+						attribute: string,
+						setState: (value: any) => void,
+					) {
+						const refinementList =
+							uiState[TYPESENSE_COLLECTION_NAME]?.refinementList?.[attribute]
+						if (refinementList && refinementList.length > 0) {
+							setState(refinementList)
+						} else {
+							setState(null)
+						}
 					}
-				}
 
-				const query = uiState[TYPESENSE_COLLECTION_NAME]?.query
-				setQuery(query || null)
+					const searchQuery = uiState[TYPESENSE_COLLECTION_NAME]?.query
+					setQuery(searchQuery || null)
 
-				handleRefinementListChange('type', setType)
-				handleRefinementListChange('tags.fields.label', setTagsValue)
-				// handleRefinementListChange('instructor_name', setInstructor)
+					handleRefinementListChange('type', setType)
+					handleRefinementListChange('tags.fields.label', setTagsValue)
 
-				// IMPORTANT: always call setUiState to sync the state
-				setUiState(uiState)
+					setUiState(uiState)
+				} catch (error) {
+					console.error('Search state update error:', error)
+				}
 			}}
-			initialUiState={
-				{
-					[TYPESENSE_COLLECTION_NAME]: {
-						query,
-						refinementList: {
-							...(typeof type === 'string' && {
-								type: type.split(','),
-							}),
-							...(typeof tagsValue === 'string' && {
-								'tags.fields.label': tagsValue.split(','),
-							}),
-							// ...(typeof instructor === 'string' && {
-							// 	instructor_name: instructor.split(','),
-							// }),
-						},
-					},
-				} as any
-			}
+			initialUiState={initialUiState}
 			future={{ preserveSharedStateOnUnmount: true }}
 		>
 			<Configure filters={'state:published'} hitsPerPage={40} />

apps/egghead/package.json

@@ -94,8 +94,8 @@
 		"react-gravatar": "^2.6.3",
 		"react-hook-form": "^7.48.0",
 		"react-hot-toast": "^2.4.1",
-		"react-instantsearch": "7.15.1",
-		"react-instantsearch-nextjs": "0.4.2",
+		"react-instantsearch": "^7.13.9",
+		"react-instantsearch-nextjs": "^0.3.20",
 		"react-instantsearch-router-nextjs": "^7.13.9",
 		"react-markdown": "9.0.3",
 		"react-wrap-balancer": "^0.2.4",

apps/go-local-first/package.json

@@ -170,8 +170,8 @@
 		"react-hook-form": "^7.48.0",
 		"react-hot-toast": "^2.4.1",
 		"react-icons": "^4.11.0",
-		"react-instantsearch": "7.15.1",
-		"react-instantsearch-nextjs": "0.4.2",
+		"react-instantsearch": "^7.13.9",
+		"react-instantsearch-nextjs": "^0.3.20",
 		"react-markdown": "9.0.3",
 		"react-resizable-panels": "^2.1.5",
 		"react-stately": "^3.33.0",