Written with AI assistance from the source video. The video is the authority.
29:07Vercel
Log in to leave a comment
No posts yet
Memasukkan input formulir yang masuk dari bot messenger internal ke dalam database ternyata jauh lebih merepotkan dari yang dikira. Hal ini karena struktur payload Slack dan Discord yang sangat berbeda. Menghabiskan waktu membaca dokumentasi SDK untuk integrasi API setiap saat seringkali membuat seorang backend developer merasa lelah.
Slack mengirimkan data dalam objek bersarang 3 tingkat saat pengiriman modal. Discord mengirimkan nilai dalam bentuk array komponen. Ditambah lagi dengan tekanan untuk merespons dalam waktu 3 detik setelah webhooks diterima.
Kita menggabungkan Adapter Pattern dan Zod untuk membuat lapisan normalisasi domain.
`typescript
import { z } from 'zod';
export const CommonFormSchema = z.object({
platform: z.enum(['SLACK', 'DISCORD']),
userId: z.string().min(1),
formId: z.string().min(1),
submittedAt: z.date(),
fields: z.object({
applicantName: z.string().min(2),
contactEmail: z.string().email(),
category: z.enum(['BUG', 'FEATURE', 'INQUIRY']),
description: z.string().max(2000),
}),
});
export type NormalizedFormData = z.infer;
export class SlackPayloadAdapter {
static adapt(rawPayload: any): NormalizedFormData {
const values = rawPayload.view?.state?.values || {};
return CommonFormSchema.parse({
platform: 'SLACK',
userId: rawPayload.user?.id,
formId: rawPayload.view?.callback_id,
submittedAt: new Date(),
fields: {
applicantName: values['name_block']?.['name_action']?.value,
contactEmail: values['email_block']?.['email_action']?.value,
category: values['category_block']?.['category_action']?.selected_option?.value,
description: values['desc_block']?.['desc_action']?.value,
},
});
}
}
export class DiscordPayloadAdapter {
static adapt(rawPayload: any): NormalizedFormData {
const components = rawPayload.data?.components || [];
const fieldMap: Record<string, string> = {};
for (const row of components) {
for (const comp of row.components || []) {
if (comp.custom_id) {
fieldMap[comp.custom_id] = comp.value || comp.values?.[0];
}
}
}
return CommonFormSchema.parse({
platform: 'DISCORD',
userId: rawPayload.member?.user?.id || rawPayload.user?.id,
formId: rawPayload.data?.custom_id,
submittedAt: new Date(),
fields: {
applicantName: fieldMap['applicant_name'],
contactEmail: fieldMap['email_email'],
category: fieldMap['category'],
description: fieldMap['description'],
},
});
}
}
`
Dengan memisahkan adapter, Anda tidak perlu mengubah logika bisnis meskipun ada messenger baru yang ditambahkan. Usaha pemeliharaan pun menjadi berkurang.
Function serverless Vercel membuat instans baru untuk setiap permintaan. Jika Anda terhubung langsung ke Postgres dengan cara tradisional, batas max connections akan terlampaui dan error akan terjadi.
Dengan menggunakan Neon's Serverless Pooler, Anda dapat mengurangi latensi koneksi secara drastis dan menangani permintaan secara bersamaan. Penyimpanan ganda harus dicegah menggunakan kunci idempotensi.
`typescript
import { Pool } from '@neondatabase/serverless';
const pool = new Pool({ connectionString: process.env.POSTGRES_URL });
export async function insertNormalizedFormsBulk(forms: NormalizedFormData[]) {
const client = await pool.connect();
try {
await client.query('BEGIN');
const insertQuery = `
INSERT INTO form_responses (
idempotency_key,
platform,
user_id,
form_id,
payload,
created_at
)
VALUES ($1, $2, $3, $4, $5, $6)
ON CONFLICT (idempotency_key)
DO UPDATE SET
payload = EXCLUDED.payload,
created_at = EXCLUDED.created_at
RETURNING id;
`;
for (const form of forms) {
const idempotencyKey = `${form.platform}:${form.userId}:${form.formId}:${form.submittedAt.getTime()}`;
await client.query(insertQuery, [
idempotencyKey,
form.platform,
form.userId,
form.formId,
JSON.stringify(form.fields),
form.submittedAt,
]);
}
await client.query('COMMIT');
} catch (error) {
await client.query('ROLLBACK');
throw error;
} finally {
client.release();
}
}
`
Lebih aman bagi webhook untuk segera memberikan respons 200 dan memproses penyimpanan aktual secara asinkron. Ini adalah satu-satunya cara untuk menghindari timeout 3 detik.
Pengguna akan merasa lelah jika modal ditutup dan error dimunculkan hanya karena salah input. Umpan balik (feedback) harus diberikan langsung di dalam modal yang sedang terbuka.
`typescript
export function formatSlackValidationErrorResponse(zodError: z.ZodError) {
const errorMap: Record<string, string> = {};
for (const issue of zodError.issues) {
const fieldName = issue.path[issue.path.length - 1];
if (fieldName === 'contactEmail') {
errorMap['email_block'] = issue.message;
} else if (fieldName === 'applicantName') {
errorMap['name_block'] = issue.message;
} else if (fieldName === 'description') {
errorMap['desc_block'] = issue.message;
}
}
return {
statusCode: 200,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
response_action: 'errors',
errors: errorMap,
}),
};
}
`
Kelola sesi dengan Redis dan tetapkan TTL selama 15 menit. Berdasarkan pengumpulan log error, sebagian besar masalah disebabkan oleh kesalahan pada email atau batasan jumlah karakter. Tingkat kesalahan input akan berkurang jika Anda memodifikasi petunjuk (hint) modal dan menambahkan umpan balik secara real-time.