خطاهای ناخوانا و ناخواسته JS و ردیابی آن ها

اتوماسیون پیوند منبع-نقشه جاوا اسکریپت: نظارت بر مرورگر NewRelic

در حالی که همه ما در تلاش برای ارائه واضح ترین تجربه کاربری هستیم، پیگیری ناهنجاری های سیستم به همان اندازه مهم است. و وقتی در مورد رفتار غیرعادی یک وب سایت صحبت می کنیم، درک کاربران و مسائلی که ممکن است با آن ها مواجه شوند بسیار مهم است.

پروژه انجام پروژه در فریلنس پروژه

در محیط تولید اکوسیستم وب، دارایی ها برای ایجاد بسته های JS ترکیب، مبهم و کوچک می شوند. این منجر به خطاهای ناخوانا و ناخواسته JS بدون ردیابی پشته می شود، و رسیدن به علت اصلی مشکل را برای کسی غیرممکن می کند.

چگونه خطاها را ردیابی می کنیم؟

تیم "Creditas" از New Relic برای نظارت بر عملکرد و ردیابی خطا استفاده می کند. New Relic یکی از بهترین برنامه ها در این فضا است، تعداد کمی از برنامه های محبوب دیگر مانند نگهبان، اشکالات و غیره هستند. اطلاعات بیشتر در مورد نظارت بر مرورگر با استفاده از New Relic

از آنجایی که کد کوچک شده است، در زیر یک اسکرین شات از نحوه نشان دادن خطای جدید به طور پیش فرض نشان داده شده است:

این ابزارها به طور پیش‌فرض کد شما را حذف نمی‌کنند و خطای بالا را نشان نمی‌دهند که کاملاً غیرقابل خواندن است

سفارش ساخت سایت در فریلنس پروژه

سپس {“Jadoo” : “Sourcemap” } به فرار می آید.

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

اطلاعات بیشتر در مورد نقشه های منبع

پیوند خودکار نقشه منبع با New Relic

New Relic و سایر ابزارهای اصلی، API ها / اسکریپت ها / بسته های باقی مانده را برای آپلود نقشه های منبع با فایل های JS فراهم می کنند.

ما از بسته @newrelic/publish-sourcemap برای انتشار نقشه منبع در New Relic استفاده کرده ایم.

طراحی لوگو با بهترین طراحان لوگو

//sample snippet to push a source map file corresponding to a javascript linkconst publishSourcemap = require(‘@newrelic/publish-sourcemap’).publishSourcemap;publishSourcemap({    sourcemapPath : jsMapFileAbsolutePath, // js map path on machine
    javascriptUrl : jsUrl, // js url reachable by new relic
    applicationId: APP_ID, // new relic app id
    apiKey: NEW_RELIC_USER_API_KEY, // new relic user key},(err)=>{console.log('error in pushing::',err)});

آیا می توانید آن را از localhost و تست انجام دهید؟

به طور کلی پاسخ منفی است. لوکال هاست شما از NewRelic قابل دسترسی نخواهد بود و از این رو نمی تواند JS را که نقشه منبع را برای آن آپلود می کنید پیدا کند. اگر فقط می‌خواهید کد را آزمایش کنید، می‌توانید از چند لینک prod/uat برنامه خود در قطعه بالا و تست استفاده کنید.

در چه مرحله ای از استقرار این کار را آغاز می کنید؟

تنها گزینه ای که در اینجا داریم این است که این مرحله استقرار پست را انجام دهیم تا JS توسط سرورهای New Relic قابل دسترسی باشد. ما یک Node API نوشته‌ایم که استقرار پست را به‌عنوان مرحله بعدی برای مرحله ساخت اجرا می‌کند. این API به صورت بازگشتی بر روی بیلد تکرار می شود، همه نقشه های منبع را پیدا کرده و آنها را به New Relic فشار می دهد.

انجام پروژه متلب با بهترین متخصصان

آیا واقعاً می خواهید نقشه منبع را در تولید فعال کنید؟

به طور کلی، شما نمی خواهید نقشه منبع را در تولید فعال کنید تا از افشای/در دسترس بودن JS در کنسول جلوگیری کنید.

نقشه‌های منبع به‌طور پیش‌فرض به موازات فایل‌های js. در همان سطح مسیر با پسوند .js.map تولید می‌شوند تا ابزارهای توسعه‌دهنده آن‌ها را به‌طور پیش‌فرض انتخاب کنند و کد را در کنسول در معرض دید همه قرار دهند.

راه حل: نقشه منبع در دسترس New Relic قرار گرفت و هنوز ناشناس است

در فرآیند ساخت، همه نقشه‌های منبع را از مکان پیش‌فرضشان به یک مکان ناشناس و قابل شناسایی با کد منتقل می‌کنیم. سپس توسط API مرحله post deployment برای خواندن js به jsmap و فشار دادن همان به New Relic استفاده می‌شود.

نتیجه: نمونه عکس فوری خطا در New Relic این فرآیند را ارسال کنید

و در نهایت :

معجزه است! معجزه است :-)

اگر این را مفید یافتید، پیام بذارید