Fix docs path "Invalid getServerSideProps Return Value"

Fix typo for rewrites/redirects to rewrite/redirect

docs: fix wrong #bun-create reference in readme

Fix button--outline hover color dark mode

www: fix footer github link to denoland repo (#219)

fix: missed the comma

feat: remove all links going to WBW WhatsApp Hotline

Fix few typos and grammar

Fix typo minor

fix: responsive social image on mobile device

feat: add jokes

Add .env.example

Upgrade Nextra 2

Added additional title attribute (#5)

fix: github link in navbar

feat: remove 21-5-2022

M. Zakiyuddin Munziri

Artikel ini sebelumnya telah dipublikasikan di Medium: 

Di Belakang Layar: Cerita Pull Request ke Project Meta dan Vercel

Sebuah prestasi, bagi anak kemarin sore dalam dunia pengembangan perangkat lunak.

Layaknya anak kecil yang baru bisa berjalan, meski nanti ketika sudah dewasa, ia tak lagi merasakan bahagianya ketika pertama kali bisa melangkah.

Jauh mundur ke belakang, setahun yang lalu. Ketika tweet 

Para suhu developer Indonesia mempertontonkan bagaimana mereka bekerja sama di depan publik. Saya terkagum-kagum. Ingin rasanya bisa turut membantu, namun apa daya, saat itu yang saya bisa hanya HTML.

Setiap tweet yang mereply thread tersebut, saya baca dengan seksama. Meski tidak paham dengan apa yang mereka tulis.

. Masih lekat di ingatan, ketika project 

. Ada satu issue untuk membuat salah satu bagian dashboard, kemudian saya mencoba untuk membuatnya.

Ketika lebih setengah bagian kode sudah ditulis, saya urung membuat kontribusi. Tidak percaya diri dengan kode yang masih berantakan. Akhirnya kode tersebut dibiarkan begitu saja di lokal.

Sekian waktu berlalu, sudah beberapa project pribadi dikerjakan dengan seribuan lebih 

Saya merasa ganjil, saat menggunakan mode gelap, hover untuk tombol “Visit Button” malah menjadi hitam. (

Dari situ kemudian terpikir untuk membetulkannya. Ini hanya masalah css sederhana. Maksudnya, saya tidak perlu menulis kode dengan logika super canggih. Hanya dengan beberapa baris sederhana.

. Membuat branch baru. Menulis dua baris kode css. Mem-

 kode ke repository pribadi. Terakhir, menekan tombol 

Wets. Ini tidak semulus yang dibaca. Saya berkali-kali mengecek apakah kode yang saya tulis benar. Entah mengapa denyut nadi berjalan lebih kencang daripada biasanya.

https://github.com/facebook/lexical/pull/2462#issue-1274990303

https://github.com/facebook/lexical/pull/2462

, agar reviewer mudah mengerti permasalahan apa yang saya maksud.

https://github.com/facebook/lexical/pull/2462#issuecomment-1158837326

 di Facebook mengharuskan setiap yang ingin berkontribusi, untuk menandatangani sebuah perjanjian. Jangan takut. Ini hanya beberapa kali klik. Tak ubahnya seperti mengklik persetujuan syarat dan ketentuan saat membuat akun pada sebuah layanan (

https://github.com/facebook/lexical/pull/2462#pullrequestreview-1010455855

Tidak sampai 15 menit, reviewer ternyata sudah memberikan umpan balik. Hanya perlu menekan “commit suggestion” agar kode terubah sesuai saran dari reviewer.

Bot yang bertugas untuk mengecek apakah kontributor sudah menyetujui syarat dan ketentuan kontribusi pun sudah tersinkron.

 di project Meta, rasanya lebih mudah untuk membuat 

di project lain. Maksudnya, dalam hal meyakinkan hati.

Hari-hari itu sedang rajin membuka repository 

 karena mendekati rilis versi 12.2. Akhirnya saya membaca setiap 

 yang dibuat, melihat apa saja yang diubah. Salah satu 

 (salah satu developer paling keren yang saya kagumi), membenahi typo, dari yang sebelumnya 

https://github.com/vercel/next.js/pull/38000

Kembali, mencoba membenahi typo kecil ini.

https://github.com/vercel/next.js/pull/38016

 sebelumnya, untuk menunjukkan bahwa perubahan yang saya buat mirip dengannya.

https://github.com/vercel/next.js/pull/38016#pullrequestreview-1019410068

Di project ini lebih simpel, tidak perlu ada persetujuan layaknya pada project Meta. Hanya perlu menunggu 

Lagi-lagi berawal dari Twitter, inilah salah satu alasan mengapa saya banyak mengikuti developer di Twitter. Pengembang utama dari 

yang digunakan Next.js) mengumumkan bahwa dia baru saja membuat project baru (lagi) bernama 

Ketika dilihat, website dokumentasinya kurang nyaman pada pengguna mobile. Website tersebut dibangun masih di atas 

Kebetulan sekali, saya sempat melihat author dari Nextra, mengetweet soal Nextra versi 2.

Berangkat dari situ, kemudian saya membuat 

, dengan menjadikan project Cobe sebagai patokan.

Sebagai catatan, hingga saya menulis ini, Nextra versi 2 masih berstatus beta dan dokumentasi untuk mengupgrade ke versi 2 belum tersedia.

Sedikit buah tangan untuk developer pemula seperti saya untuk memulai berkontribusi:

Perlu waktu sangat lama hingga akhirnya berani untuk membuat 

. Itu pun hanya kontribusi (sangat) kecil.

Tapi tak apa. Sebelum mencetak rekor dunia, 

 pun dulu perlu beberapa waktu setelah ia lahir, untuk sekadar bisa berdiri dan berjalan. Istilahnya, take your baby steps.

Ini tentang proses belajar, memahami bagaimana sistem bekerja, dan memberanikan diri.

Terima kasih untuk suhu developer Indonesia yang saya sebutkan di atas, karena telah meracuni saya untuk terjun ke dunia ini.

Terakhir, untuk yang pengembang perangkat lunak pemula seperti saya yang ingin belajar untuk membuat kontribusi, panduan kotribusi (

https://github.com/kawalcovid19/wargabantuwarga.com/blob/main/CONTRIBUTING_ID.md

) milik KawalCovid19 ini sangat saya sarankan untuk dibaca.

Ingin berdiskusi lebih lanjut tentang topik ini atau topik lainnya seputar teknologi? Kamu bisa menghubungi saya melalui 

Malam itu, ketika pull request pertama ke project milik Meta (dahulu Facebook) di-merge, senangnya bukan main. Sebuah prestasi, bagi anak kemarin sore dalam dunia pengembangan perangkat lunak. Layaknya anak kecil yang baru bisa berjalan, meski nanti ketika sudah dewasa, ia tak lagi merasakan bahagianya ketika pertama kali bisa melangkah.

Data yang didapat saat melakukan fetch ke API selalu memiliki type 

. Kita tidak pernah benar-benar tahu, apa bentuk dari data tersebut. Untuk itu, saat menerima data, kita harus memastikan bahwa data tersebut sesuai dengan apa yang kita inginkan.

Jika data tersebut berbeda dengan ekspektasi kita, ia harus memunculkan error, bukan malah berjalan normal seperti tidak ada apa-apa.

 menjadi library yang digunakan untuk memvalidasi data dalam tulisan ini.

Saat bekerja dalam tim yang kompleksitasnya menengah ke atas, setidaknya terdapat dua role, yaitu Frontend Engineer dan Backend Engineer. Sederhananya, Frontend adalah seorang yang membuat tampilan web agar terlihat cantik, sedangkan Backend adalah orang di balik layar yang mengelola keluar masuknya data ke database.

Jalur komunikasi paling lazim di antara dua role ini biasanya menggunakan API.

Seorang Backend akan menyediakan endpoint, contoh, 

const resp = await fetch("https://dummyjson.com/products").then((res) =>
  res.json(),
);

console.log(resp);

Kita hidup di dunia yang penuh ketidakpastian. Dan, satu-satu halnya yang pasti di dunia ini adalah ketidakpastian itu sendiri.

Begitu pula halnya yang dialami seorang Frontend.

Misalkan, saat melakukan fetch ke API di atas, kita mendapatkan response seperti berikut:

Data yang didapat adalah data product berupa array, yang berisi object detail dari tiap product. Kemudian data tersebut kita render ke tiap component, untuk ditampilkan. Ada nama product, harga, rating, image, dll. Semua berjalan aman.

Namun ternyata, pada suatu hari dan detik yang tidak kita ketahui, Backend mengubah format data yang diberikan.

Apa yang berubah? Jika dilihat secara sekilas tidak ada yang berubah. Semua terlihat sama. Namun saat dilihat lebih detail, barulah kita sadar, bahwa terjadi perubahan pada salah satu key, dari 

Mari lihat kode di bawah ini. Apa yang terjadi saat kita mencoba melakukan print 

const resp = await fetch("https://dummyjson.com/products").then((res) =>
  res.json(),
);

// seharusnya adalah `price`, bukan `cost`
console.log(resp.products[0].cost); 
// undefined

Dan ketika ditampilkan ke halaman web semua berjalan lancar, tidak ada error. Namun harga dari barang menjadi kosong.

Dengan API yang sama seperti sebelumnya, data response yang diterima, kemudian divalidasi terlebih dahulu, dengan skema data yang kita inginkan. Setelah itu, barulah data digunakan.

import { z } from "zod";

// response didapat dari fetch selalu memiliki type any`
const resp = await fetch("https://dummyjson.com/products").then((res) =>
  res.json(),
);

// definisikan skema data yang diinginkan
const schema = z.object({
  products: z.array(
    z.object({
      id: z.number(),
      title: z.string(),
      description: z.string(),
      cost: z.number(), // <--- masih menggunakan `cost`, bukan `price`
      discountPercentage: z.number(),
      rating: z.number(),
      stock: z.number(),
      brand: z.string(),
      category: z.string(),
      thumbnail: z.string(),
      images: z.array(z.string()),
    }),
  ),
});

// data di-parse menggunakan skema yang sudah didefinisikan
const data = schema.parse(resp);

console.log(data);

 di atas berasumsi key dari harga masih menggunakan  

ZodError: [
  {
    "code": "invalid_type",
    "expected": "number",
    "received": "undefined",
    "path": [
      "products",
      0,
      "cost"
    ],
    "message": "Required"
  }
]

Dan...… error. Itulah yang seharusnya terjadi.

Error terjadi karena skema yang kita definisikan, harus ada key berupa 

 dengan value dengan tipe number. Namun yang didapat, value dari 

Saat data yang didapat tidak sesuai ekspektasi kita, maka dia harus menampilkan error. Tujuannya, agar kita bisa membenahi hal tersebut secepat mungkin.

Rasanya-rasanya kita terlalu jauh melangkah, mari ambil beberapa langkah ke belakang, untuk mengetahui, apa itu sebenarnya 

Zod is a TypeScript-first schema declaration and validation library.

 adalah library untuk mendefinisikan skema dan memvalidasi data. Validasi data diperlukan untuk menjaga dan memastikan konsistensi data, agar programmer bisa tidur nyenyak, tanpa takut data yang digunakan tiba-tiba berubah tanpa sepengetahuan.

Kemudian, import dan buat skema sederhana.

 yang mengharuskan untuk menerima input berupa number. Namun, alih-alih memasukkan number, kita mencoba memasukkan string.

import { z } from "zod";

const rankSchema = z.number(); // skema hanya menerima input berupa number

const rank = rankSchema.parse("2"); // kita mencoba memasukkan string

console.log(rank);

// ZodError: [
//   {
//     code: "invalid_type",
//     expected: "number",
//     received: "string",
//     path: [],
//     message: "Expected number, received string",
//   },
// ];

Hasilnya adalah error. Karena kita memaksa, agar input yang dibolehkan hanya benar-benar number, namun input yang diterima justru string.

Jika input yang dimasukkan benar-benar number, maka hasilnya tidak akan ada error.

import { z } from "zod";

const rankSchema = z.number();

const rank = rankSchema.parse(1);

console.log(rank);
// 1

Mari lanjut untuk membuat skema yang lebih kompleks.

Kita mendefinisikan sebuah skema untuk user bernama 

, data yang di-input harus berupa object, dengan minimal terdapat key 

. Kemudian kita masukkan input data sesuai skema tersebut.

import { z } from "zod";

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
});

const input = {
  name: "Zaki",
  age: 20,
};

const user = userSchema.parse(input);

console.log(user);
// {
//  name: "Zaki",
//  age: 20,
// }

Hasilnya, semua berjalan aman, karena skema dan input sesuai. Bagus.

Kemudian kita coba, seandainya input yang diberikan tidak sesuai. Key 

import { z } from "zod";

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
});

