Error Logger & Viewer: A Tiny SPA for JS Errors

Error Logger & Viewer — tiny SPA for tracking JS errors TL;DR: Tiny SPA to capture and group browser JS errors — filters, charts, demo and server modes. Try the "Create test error" button on the demo: https://lnkd.in/gNGCFMj2 Why I built it What happens when a small idea turns into a few months of late‑night debugging? I wanted a lightweight tool that helps developers see runtime problems quickly, group similar errors, and track fix progress. The app runs in two modes: demo (localStorage) for quick tests and server (Node.js + Express + LowDB) for persistent storage. What it does Captures global JS errors (window.onerror, onunhandledrejection), resource load errors, and fetch failures. Groups and deduplicates errors by message/stack to reduce noise. Searchable, sortable error table with status tracking (new / in progress / fixed / ignored) and comments. Charts for error dynamics (day/week/month), visual filters and quick actions. Supports light/dark themes and i18n (EN/RU). Accessibility features: ARIA labels and keybo https://lnkd.in/gQhYFmgq

Hydration in Next.js — The Silent Trouble Maker 🤫 Ever got this error? “Hydration failed because the initial UI does not match what was rendered on the server.” ⚙️ What’s Hydration anyway? When your server sends pre-rendered HTML, React “hydrates” it — attaches logic & event handlers to make your app interactive. 🚨 When things go wrong… Hydration fails if your server HTML ≠ client HTML. React gets confused because they don’t match exactly. 💥 Common reasons for Hydration errors: 🕒 Using new Date() 🎲 Using Math.random() 🌐 Accessing window or localStorage during SSR 📊 Rendering dynamic data that changes after load 🧯 How to fix them: ✅ Use "use client" only where needed ✅ Delay rendering until mount (useEffect) ✅ Split server & client components ✅ Keep SSR output predictable

React Router 7 Framework Mode — A Crisp Beginner-Friendly Guide (2025 Edition) A continuation of my previous post: “React Router Data APIs — The Complete Beginner-Friendly Guide (2025 Edition)” React Router 7 brings Framework Mode, turning the router into a full SSR framework—simple, predictable, and perfect for app-style UIs. This guide is intentionally short, structured, and builds the mental model step-by-step. Framework Mode uses a Remix-style folder structure: app/ routes/ index.tsx dashboard.tsx dashboard.profile.tsx products.$id.tsx entry.client.tsx entry.server.tsx routes/* Contains route files → each file = one route. entry.client.tsx Hydration + SPA navigation. entry.server.tsx SSR rendering, loader execution, streaming. This structure builds the mental model that: UI lives in route files Loaders/actions run in server bundle Hydration & navigation handled by client entry This is RR7’s foundation. Each route file can export three things: default React component (client-side UI) ✔ 2. A loader (server-side GET logic) https://lnkd.in/gqQhTZBk

Code less. Ship faster. React 19 handles the rest. 🚀 🧠 React 19 introduces the new use() hook — fewer lines, smarter code. ❌ Before React 19, handling async data inside components meant: useEffect with dependency arrays useState for loading/error states Manual error boundaries Callback chain hell ✅ Now with use(), you can directly await a promise inside your component and render the result — minimal boilerplate, maximum clarity. ✨ Key features: ✅ Directly await promises in components using use() ⚡ 🚫 No more separate loading-state flags or callback chains ⛓️ 🧹 Cleaner components with leaner logic and fewer moving parts 🧩 🎯 Works seamlessly with Suspense and Error Boundaries 💡 Integrates with Server Components for powerful data patterns

Before you add another state in React, ask yourself: “Can this be derived instead?” Half the bugs in frontend code come from storing data you could’ve just calculated.

Have you ever wondered how websites pull live data from other sources -- like weather updates, news feeds, or recipes -- and display it instantly on their page? That magic happens because of the Fetch API! Today, I revised the Fetch API and here's what I learned. 1. The Fetch API allows us to request data from another website or server and use it inside our own project. 2. The data we fetch is usually stored as an object on the other website. 3. To make it usable in JavaScript, we use the .json() method -- it returns another Promise, converting JSON data into a JavaScript object. Input -- JSON Output -- JavaScript Object This simple concept is super powerful -- it's how most real-world web apps communicate with APIs today.

Props vs State — The Core of Every React Component React components live and breathe through data — passed either as props or managed internally as state. Props → Think of them as inputs from a parent component. They’re read-only. State → Internal data that changes over time (like form inputs or toggles). When state changes, React re-renders — that’s what makes components dynamic.

🚀 Node.js 22+ quietly removed two common dependencies For a long time, almost every Node.js app started with: dotenv → load .env files nodemon → auto-reload on file changes With Node.js 22+, both of these are now built-in natively. No extra installs. No config. Cleaner projects. package.json "scripts": {  "dev": "node --env-file=.env --watch server.js",  "start": "node --env-file=.env server.js" } What this means: I) .env variables load automatically (no dotenv) II) Server restarts on file changes (no nodemon) III) Fewer dependencies and simpler setup This is a small change, but it meaningfully reduces boilerplate and makes Node.js development feel more streamlined. Pure native Node. Clean and minimal. ✨

I came across a new challenge in my code today, and I decided to share the solution here to help others who might face the same situation. Interestingly, this error didn’t occur while I was working locally — it only appeared after releasing the app to production. Common React Mistake: Conditional Hooks Error I just debugged a tricky React bug that many developers encounter. Let me share what I learned! here is the problem constUserProfile=({ userId })=>{ const { t } =useTranslation(); if(!userId){return<div>Please log in</div>;} // This hook is called CONDITIONALLY! const{data,loading}=useFetch(`/api/users/${userId}`); if(loading) return<div>Loading...</div>; return<div>{data.name}</div>; }; What's wrong? - When userId exists: Both useTranslation AND useFetch are called - When userId is null: Only useTranslation is called, then early return - React expects hooks to be called in the SAME ORDER every render! const UserProfile = ({ userId }) => {   const { t } = useTranslation();   const { data, loading } = useFetch(userId ? `/api/users/${userId}` : null);   // All hooks called first, THEN conditional logic   if (!userId) {     return <div>Please log in</div>;   }   if (loading) return <div>Loading...</div>;   return <div>{data.name}</div>; }; thanks Nader Mahfouz for this tip

I worked on a React Hook that automatically manages the lifecycle of File/Blob URLs. Useful for creating things like profile picture upload preview and the likes. Code: https://lnkd.in/dNw3GwNj