‏کلاینت Svelte برای Flare منتشر شد

تیم Flare بستهٔ @flareapp/svelte رو منتشر کرده، یه یکپارچه‌سازی برای Svelte 5 که خطاها رو هرجای درخت کامپوننت می‌گیره، یه UI جایگزین (fallback) رندر می‌کنه و گزارشی می‌فرسته که شامل نام کامپوننت، زنجیرهٔ والدهاش و این که خطا کجای چرخهٔ حیات (رندر، event handler یا داخل $effect) رخ داده می‌شه.

به گفتهٔ نویسنده، قبل از این می‌شد @flareapp/js رو دستی سیم‌کشی کرد و به لیسنر سراسری window.onerror تکیه کرد. اون هنوز هم کار می‌کنه و خطا رو می‌گیره، ولی چیزی از Svelte نمی‌دونه: نمی‌دونه کدوم کامپوننت شکسته یا خطا موقع رندر بوده یا تو یه event handler. کلاینت جدید Svelte دقیقاً همین شکاف رو پر می‌کنه.

هستهٔ بسته کامپوننت FlareErrorBoundary ئه. کل اپ یا یه بخش کوچیک رو باهاش می‌پیچی، یه snippet به‌اسم failed بهش می‌دی، و هر خطایی که داخلش پرتاب بشه به‌جای پایین آوردن کل صفحه، fallback رو رندر می‌کنه:

<FlareErrorBoundary>
    <Root />

    {#snippet failed(error, reset)}
        <p>{error.message}</p>
        <button onclick={reset}>Try again</button>
    {/snippet}
</FlareErrorBoundary>

snippet به‌اسم failed هم خود error رو می‌گیره و هم یه تابع reset. با صدا زدن reset، بوندری بچه‌هاش رو دوباره رندر می‌کنه تا کاربر بدون reload کامل صفحه دوباره امتحان کنه. به گفتهٔ نویسنده، اگه بخوای بوندری موقع تغییر state خودشو پاک کنه، prop به‌اسم resetKeys رو بهش می‌دی؛ هر وقت یکی از مقدارهای اون آرایه عوض بشه، بوندری خودبه‌خود ریست می‌شه. این موقع جابه‌جایی بین routeها یا عوض کردن رکورد فعال کاربردیه تا یه خطای کهنه رو صفحه نمونه.

نکات کلیدی:

• بستهٔ @flareapp/svelte یه یکپارچه‌سازی رسمی برای Svelte 5 ئه
• گزارش خطا شامل نام کامپوننت، زنجیرهٔ والدها و محل خطا تو چرخهٔ حیاته
• FlareErrorBoundary با snippet مخصوص failed جای صفحه، fallback رندر می‌کنه
• تابع reset و prop به‌اسم resetKeys بازیابی و ریست خودکار رو ممکن می‌کنن