const input = {
  name: "Zaki", // <--– age dihapus
};

const user = userSchema.parse(input);

console.log(user);

// ZodError: [
//   {
//     code: "invalid_type",
//     expected: "number",
//     received: "undefined",
//     path: ["age"],
//     message: "Required",
//   },
// ];

Banyak pilihan type yang bisa digunakan untuk mendefinisikan skema. Berikut beberapa contohnya:

// primitive values
z.string();
z.number();
z.bigint();
z.boolean();
z.date();
z.symbol();

// empty types
z.undefined();
z.null();
z.void(); // accepts undefined

// catch-all types
// allows any value
z.any();
z.unknown();

// never type
// allows no values
z.never();

z.enum(["Salmon", "Tuna", "Trout"]);

Tidak semua value bersifat wajib, kita bisa menjadikannya opsional, misal 

Atau jika kita tidak tahu (atau malas mendefinisikan) kita bisa menggunakan 

Keuntungan lain dari menggunakan schema validation adalah kita bisa sekaligus mendapatkan Type, dari skema yang sudah didefinisikan.

import { z } from "zod";

const userSchema = z.object({
  name: z.string(),
  age: z.number(),
});

type User = z.infer<typeof userSchema>;
//   ^ type User = { name: string; age: number; }

Sehingga, jika kita memerlukan type dari User, sebagai type dari props di sebuah component, kita hanya perlu mengekspornya.

