فراند: مدیریت گراف‌محورِ منابع برای حذف نشت حافظه در ری‌اکت

اگر یک برنامه پیچیده با ری‌اکت توسعه می‌دهید، احتمالاً می‌دانید که مدیریت «خروج از سیستم» (Sign-out) کابوسی از پاک‌سازی دستی است. تصور کنید هر بار کاربر خارج می‌شود، باید تک‌تک سوکت‌ها، توکن‌ها و حافظه‌های موقت را به‌صورت دستی ببندید تا اطلاعات کاربر قبلی در نشست کاربر جدید نشت نکند. عبارت «ری‌اکت یک رندرکننده است، نه یک محیط زمان اجرا (Runtime)» یک تمایز بنیادی است. به همین دلیل است که مدیریت چرخه حیات سرویس‌هایی مانند سوکت‌ها، ابزارهای تحلیل (analytics) و توکن‌های احراز هویت، اغلب به یک چک‌لیست دستی تبدیل می‌شود که با رشد اپلیکیشن، مستعد خطاهای انسانی است.

طبق اعلام تیم توسعه‌دهنده، فراند (Frond) در ۱ جولای ۲۰۲۶ عرضه شد تا این مسئولیت را از دوش برنامه‌نویس بگیرد و به یک گراف runtime اختصاصی منتقل کند. در اکثر اپلیکیشن‌های فرانت‌اند، شما در نهایت با یک «دیوار پیچیدگی» مواجه می‌شوید. احتمالاً در حال حاضر خروج از حساب کاربر را با پاک کردن دستی localStorage، ریست کردن استورها و قطع اتصال سوکت‌ها مدیریت می‌کنید. یک تابع signOut() معمولی به توالی خاصی از awaitها و فراخوان‌ها نیاز دارد:

async function signOut() {
  await session.end();
  localStorage.removeItem("token");
  queryClient.clear();
  abortInFlightRequests();
  presenceChannel.leave();
  socket.disconnect();
  billingStore.reset();
  navigate("/login");
}

اگر یک سرویس جدید وابسته به کاربر اضافه کنید و فراموش کنید منطق پاک‌سازی آن را به این تابع اضافه کنید، آن سرویس به نشست کاربر بعدی نشت می‌کند. این بدهی فنی، سیستمی شکننده ایجاد می‌کند که در آن وضعیت (state) نه به رابط کاربری تعلق دارد و نه به یک مالک مشخص. مدیریت دستی حافظه به این معناست که هر سرویس جدید، خط دیگری است که باید به خاطر بسپارید؛ فراموش کردن تنها یک مورد باعث می‌شود کاربران قدیمی از طریق استورها، سوکت‌ها، شناسه‌های تحلیل، به‌روزرسانی‌های منقضی شده یا درخواست‌های در حال اجرا، در سیستم باقی بمانند.

فراند این سرویس‌ها را به‌عنوان گره‌های یک گراف می‌بیند. به‌جای استفاده از فراخوان‌های پراکنده useEffect — که شبیه به یادداشت‌های پراکنده روی کاغذ است و زود گم می‌شود — منابع به‌عنوان گره‌هایی با وابستگی‌های صریح تعریف می‌شوند. وقتی یک گره ریشه (مانند session) حذف می‌شود، فراند به‌طور خودکار آزادسازی تمام گره‌های وابسته در گراف را فعال می‌کند. برای مثال، با اجرای دستور controls.evict("selfAndDependents", "sign-out") روی یک SessionNode ،تمام منابع وابسته در یک حرکت حذف، متوقف و آزاد می‌شوند. این تضمین می‌کند که هیچ سوکتی باز نماند و هیچ کش منقضی‌شده‌ای پس از خروج کاربر باقی نماند.

معماری گره‌ها

فراند فرانت‌اند را به انواع خاصی از گره‌ها سازماندهی می‌کند تا نیازهای مختلف چرخه حیات را مدیریت کند:

• گره‌های سرویس (Service Nodes): منطق اصلی مانند مدیریت نشست را با استفاده از Frond.serviceSpec مدیریت می‌کنند. این گره‌ها از Frond.Driver.Async برای مدیریت اکتساب غیرهمزمان از طریق توابعی مانند restoreSession(signal) بهره می‌برند. در واقع یک SessionNode به لنگر (anchor) اصلی برای نشست کاربر تبدیل می‌شود.
• گره‌های منبع (Resource Nodes): اتصالات خارجی را از طریق Frond.resourceSpec مدیریت می‌کنند. برای نمونه، یک PresenceNode می‌تواند هم به یک SocketNode و هم به یک SessionNode وابسته باشد و با استفاده از userId نشست و یک ضربان قلب مشخص (مثلاً ۵,۰۰۰ میلی‌ثانیه)، به یک کانال متصل شود.
• گره‌های نما (Facade Nodes): چندین منبع را در یک نمای واحد تجمیع می‌کنند؛ مانند یک داشبورد که نتایج پراکنده API را در یک وضعیت یکپارچه ترکیب می‌کند.

