Prevent the Bug: ubah string ke lowercase saat compare

Halo, saya akan memulai salah satu serial artikel yaitu tentang prevent the bug.

seri artikel ini adalah seri artikel dimana saya akan menuliskan tentang pengalaman saya saat menemukan bug dan insight yang saya dapat.

Nah kali ini saya menemukan bug yang cukup tricky. bug nya cuma ada di satu line dalam code, tapi itu berimbas ke membuat broken salah satu fitur dalam aplikasi

Jadi ceritanya, ada sebuah fitur yang broken di frontend side sebuah aplikasi setelah muter-muter memikirkan apa yang salah... ternyata problemnya adalah ada data yang berubah dibackend.

Perubahanya mungkin cukup simple, perubahanya hanya case pada string. jadi misal yang awalnya field type itu isinya kidshirt terus sekarang berubah jadi KidShirt simple kan ? cuma  berubah case nya aja dari PascalCase ke lowercase. what could go wrong ?

ternyata eh ternyata yang bikin broken adalah ada komparasi antar string, line code yang kira kira seperti berikut

if (order.type === 'kidshirt') {
  // do stuff
} else if (order.type === 'othershirt') {
  // do stuff
}

daaan karena ada perubahan case dari data maka tentu saja fitur tersebut menjadi broken.

Tidak selamanya kita mempunyai kontrol terhadap backend. terkadang kita menggunakan 3rd party service, dan terkadang ada pula yang melakukan perubahan minor atau bahkan major tanpa notice.

maka saya rasa, untuk memfix tidak hanya kali ini tapi jika ada perubahan sejenis kedepanya, kita dapat mengoconvert string yang akan dicompare ke lowercase terlebih dahulu.

dengan demikian, mau sumber datanya pake, PascalCase, atau camelCase atau lowercase. tidak akan ada problem.

if (order.type.toLowerCase() === 'kidshirt') {
  // do stuff
} else if (order.type.toLowerCase() === 'othershirt') {
  // do stuff
}

jadi selain memfix perubahan tersebut saya juga menambahkan prevention untuk kedepanya.

bug ini terkesan simple, tapi sebenernya saya rasa bug ini bahkan tidak dapat ditangkap oleh TypeScript sekalipun, karena yang berubah adalah data dari backend. yang ada mungkin kita cukup pede type kita sudah bener dan enggak akan kepikiran bisa error karena hal tersebut.

Bonus

Ingin membuat kodingan diatas lebih tahan perubahan lagi ? tentu saja bisa. misal kita pikirkan, bagimana kalau ternyata nanti mereka menggantinya menjadi snake_case ? selain merubah jadi lowercase, kita bisa menstrip text nya dari special character semacam (./_,)

const regex = /[^0-9a-zA-Z]+/g
if (order.type.toLowerCase().replace(regex, '') === 'kidshirt') {
  // do stuff
} else if (order.type.toLowerCase().replace(regex, '') === 'othershirt') {
  // do stuff
}

Sampai jumpa di artikel Prevent Bug lainya, kalau saya ketemu bug yang memberikan insight lagi ~ ~