Pelletyze — Update #8: Bring the error to the frontend!

Displays the error message: “Looks like your CSV is not formatted correctly”

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...