Data yang didapat dari fetch selalu bernilai 

. Kita tidak pernah benar-benar tau, apa bentuk dari data tersebut. Seperti membeli kucing di dalam karung, isinya bisa saja sebenarnya adalah buaya.

Untuk itu, perlu untuk melakukan validasi dari data yang kita dapat.

Berikut beberapa resource yang relevan dengan tulisan ini:

schema declaration and validation library.

Selesai ditulis pada Jumat, 12 April 2024 pukul 23:41 di Pelaihari, Kalimantan Selatan

Selesai disempurnakan pada Sabtu, 13 April 2024 pukul 18:59 di Pelaihari, Kalimantan Selatan

Setiap fetch ke API selalu menghasilkan data dengan type any, jadi saat menerima data, penting untuk memverifikasi kesesuaian data dengan kebutuhan kita

Seni Menerima Data dari Backend, untuk Frontend yang Ingin Tidur Nyenyak

Kita bisa membuat ChatGPT menjadi lebih asik diajak ngobrol dengan 

. Setelah itu pergi ke menu dan pilih custom instructions. Pada bagian, "

- Call me Zaki (full) or Zak (short)
- Response like we're talking, use gue (i am) and lo (you)

Selesai. ChatGPT sudah siap diajak ngobrol!

Untuk yang mau tahu lebih lanjut, kamu bisa lanjut membaca tulisan di bawah ini 😋.

