fix(Home): add AbortController cleanup to prevent memory leaks on unmount (#7)

* fix(Home): add AbortController cleanup to prevent memory leaks on unmount

useEffect had no cleanup — if the component unmounted before fetches
completed, React would attempt state updates on an unmounted component.
AbortController cancels both fetches on cleanup. AbortError is silently
ignored (not treated as a fetch failure) per Gemini review on PR #6.

* test(Home): assert AbortError is silently ignored, not logged as error

When a fetch is aborted (e.g. component unmount), the AbortError should
be swallowed — it is not a real failure. Verifies console.error is NOT
called when all fetches reject with an AbortError.

* chore: add coverage to .gitignore, delete stale docs copy files

coverage/ directories were untracked. Also removes accidental *copy.md
files that were left over from a previous session.

* fix(Home): check res.ok before parsing JSON on both fetch calls

fetch() only rejects on network errors — HTTP 4xx/5xx responses resolve
with a non-OK status. Without this check a 500 would try to parse an
error body as JSON and throw a cryptic error. Addresses high-priority
Gemini feedback on PR #7.

* test(Home): cover res.ok HTTP error check and update mock responses

Adds two tests that verify a non-OK HTTP response (4xx/5xx) is treated
as an error and logged via console.error. Updates all existing mocks to
include ok: true to match the new res.ok guard.

Author: alichherawalla

.gitignore

@@ -3,3 +3,4 @@ dist
 .env
 *.db
 .turbo
+coverage

packages/web/src/pages/Home.test.tsx

@@ -27,9 +27,9 @@ beforeEach(() => {
   consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
   global.fetch = vi.fn().mockImplementation((url: string) => {
     if (url.includes('/meta/genres')) {
-      return Promise.resolve({ json: () => Promise.resolve(mockGenres) })
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(mockGenres) })
     }
-    return Promise.resolve({ json: () => Promise.resolve(mockMovies) })
+    return Promise.resolve({ ok: true, json: () => Promise.resolve(mockMovies) })
   })
 })
 
@@ -92,7 +92,7 @@ describe('Home — search and genre filter', () => {
     const fetchError = new Error('Network error')
     global.fetch = vi.fn().mockImplementation((url: string) => {
       if (url.includes('/meta/genres')) {
-        return Promise.resolve({ json: () => Promise.resolve(mockGenres) })
+        return Promise.resolve({ ok: true, json: () => Promise.resolve(mockGenres) })
       }
       return Promise.reject(fetchError)
     })
@@ -107,10 +107,55 @@ describe('Home — search and genre filter', () => {
       if (url.includes('/meta/genres')) {
         return Promise.reject(fetchError)
       }
-      return Promise.resolve({ json: () => Promise.resolve(mockMovies) })
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(mockMovies) })
     })
 
     renderHome()
     await waitFor(() => expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to fetch genres:', fetchError))
   })
+
+  it('does not log console.error when fetch is aborted (component unmount)', async () => {
+    const abortError = Object.assign(new Error('Aborted'), { name: 'AbortError' })
+    global.fetch = vi.fn().mockRejectedValue(abortError)
+
+    renderHome()
+    // Wait for promises to settle
+    await new Promise(r => setTimeout(r, 0))
+
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
+
+  it('logs console.error when movies fetch returns a non-OK HTTP status', async () => {
+    global.fetch = vi.fn().mockImplementation((url: string) => {
+      if (url.includes('/meta/genres')) {
+        return Promise.resolve({ ok: true, json: () => Promise.resolve(mockGenres) })
+      }
+      return Promise.resolve({ ok: false, status: 500 })
+    })
+
+    renderHome()
+    await waitFor(() =>
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Failed to fetch movies:',
+        expect.objectContaining({ message: 'HTTP error! status: 500' })
+      )
+    )
+  })
+
+  it('logs console.error when genres fetch returns a non-OK HTTP status', async () => {
+    global.fetch = vi.fn().mockImplementation((url: string) => {
+      if (url.includes('/meta/genres')) {
+        return Promise.resolve({ ok: false, status: 404 })
+      }
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(mockMovies) })
+    })
+
+    renderHome()
+    await waitFor(() =>
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        'Failed to fetch genres:',
+        expect.objectContaining({ message: 'HTTP error! status: 404' })
+      )
+    )
+  })
 })

packages/web/src/pages/Home.tsx

@@ -20,23 +20,38 @@ function Home() {
   const [genres, setGenres] = useState<string[]>([]);
 
   useEffect(() => {
-    fetch('/api/movies')
-      .then(res => res.json())
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetch('/api/movies', { signal })
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+        return res.json();
+      })
       .then((data: Movie[]) => {
         setMovies(data);
         setLoading(false);
       })
       .catch((err: unknown) => {
+        if (err instanceof Error && err.name === 'AbortError') return;
         console.error('Failed to fetch movies:', err);
         setLoading(false);
       });
 
-    fetch('/api/movies/meta/genres')
-      .then(res => res.json())
+    fetch('/api/movies/meta/genres', { signal })
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+        return res.json();
+      })
       .then((data: string[]) => setGenres(data))
       .catch((err: unknown) => {
+        if (err instanceof Error && err.name === 'AbortError') return;
         console.error('Failed to fetch genres:', err);
       });
+
+    return () => {
+      controller.abort();
+    };
   }, []);
 
   const filteredMovies = useMemo(() => {