fix: silently reload on ChunkLoadError after deployments

Stale chunk errors occur when a user has an old version of the app cached
after a redeployment. Detect ChunkLoadError before logging so the page
reloads automatically without showing a toast or sending noise to the API.

api/src/app/app.ts

@@ -22,8 +22,8 @@ export async function app(fastify: FastifyInstance, opts: AppOptions) {
       });
     }
 
-    // Log unauthorized access attempts
-    if (error.statusCode === 401 || error.statusCode === 403) {
+    // Log unauthorized access attempts (exclude /api/auth/me as 401s there are expected during token refresh)
+    if ((error.statusCode === 401 || error.statusCode === 403) && request.url !== '/api/auth/me') {
       await AuditService.log({
         action: AuditAction.unauthorizedAccess,
         category: AuditCategory.security,

api/src/app/services/book.service.ts

@@ -36,10 +36,6 @@ export class BookService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -47,7 +43,11 @@ export class BookService {
 
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/manga.service.ts

@@ -33,10 +33,6 @@ export class MangaService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -45,7 +41,11 @@ export class MangaService {
     // Validate cover image URL
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/music.service.ts

@@ -33,10 +33,6 @@ export class MusicService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverArt, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover art URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (data.rating !== undefined && !validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -45,7 +41,11 @@ export class MusicService {
     // Validate cover art URL
     if (data.coverArt) {
       if (data.coverArt.startsWith("data:")) {
-        const sizeInBytes = data.coverArt.length * 0.75;
+        const base64Data = data.coverArt.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

api/src/app/services/show.service.ts

@@ -30,10 +30,6 @@ export class ShowService {
     if (!validateStringLength(data.notes, MAX_LENGTHS.NOTES)) {
       throw new Error(`Notes must be ${MAX_LENGTHS.NOTES} characters or less.`);
     }
-    if (!validateStringLength(data.coverImage, MAX_LENGTHS.URL)) {
-      throw new Error(`Cover image URL must be ${MAX_LENGTHS.URL} characters or less.`);
-    }
-
     // Validate rating
     if (!validateRating(data.rating)) {
       throw new Error("Rating must be an integer between 0 and 10.");
@@ -42,7 +38,11 @@ export class ShowService {
     // Validate cover image URL
     if (data.coverImage) {
       if (data.coverImage.startsWith("data:")) {
-        const sizeInBytes = data.coverImage.length * 0.75;
+        const base64Data = data.coverImage.split(",")[1];
+        if (!base64Data) {
+          throw new Error("Invalid image data URL format.");
+        }
+        const sizeInBytes = base64Data.length * 0.75;
         if (sizeInBytes > MAX_LENGTHS.DATA_URL) {
           throw new Error("Cover image must be under 5MB.");
         }

apps/frontend/src/app/components/art/art-gallery.component.ts

@@ -23,6 +23,10 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
   imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/art-avatar.jpg" alt="Art avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>Art Gallery</h2>
         <p class="subtitle">Artwork of Naomi</p>
@@ -458,6 +462,26 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #fdcb6e;
+      box-shadow: 0 4px 12px rgba(253, 203, 110, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(253, 203, 110, 0.5);
+    }
+
     .header-section {
       display: flex;
       flex-direction: column;

apps/frontend/src/app/components/books/books-list.component.ts

@@ -23,6 +23,10 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/books-avatar.jpg" alt="Books avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Book Collection</h2>
         @if (authService.isAdmin()) {
@@ -701,6 +705,26 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #8b6f47;
+      box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(139, 111, 71, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/games/games-list.component.ts

@@ -23,6 +23,10 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
   imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/games-avatar.jpg" alt="Gaming avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Game Collection</h2>
         @if (authService.isAdmin()) {
@@ -684,6 +688,26 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #ff6b6b;
+      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(255, 107, 107, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/header/header.component.ts

@@ -18,7 +18,7 @@ import { ApiService } from '../../services/api.service';
     <header class="header">
       <nav class="navbar" aria-label="Main navigation">
         <div class="nav-brand">
-          <img src="/assets/icons/icon-72x72.png" alt="" class="brand-icon" role="presentation" />
+          <img src="/assets/nav-icon.jpg" alt="" class="brand-icon" role="presentation" />
           <h1><a routerLink="/">Naomi's Library</a></h1>
           @if (version()) {
             <span class="version" aria-label="Version {{ version() }}">v{{ version() }}</span>

apps/frontend/src/app/components/home/home.component.ts

@@ -23,6 +23,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
     <div class="container">
       <div class="hero">
         <h1>Welcome to Naomi's Library</h1>
+        <img src="/assets/nav-icon.jpg" alt="Naomi's avatar" class="hero-avatar" />
         <p class="tagline">A personal collection of games, books, music, manga, shows, and art</p>
       </div>
 
@@ -190,10 +191,28 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
 
     .hero h1 {
       font-size: 2.5rem;
-      margin-bottom: 0.5rem;
+      margin-bottom: 1rem;
       color: var(--witch-purple);
     }
 
+    .hero-avatar {
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 4px solid var(--witch-lavender);
+      box-shadow: 0 4px 12px var(--witch-shadow);
+      margin: 1rem auto;
+      display: block;
+      transition: all 0.3s;
+    }
+
+    .hero-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(157, 78, 221, 0.5);
+      border-color: var(--witch-rose);
+    }
+
     .tagline {
       font-size: 1.2rem;
       color: var(--witch-plum);

apps/frontend/src/app/components/manga/manga-list.component.ts

@@ -23,6 +23,10 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/manga-avatar.jpg" alt="Manga avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Manga Collection</h2>
         @if (authService.isAdmin()) {
@@ -619,6 +623,26 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #00b894;
+      box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(0, 184, 148, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/music/music-list.component.ts

@@ -23,6 +23,10 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
   imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/music-avatar.jpg" alt="Music avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Music Collection</h2>
         @if (authService.isAdmin()) {
@@ -689,6 +693,26 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #74b9ff;
+      box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(116, 185, 255, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/components/shows/shows-list.component.ts

@@ -23,6 +23,10 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
   imports: [CommonModule, RouterLink, FormsModule, PaginationComponent, LikeButtonComponent],
   template: `
     <div class="container">
+      <div class="page-hero">
+        <img src="/assets/avatars/shows-avatar.jpg" alt="Shows avatar" class="page-avatar" />
+      </div>
+
       <div class="header-section">
         <h2>My Shows &amp; Films</h2>
         @if (authService.isAdmin()) {
@@ -615,6 +619,26 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
       padding: 2rem;
     }
 
+    .page-hero {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+
+    .page-avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #e84393;
+      box-shadow: 0 4px 12px rgba(232, 67, 147, 0.3);
+      transition: all 0.3s;
+    }
+
+    .page-avatar:hover {
+      transform: scale(1.05);
+      box-shadow: 0 8px 16px rgba(232, 67, 147, 0.5);
+    }
+
     .header-section {
       display: flex;
       justify-content: space-between;

apps/frontend/src/app/services/global-error-handler.service.ts

@@ -12,6 +12,11 @@ export class GlobalErrorHandler implements ErrorHandler {
   private toast = inject(ToastService);
 
   handleError(error: Error): void {
+    if (error.name === 'ChunkLoadError' || error.message.includes('Loading chunk')) {
+      window.location.reload();
+      return;
+    }
+
     console.error('Global error caught:', error);
 
     // Show user-friendly error message