Akhir-akhir ini lebih sering menggunakan ChatGPT. Sebabnya, dia lebih asik, bisa merespons layaknya manusia.

Bagaimana cara membuat ChatGPT lebih manusiawi, agar ngobrolnya lebih enak?

. Sederhananya custom instructions adalah bagaimana kita ingin direspons oleh ChatGPT. Ada 2 pertanyaan yang perlu kita jawab:

What would you like ChatGPT to know about you to provide better responses?

". Pertanyaan ini dimaksudkan supaya ChatGPT lebih mengenal siapa kita, apa latar belakang, apa hobi, apa hal-hal yang kita sukai. Dari situ, ChatGPT akan memberikan penjelasan yang lebih sesuai dengan persona kita. Tentu, kita tidak mungkin menyamakan, bagaimana cara berbicara kepada seorang profesor dan anak kecil.

". Pertanyaan ini untuk memberitahu ChatGPT seperti apa kita ingin direspons. Jangan seperti wa*****nita, ingin dimengerti, tapi tak pernah memberi tahu inginnya seperti apa. Lanjut. Di sini kita bisa memberi tahu, apakah kita ingin jawaban yang panjang atau pendek, apakah dengan bahasa formal atau santai, dll.

. Klik kiri atas, settings, custom instructions.

, lalu di sebelah kiri bawah klik custom instructions.

