feat: harden production readiness with error boundary, CI/CD, and parser cleanup

- Fix ThemeToggle React hooks warning with lazy initializer
- Remove parser code duplication via shared analyzeZip helper
- Add 500MB file size validation with i18n error messages
- Add Error Boundary component wrapping main content
- Add GitHub Actions CI/CD workflow

Co-Authored-By: heznpc <heznpc@gmail.com>

Author: heznpc

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Run tests
+        run: npm test

src/app/page.tsx

@@ -1,18 +1,19 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { I18nProvider, useI18n } from "@/lib/i18n";
 import type { FullData } from "@/lib/types";
 import Guide from "@/components/Guide";
 import FileUpload from "@/components/FileUpload";
 import Dashboard from "@/components/Dashboard";
+import ErrorBoundary from "@/components/ErrorBoundary";
 
 function ThemeToggle() {
-  const [theme, setTheme] = useState("dark");
-
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute("data-theme") || "dark");
-  }, []);
+  const [theme, setTheme] = useState(() =>
+    typeof document !== "undefined"
+      ? document.documentElement.getAttribute("data-theme") || "dark"
+      : "dark"
+  );
 
   const toggle = () => {
     const next = theme === "dark" ? "light" : "dark";
@@ -138,19 +139,21 @@ function AppContent() {
       <BackgroundOrbs />
       <Header />
       <main className="relative z-10 max-w-5xl mx-auto px-6 pb-12">
-        {!result ? (
-          <>
-            <Hero />
-            <Guide />
-            <FileUpload onResult={setResult} />
-          </>
-        ) : (
-          <Dashboard
-            data={result.analysis}
-            insights={result.insights}
-            onReset={() => setResult(null)}
-          />
-        )}
+        <ErrorBoundary>
+          {!result ? (
+            <>
+              <Hero />
+              <Guide />
+              <FileUpload onResult={setResult} />
+            </>
+          ) : (
+            <Dashboard
+              data={result.analysis}
+              insights={result.insights}
+              onReset={() => setResult(null)}
+            />
+          )}
+        </ErrorBoundary>
       </main>
       <Footer />
     </div>

src/components/ErrorBoundary.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React from "react";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export default class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("[ErrorBoundary]", error, errorInfo);
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center py-24 px-6 text-center">
+          <div className="glass rounded-3xl p-10 max-w-md w-full space-y-6">
+            <div className="w-16 h-16 mx-auto rounded-2xl bg-red-500/10 flex items-center justify-center">
+              <svg
+                className="w-8 h-8 text-red-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </div>
+            <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">
+              Something went wrong
+            </h2>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              An unexpected error occurred. Please try again.
+            </p>
+            {process.env.NODE_ENV === "development" && this.state.error && (
+              <pre className="text-left text-xs bg-zinc-100 dark:bg-zinc-800 rounded-xl p-4 overflow-auto max-h-40 text-red-600 dark:text-red-400">
+                {this.state.error.message}
+              </pre>
+            )}
+            <button
+              onClick={this.handleReset}
+              className="px-6 py-3 rounded-2xl bg-gradient-to-r from-violet-600 to-pink-500 text-white font-bold hover:scale-105 transition-transform"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/FileUpload.tsx

@@ -5,6 +5,8 @@ import { useI18n } from "@/lib/i18n";
 import { parseFileFull } from "@/lib/parser";
 import type { FullData } from "@/lib/types";
 
+const MAX_FILE_SIZE = 500 * 1024 * 1024; // 500 MB
+
 interface Props {
   onResult: (result: FullData) => void;
 }
@@ -19,6 +21,12 @@ export default function FileUpload({ onResult }: Props) {
   const handleFile = useCallback(
     async (file: File) => {
       setError(null);
+
+      if (file.size > MAX_FILE_SIZE) {
+        setError(t("upload.error.FILE_TOO_LARGE"));
+        return;
+      }
+
       setProcessing(true);
       try {
         const result = await parseFileFull(file);

src/components/StoryCard.tsx

@@ -202,7 +202,7 @@ export default function StoryCard({
     // Highlights
     if (result.highlights.length > 0) {
       const hlY = 1380;
-      let hlX = W / 2;
+      const hlX = W / 2;
       ctx.textAlign = "center";
       const tags = result.highlights.slice(0, 4).map((k) => t(k));
       ctx.fillStyle = "rgba(255,255,255,0.4)";

src/lib/parser.ts

@@ -103,19 +103,9 @@ async function findAccounts(
   return accounts;
 }
 
-// ── Main entry ──
-
-export async function parseInstagramZip(
-  file: File
-): Promise<AnalysisResult> {
-  const zip = await JSZip.loadAsync(file);
-
-  const paths = Object.keys(zip.files);
-  const isInstagram = paths.some(
-    (p) => p.includes("followers") || p.includes("following")
-  );
-  if (!isInstagram) throw new Error("INVALID_ZIP");
+// ── Shared analysis helper ──
 
+async function analyzeZip(zip: JSZip): Promise<AnalysisResult> {
   const [
     followers,
     following,
@@ -151,59 +141,36 @@ export async function parseInstagramZip(
   };
 }
 
-export async function parseFileFull(file: File): Promise<FullData> {
-  if (!file.name.endsWith(".zip")) throw new Error("UNSUPPORTED_FORMAT");
-
-  const zip = await JSZip.loadAsync(file);
+// ── Validate ZIP contains Instagram data ──
 
+function validateInstagramZip(zip: JSZip): void {
   const paths = Object.keys(zip.files);
   const isInstagram = paths.some(
     (p) => p.includes("followers") || p.includes("following")
   );
   if (!isInstagram) throw new Error("INVALID_ZIP");
+}
 
-  const [analysis, insights] = await Promise.all([
-    parseInstagramZipFromLoaded(zip),
-    parseInsights(zip),
-  ]);
+// ── Main entry ──
 
-  return { analysis, insights };
+export async function parseInstagramZip(
+  file: File
+): Promise<AnalysisResult> {
+  const zip = await JSZip.loadAsync(file);
+  validateInstagramZip(zip);
+  return analyzeZip(zip);
 }
 
-async function parseInstagramZipFromLoaded(
-  zip: JSZip
-): Promise<AnalysisResult> {
-  const [
-    followers,
-    following,
-    pending,
-    unfollowed,
-    closeFriends,
-    blocked,
-    restricted,
-  ] = await Promise.all([
-    findAccounts(zip, "followers"),
-    findAccounts(zip, "following"),
-    findAccounts(zip, "pending_follow"),
-    findAccounts(zip, "unfollowed"),
-    findAccounts(zip, "close_friends"),
-    findAccounts(zip, "blocked"),
-    findAccounts(zip, "restricted"),
-  ]);
+export async function parseFileFull(file: File): Promise<FullData> {
+  if (!file.name.endsWith(".zip")) throw new Error("UNSUPPORTED_FORMAT");
 
-  const followerSet = new Set(followers.map((a) => a.username));
-  const followingSet = new Set(following.map((a) => a.username));
+  const zip = await JSZip.loadAsync(file);
+  validateInstagramZip(zip);
 
-  return {
-    followers,
-    following,
-    pendingRequests: pending,
-    recentlyUnfollowed: unfollowed,
-    closeFriends,
-    blockedAccounts: blocked,
-    restrictedAccounts: restricted,
-    nonMutual: following.filter((a) => !followerSet.has(a.username)),
-    fansOnly: followers.filter((a) => !followingSet.has(a.username)),
-    mutual: following.filter((a) => followerSet.has(a.username)),
-  };
+  const [analysis, insights] = await Promise.all([
+    analyzeZip(zip),
+    parseInsights(zip),
+  ]);
+
+  return { analysis, insights };
 }

src/locales/en.json

@@ -47,6 +47,7 @@
     "error": {
       "INVALID_ZIP": "This doesn't look like an Instagram data export. Make sure you downloaded the ZIP from Instagram.",
       "UNSUPPORTED_FORMAT": "Please upload a .zip file from Instagram's data export.",
+      "FILE_TOO_LARGE": "File is too large. Maximum allowed size is 500 MB.",
       "default": "Something went wrong. Please try again with a valid Instagram data export."
     }
   },

src/locales/ko.json

@@ -47,6 +47,7 @@
     "error": {
       "INVALID_ZIP": "인스타그램 데이터 내보내기 파일이 아닌 것 같습니다. 인스타그램에서 다운로드한 ZIP 파일인지 확인해주세요.",
       "UNSUPPORTED_FORMAT": "인스타그램 데이터 내보내기에서 받은 .zip 파일을 올려주세요.",
+      "FILE_TOO_LARGE": "파일이 너무 큽니다. 최대 허용 크기는 500 MB입니다.",
       "default": "문제가 발생했습니다. 유효한 인스타그램 데이터 파일로 다시 시도해주세요."
     }
   },