مرز زمان اجرا و پاک‌سازی

در این معماری، پاک‌سازی دقیقاً و منحصراً بر عهده گرهی است که منبع را ایجاد کرده است. عملیات حذف (Eviction) چندین اقدام حیاتی را انجام می‌دهد: منطق release را اجرا می‌کند، تمام کارهای در جریان (in-flight) را لغو می‌کند، وضعیت‌های readiness را پاک می‌کند و کامیت‌های منقضی‌شده برای رکورد گراف حذف‌شده را رد می‌کند.

در یک PresenceNode ،متد release برای تضمین تقارن، با متد acquire جفت می‌شود. متد release به منبع دستور می‌دهد که دستور leave({ reason: "sign-out" }) را اجرا کند. به دلیل این ساختار، یک فراخوان signOut() هرگز نیاز ندارد بداند که اصلاً کانال حضور (presence channel) وجود دارد یا خیر. بر اساس مستندات frondruntime.dev، محیط زمان اجرای فراند این آزادسازی‌ها را با ترتیب معکوس زمان اکتساب (acquisition) انجام می‌دهد؛ این دقیقاً همان روشی است که سیستم‌های بک‌اند حرفه‌ای برای تخریب منابع به‌کار می‌برند.

تایپ‌استیت و تزریق وابستگی

یکی از تغییرات بنیادین در فراند، نحوه برخورد با تایپ‌اسکریپت است. در حالت سنتی، برنامه‌نویس باید وابستگی‌ها را دستی متصل کند یا از casting استفاده کند. اما در فراند، خودِ گراف همان سیستم تایپ است.

یک ProfileNode را در نظر بگیرید که با ProfileSpec تعریف شده و به AuthNode و ApiNode وابسته است. درایور آن، پروفایل را با فراخوانی ctx.deps.api.result.user.profile.query و با استفاده از userId گرفته شده از ctx.deps.auth.result اکتساب می‌کند. نوع نتیجه (result type) مستقیماً از خروجی درایور استنباط می‌شود و نیازی به حاشیه‌نویسی دستی نیست.

اگر یک BillingNode از طریق Frond.dep(ProfileNode) به این پروفایل وابسته باشد، نوع نتیجه پروفایل به‌طور خودکار منتقل می‌شود. یک getter در BillingNode می‌تواند با امنیت تایپی کامل به this.deps.profile.result.plan دسترسی داشته باشد. اگر شکل درایور تغییر کند، کامپایلر بلافاصله هر مصرف‌کننده را شناسایی کرده و خطا می‌گیرد.

این بدان معناست که کامپوننتی که از FrondReact.useNode(BillingNode) استفاده می‌کند، شیئی آماده به کار دریافت می‌کند. هیچ گارد isLoading یا fallback دستی وجود ندارد و نیازی به سیم‌کشی دستی وابستگی‌ها در سطح کامپوننت نیست، زیرا runtime تضمین می‌کند که گره قبل از خوانده شدن توسط کامپوننت آماده باشد. وضعیت قابل مشاهده — شامل نتیجه کش، فیلدهای observable و getterهای محاسبه‌شده — همچنان ارگونومیک باقی می‌ماند، اما اکنون به هویت گراف، وضعیت readiness و قابلیت لغو متصل است.

مدیریت ساختاریافته خطاها

مدیریت خطا در اپلیکیشن‌های معمولی ری‌اکت معمولاً در ده‌ها بلوک try-catch پراکنده است. یک رویکرد دستی رایج مستلزم آن است که هر fetch به‌طور دستی بافت (context) مربوط به Sentry را بسازد. این منجر به مشکلاتی می‌شود که در آن زنجیره علت (cause chain) در چندین مرز try/catch گم می‌شود و برنامه‌نویس با یک خطای مبهم e: unknown مواجه می‌شود بدون اینکه اثرانگشت یکسانی برای گروه‌بندی خطاهای مشابه داشته باشد.

فراند این مدل را با یک «چاهک» (Sink) مرکزی جایگزین می‌کند. به‌جای نوشتن try/catch در فایل‌های billing.ts یا dashboard.ts ،شما تنها یک sink را در runtime قرار می‌دهید. هر شکست در گراف، طبقه‌بندی شده و به یک گزارش قابل سریال‌سازی تبدیل می‌شود که شامل موارد زیر است:

• اثرانگشت‌ها (Fingerprints): گروه‌بندی شده بر اساس توپولوژی گراف (مثلاً ["frond", kind, rootTag, nodeTag]).
• برچسب‌ها (Tags): متاداده‌هایی مانند frond.kind ،frond.retryable ،frond.root_tag و frond.node_tag.
• بسترهای (Contexts): زنجیره کامل علت خطا، شکست‌های وابستگی و متاداده‌های رویداد runtime.