Berikut adalah custom instructions yang saya gunakan. Saya memiliki dua akun, dengan custom instructions yang berbeda, menyesuaikan kebutuhan. Kamu bisa mengubah sesuai dengan profil dan keperluanmu.

Ini yang sering digunakan untuk bertanya hal sehari-hari. Perhatikan pada bagian, "

Response like we're talking, use gue (i am) and lo (you)

", ini yang membuat percakapan menjadi asik.

Sebenarnya tidak harus bahasa Inggris, kita bisa menuliskannya dengan bahasa Indonesia, misalkan, "Respons dengan bahasa Indonesia yang santai kayak di tongkrongan".

I'm Zaki, I live in Indonesia, I work as a software engineer.
I love reading books and hitting the gym.
I enjoy discussing mindset, health, and technology for hours.
I am a student of social science

- Call me Zaki (full) or Zak (short)
- Response like we're talking, so make it informal and fun
- Use gue (i am) and lo (you)
- Explain in detail, if possible, use points
- Use emoji in the middle of sentence to make funny
- I love biology and how system body works, so please explain detail how body part works
- If possible, give an analogy like you describe to a child

My name is Zaki. I live in Indonesia. I'm an experienced Web Developer. Some tools I use regularly include:
- TypeScript
- Node.js
- Next.JS
- Tailwind
- React
- Chakra UI

I prefer function declarations over function expressions.

I prefer: `thing ? 'whatever' : null` over `thing && 'whatever'` (especially in JSX).

I like descriptive TypeScript type names (no one-letter type names for me). I also prefer the Array generic over the bracket syntax.

- Be casual unless otherwise specified
- Call me "Zaki"
- Be terse
- Suggest solutions that I didn’t think about—anticipate my needs
- Treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an AI
- Please respect my prettier preferences when you provide code.

If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

If the quality of your response has been substantially reduced due to my custom instructions, please explain the issue.

Kita bisa membuat ChatGPT menjadi lebih asik diajak ngobrol dengan custom instructions.

Bikin ChatGPT Ngomong Lo-Gue

Project ini bermula dari tweet Mas Gilang (

) pada 15 Desember 2023. Namun, baru pada 23 Januari 2024 kemarin, project pengumpulan data ini selesai. Banyak kendala yang dialami, sebab itulah saya ingin menuliskan pelajaran apa saja yang didapat dari project ini.

Sebagai catatan penting, project ini hanya project gabut. Tidak memiliki tujuan apa pun, selain hanya karena suka melakukan scraping data. Tidak ada satu rupiah pun yang diperoleh dari pengumpulan data ini.

 const response = await fetch("http://example.com/movies.json");
 const movies = await response.json();
 console.log(movies);

Fetch dilakukan dengan endpoint yang bisa diakses secara publik pada web 

. Response yang berupa JSON dan HTML kemudian dikumpulkan dan dilakukan parsing untuk mendapatkan data yang bersih. Begitu saja.

Lebih detailnya, terdapat tiga tahapan yang dilakukan:

