Pelletyze — Update #8: Bring the error to the frontend!
Finally, I found a solution to throw an error at the frontend, while importing wrong CSV Data on the server. For Fast-CSV, I needed a solution to parse the data and put the data into the database. While this part was easy, the error message from Supabase was swallowed, and I had no practical option to present the error to the frontend. Or, there was no uncomplicated way, since now. :D
const stream = csv
.parse(options)
.on("error", (error) => {
console.log(error);
})
.on("data", (row) => {
result.push(row);
})
.on("end", async () => {
const supabase = await createClient();
const { error, statusText } = await supabase
.from("fillings_import")
.upsert(completeFillings(result))
.select();
if (error) {
throw new Error(`${error.message}, ${statusText}`);
}
});
stream.write(fileData);
stream.end();
This was my initial solution, and the error at the end was never shown. 🤷
The new version is wrapped with a new Promise and calls reject if adding data to Supabase produces an error. Easy, right? I'm so happy that I don't need to wrap an <ErrorBoundary /> or something else.
await new Promise<void>((resolve, reject) => {
const stream = csv
.parse(options)
.on("error", (error) => {
console.log(error);
})
.on("data", (row) => {
result.push(row);
})
.on("end", async () => {
const supabase = await createClient();
const { error, statusText } = await supabase
.from("fillings_import")
.upsert(completeFillings(result))
.select();
if (error) {
console.error({ error, statusText, result });
reject(new Error("Looks like your CSV is not formatted correctly"));
}
resolve();
});
stream.write(fileData);
stream.end();
});
This little fix makes me happier than it perhaps should. But in the end, that it. I thought much more about a solution than it took time to write the code. I thought at least on and off for 3 days about it. And today, the “a-ha” moment under the shower. 😎
14 of #100DaysToOffload
#pelletyze
Thoughts? Discuss...