برنامه‌نویسان می‌توانند با استفاده از Frond.Diagnostics.createRuntimeReportSink یک sink واحد را به ردیابی مانند Sentry متصل کنند. تابع handleReport گزارش runtime را مستقیماً به captureException در Sentry منتقل می‌کند و اثرانگشت، برچسب‌ها و بسترهای اضافی را ارسال می‌نماید. این کار یک شکست مبهم را به یک ابزار تشخیصی ساختاریافته تبدیل می‌کند که در آن runtime خطا را طبقه‌بندی کرده و گزارشی را دقیقاً برای ردیاب‌ها می‌سازد.

ارکستراسیون پیشرفته با Effect

برای برنامه‌های با پیچیدگی بالا، فراند با اکوسیستم Effect ادغام می‌شود. با جایگزینی یک درایور async استاندارد با درایور Frond.Driver.Effect ،برنامه‌نویسان به الگوهای ارکستراسیون پیشرفته دسترسی پیدا می‌کنند. موتور Effect کارهای سخت را انجام می‌دهد، به این معنی که شما لغو (cancellation) و دامنه (scopes) را دریافت می‌کنید بدون اینکه لزوماً نیاز باشد Effect.gen بنویسید، مگر اینکه به آن نیاز مبرم داشته باشید.

برای مثال، یک DashboardNode که از Frond.Driver.Effect استفاده می‌کند، می‌تواند منطق بارگذاری پیچیده‌ای را پیاده کند:

• عقب‌نشینی نمایی (Exponential Backoff): استفاده از Schedule.exponential("100 millis") و Effect.retry برای تلاش مجدد ۳ باره در دریافت داده، به شرطی که برچسب خطا AuthError نباشد (که باید سریعاً شکست بخورد).
• هم‌روندی محدود (Bounded Concurrency): استفاده از Effect.all برای دریافت سه پنل (Activity, Billing, Feed) به‌طور موازی، اما محدود کردن آن به ۲ درخواست در جریان در هر لحظه برای جلوگیری از اشباع سرور.
• زمان‌بندی (Timeouts): بسته‌بندی درخواست‌ها در Effect.timeout("5 seconds") برای تضمین پاسخ‌دهی رابط کاربری.
• سیگنال‌های لغو: هر acquire و refresh یک سیگنال دریافت می‌کند. وقتی یک گره حذف می‌شود، fetchها متوقف شده، تایمرها پاک شده و استریم‌ها به‌طور خودکار بسته می‌شوند.

زمان پذیرش: چه زمانی فراند را انتخاب کنیم؟

همه اپلیکیشن‌ها به یک گراف زمان اجرا نیاز ندارند. ابزارهای وضعیت موجود به سؤالات متفاوتی پاسخ می‌دهند:

• Redux / Zustand: مقدار داده کجا ذخیره شود؟
• React Query: مدیریت کش سرور، ابطال (invalidation) و تلاش مجدد.
• MobX: وضعیت دامنه مشاهده‌پذیر (Observable domain state).
• Context: سیم‌کشی مقادیر در درخت ری‌اکت.

هیچ‌کدام از این‌ها به این سؤالات پاسخ نمی‌دهند: «مالک چرخه حیات کیست؟»، «چه چیزی باید قبل از بارگذاری این مقدار آماده شود؟»، «این وضعیت به کدام هویت کلیددار متصل است؟» یا «چه کسی کامیت‌های منقضی شده را پس از حذف رد می‌کند؟»

احتمالاً برای شما مناسب نیست اگر: اپلیکیشن شما عمدتاً صفحات مستقلی را رندر می‌کند، بارگذاری داده‌ها محلی (local) برای هر صفحه است، خروج از حساب تنها یک توکن و یک کش را پاک می‌کند و هیچ سرویس فرانت‌اند طولانی‌مدتی ندارید.

احتمالاً برای شما مناسب است اگر: استارتاپ شما گیت‌های آمادگی (readiness gates) واقعی دارد، سرویس‌ها به سرویس‌های دیگر وابسته هستند، هویت کاربر باعث ابطال نیمی از برنامه می‌شود و شما سوکت‌ها، SDKها، ابزارهای تحلیل و ترنسپورت‌هایی دارید که نیاز به پاک‌سازی قطعی (deterministic cleanup) دارند. این تغییر معماری، فرانت‌اند شما را به رویکرد «میکرو-کرنل» نزدیک می‌کند؛ جایی که UI تنها لایه‌ای نازک برای نمایش یک ماشین وضعیت (State Machine) قدرتمند و مدیریت‌شده است.

گام بعدی شما

• بررسی مستندات frondruntime.dev برای درک نحوه تعریف serviceSpec.
• تحلیل وابستگی‌های فعلی اپلیکیشن خود برای شناسایی نقاط احتمالی نشت حافظه در هنگام Sign-out.
• تست ادغام Frond.Driver.Effect برای مدیریت درخواست‌های موازی در داشبوردهای پیچیده.

اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره تأثیر بهینه‌سازی‌های Runtime بر مصرف منابع در دستگاه‌های Edge مراجعه کنید.