Selama melakukan scraping, ternyata banyak masalah yang dihadapi. Mulai dari sisi scraper hingga masalah dari segi server.

const list = []
const resp = await fetch('https://example.com/api').then((res) => res.json())
list.push(resp)
await Bun.write('data.json', JSON.stringify(list));

Data yang didapat dikumpulkan dalam sebuah array. Selanjutnya array tersebut disimpan dalam file JSON.

 (bukan NPM, PNPM, atau Yarn) karena lebih mudah digunakan untuk.

Seandainya datanya berukuran kecil, ini tidak menjadi masalah. Namun, secara total, ada 250 ribu lebih calon. Untuk sebuah file JSON, angka tersebut akan membuat file menjadi besar, sehingga akan lama untuk sekadar membaca dan meng-update data di dalamnya.

Dari situlah, kemudian saya beralih ke SQLite, dengan perantara ORM-nya yaitu Drizzle. Dibanding JSON, SQLite yang merupakan database sesungguhnya, membuat proses select, insert, dan update sangat mudah.

Sialnya, karena datanya banyak, maka tidak semua fetch untuk mendapatkan profil berhasil. Karena server memiliki keterbatasan dalam merespons request.

Terdapat 250 ribu calon dalam pemilu kali ini. Artinya, saya perlu melakukan 250 ribu kali fetch 

 untuk mendapatkan profil dari tiap calon. Angka yang sangat tidak sedikit.

Dalam keadaan seperti ini, tidak mungkin saya melakukannya hanya dengan sekali menjalankan script. Mengapa? Karena di tengah-tengah prosesnya, pasti akan ada fetch yang gagal, entah karena server yang kelebihan request, atau jaringan saya yang down.

Oleh sebab itu, saya perlu mengakali agar bisa mentoleransi kegagalan. Caranya, ketika script dijalankan ulang, saya hanya akan melakukan 

Bagaimana menandai calon tersebut sudah di-fetch profilnya atau belum? Inilah mudahnya SQLite.

 saya mendapatkan daftar nama calon. Di tiap nama tersebut kemudia saya tambahkan kolom is_fetched. Jika 

| nomor | nama          | is_fetched |
|-------|-------------- |-----------|
| 1     | John Doe      | true      |
| 2     | Jane Smith    | true      |
| 3     | Bob Johnson   | true      |
| 4     | Alice Brown   | true      |
| 5     | Charlie Davis | false     |
| 6     | Eve Wilson    | false     |

Alhasil, saya bisa melakukan query seperti di bawah ini:

SELECT * FROM list_anggota WHERE is_fetched = false

Dari listNotFetched, kemudian kita menjalankan 

 untuk mendapatkan detail profil dari calon.

, maka tidak perlu melakukan fetch dari awal, kita hanya akan melakukan fetch untuk profil yang belum didapat.

Masih berkaitan toleransi kegagalan, tidak mungkin, ketika menjalankan script ulang, maka saya harus melakukan ulang semuanya. Sebagai konteks, terdapat 4 kategori data yang dikumpulkan:

Untuk mentoleransi kegagalan, dan tidak perlu menjalankan semuanya dari awal, maka command untuk menjalankan script saya pisah.

const category = process.argv[2];
const command = process.argv[3];

switch (category) {
  case 'dpr':
    switch (command) {
      case 'get-list-dapil':
        dpr.getListDapil()
        break;
      case 'get-list-calon':
        dpr.getListCalon()
        break;
      default:
        console.log('dpr command not found');
    }
    break;
  ...
  default:
    console.log('Unknown command');
}

Dengan code di atas pada index.ts, command akan berbeda sesuai keperluan.

