BigInt Muhit Xatosi — Real Keys #2

Muammo

Nima sodir bo'ldi?

Developer web3 ilovasini production serverga chiqardi. Lokal kompyuterda hamma narsa mukammal ishlagan edi: tranzaksiyalar o'tdi, wallet ulandi, hisob-kitoblar to'g'ri chiqdi.

Lekin production'da ilova sahifa ochilishi bilanoq crash bo'ldi. Konsol bitta xato ko'rsatdi:

Uncaught TypeError: Cannot convert a BigInt value to a number
    at processTransaction (web3.min.js:1)
    at handleWalletConnect (app.js:48)

⚠️

Kod o'zgarmagan. Konfiguratsiya to'g'ri. Server ishlayapti. Lekin ilova ishlamayapti. Bu — muhit farqidan kelib chiqqan yashirin xato.

Sabab

Nima uchun bu sodir bo'ldi?

React ilovasi build qilinayotganda browserslist degan konfiguratsiya qaysi brauzerlarni qo'llab-quvvatlash kerakligini belgilaydi. Babel va boshqa toollar shu konfiguratsiyaga qarab kodni o'zgartirib beradi.

Muammo shundaki, development va production muhitlari uchun turli brauzerlar maqsad qilib olindi:

Development (lokal)

Faqat oxirgi Chrome/Firefox versiyasi. Bu brauzerlar BigInt'ni to'liq biladi — hech qanday o'zgartirish kerak emas.

Production (server)

Default konfiguratsiya — eski brauzerlar ham hisobga olingan. Ular BigInt'ni tushunmaydi, Babel esa uni o'zgartira olmaydi.

BigInt — JavaScript'ning yangi turi, u juda katta sonlar bilan ishlaydi (blockchain tranzaksiyalarida kerak)
Eski brauzerlar BigInt'ni bilmaydi va uni oddiy number'ga convert qila olmaydi
Babel BigInt'ni polyfill qila olmaydi — bu til darajasidagi o'zgarish
Natijada: lokal ishlaydi (yangi Chrome), production crash bo'ladi (eski brauzerni hisobga olgan build)

Xato xabari

Server nimani qaytardi?

Bu server xatosi emas — bu brauzer konsolida paydo bo'lgan JavaScript runtime xatosi:

Uncaught TypeError: Cannot convert a BigInt value to a number
    at processTransaction (web3.min.js:1)
    at handleWalletConnect (app.js:48)

// Sabab: production build eski brauzerlarni ham maqsad qilib oldi,
// lekin BigInt ular tomonidan qo'llab-quvvatlanmaydi

Tahlil

QA sifatida nimaga e'tibor berish kerak?

"Lokal ishlaydi" = "Production ishlaydi" emas — bu eng keng tarqalgan xato fikr
Muhit farqlarini har doim tekshirish kerak: brauzer versiyasi, OS, build konfiguratsiyasi
BigInt va boshqa yangi API'lar ishlatilgan joylarda brauzer mosligini alohida tekshirish lozim
Production build'ni lokal ham sinab ko'rish kerak — npm run build && serve
Turli brauzerlarda (ayniqsa eski versiyalarda) test o'tkazish muhim
Web3 / blockchain ilovalarda BigInt keng ishlatiladi — bu muhitlarda brauzer mosligi kritik

Yechim

Qanday tuzatildi?

package.json faylida browserslist yangilandi — production uchun BigInt'ni qo'llaydigan brauzerlar ko'rsatildi:

// package.json — oldin (muammoli konfiguratsiya)
"browserslist": "> 0.5%, last 2 versions, not dead"

// package.json — keyin (to'g'ri konfiguratsiya)
"browserslist": {
  "production": [
    "supports bigint",
    "not dead"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

Shundan so'ng production build ham to'g'ri ishladi. supports bigint filtri faqat BigInt'ni qo'llaydigan brauzerlarga mo'ljallangan build yaratadi.

QA uchun dars

Har doim ikkita narsani tekshiring: 1) Test qilgan muhitingiz production bilan bir xilmi? 2) Yangi texnologiya yoki tip ishlatilgan bo'lsa, brauzer mosligini tekshirdingmi? "Lokal ishlaydi" — bu hali tayyor degani emas. Production build'ni lokal sinab ko'rish — har bir release'dan oldin majburiy qadam.

BigInt Muhit Xatosi(Environment Mismatch Bug)