Misalkan, saya perlu mendapatkan list dapil tingkat DPRD Provinsi, maka commandnya adalah ‘bun run index.ts dprd-provinsi get-list-dapil`

Begitu pula jika ingin mendapatkan list calon DPR RI, ‘bun run index.ts dpr-ri get-list-calon’

Ingat lagi, ada 250 ribu kali fetch yang perlu dilakukan. Ada beberapa opsi untuk melakukan ini:

Metode ke-3 inilah yang digunakan. Beruntungnya, Mas 

 pernah membuat library bernama Concurrent Manager, yang fungsinya batching concurrent promise. Alhasil saya tidak perlu menulis script untuk mengurus batching ini dari awal.

import ConcurrentManager from 'concurrent-manager';

const concurrent = new ConcurrentManager({
  concurrent: 10, 
  withMillis: true 
});

for (const calon of list) {
  concurrent.queue(() => {
    return doSomethingPromiseRequest();
  });
}

concurrent.run()

Setelah masalah dari sisi kita sudah teratasi, kemudian ada lagi masalah dari segi server. Saat kita melakukan misal 50 fetch dalam satu waktu, server akan otomatis memblokir IP dalam kurun waktu terentu.

Untuk mengatasi ini, ada dua hal yang saya lakukan:

Mulanya sebanyak 1000 fetch ditembakkan dalam satu waktu. Ternyata responsenya menjadi 403, yang terjadi adalah IP diblokir oleh server. Kemudian fetch diturunkan ke angka 50 dan antar fetch diberi jeda beberapa detik. Ternyata solusi ini ampuh untuk menghindari pemblokiran oleh server.

export const sleep = (ms: number) =>
  new Promise((resolve) => setTimeout(resolve, ms));

export const sleepRandom = async (min: number, max: number) => {
  const delay = Math.floor(Math.random() * max) + min;
  await sleep(delay);
};

export const customFetch = async (url: string, options?: RequestInit) => {
  await sleepRandom(1_500, 3_000);
  const res = await fetch(url, { ...options });
  return res;
};

Meski sudah bisa mengatasi pemblokiran, dengan mengurangi jumlah concurrent menjadi 50 dan ada penjedaan antar fetch, muncul masalah baru: waktu menjadi lebih lama.

Berbagai cara dilakukan, namun gagal. Hingga akhirnya sadar, karena ini rate limit berdasarkan IP, artinya saya harus melakukan fetch melalui IP berbeda.

Bagaimana caranya? Ada banyak cara. Namun cara paling mudah (dan gratis) adalah dengan menggunakan Cloudflare Worker. Saya membuat API untuk melakukan fetch ke server KPU.

Sederhananya, Cloudflare Worker hanya melakukan fetch ke alamat yang sudah saya tentukan, kemudian memberikan response persis seperti yang dia dapat.

https://infopemilu.kpu.go.id/Pemilu/Dct_dprprov/profile

, kemudian saya hanya perlu melakuka fetch ke transit-example.workers.dev

Proyek pengumpulan data ini menghadapi kendala, sehingga saya ingin menuliskan pelajaran yang didapat.

Software Engineer, TypeScript Addict, based in South Borneo

Di Belakang Layar: Cerita Pull Request ke Project Meta dan Vercel

Seni Menerima Data dari Backend, untuk Frontend yang Ingin Tidur Nyenyak

Bikin ChatGPT Ngomong Lo-Gue

Di Balik Layar: Bagaimana Kami Menscrape 250 Ribu Data Caleg Pemilu 2024

How to Work With Me

Tech Stack Review: Zakiego-v4

Work

Open Source ContributionsSometimes I contribute to open source projects in my free time

vercel/next.js

oven-sh/bun

facebook/lexical

Software Engineer, TypeScript Addict, based in South Borneo

Di Belakang Layar: Cerita Pull Request ke Project Meta dan Vercel

Seni Menerima Data dari Backend, untuk Frontend yang Ingin Tidur Nyenyak

Bikin ChatGPT Ngomong Lo-Gue

Di Balik Layar: Bagaimana Kami Menscrape 250 Ribu Data Caleg Pemilu 2024

How to Work With Me

Tech Stack Review: Zakiego-v4

Work

Globe iconOpen Source ContributionsSometimes I contribute to open source projects in my free time

vercel/next.js

oven-sh/bun

facebook/lexical

Open Source ContributionsSometimes I contribute to open source projects in my free time