Week 12: DNS records instructions and catching errors

Overview

Hello, my friends! In this episode of "StartChart," I focused on two main tasks: creating a DNS records instructions page and implementing error boundaries.

DNS Records Instructions

I found this task extremely necessary since our project will be used by hundreds, if not thousands, of students in the next few years (assuming no nuclear war happens tomorrow fingers-crossed). As students, they may be confused about what they're supposed to do, and that's when my instructions will come in handy. This kind of work is perfect for using ChatGPT, which I did, and it really helped me write more understandable and native-like text. Overall, ChatGPT performed well on this task, particularly when I provided enough context about our platform, as its initial responses were quite generic.

https://github.com/DevelopingSpace/starchart/pull/545

Catching Errors

Remix offers a logical and straightforward way to handle both expected and unexpected errors. It essentially has two components that you can export from any route:

• CatchBoundary - for handling expected errors, typically thrown with throw new Response("Bla bla", {status: 404}).
• ErrorBoundary - for handling unexpected errors, usually thrown with throw new Error("error message").

Interestingly, Remix provides a default CatchBoundary with just the status code text, but it doesn't offer a default ErrorBoundary, which results in a runtime crash. There's probably a good reason for this, but I'm not sure what it is.

I decided to create two components for each boundary type, rendering certain status codes, error messages, etc. One cool feature I implemented is a function that can be passed to the CatchBoundary component, which returns error text based on the status code. This is optional, as CatchBoundary has some built-in status code handling with generic messages. The mapStatusToErrorText function is designed to handle specific status codes and provide users with custom error text. For example, when creating the CatchBoundary for the DNS records page, I wanted to give users custom error messages for 404 and 400 errors, so here's what I did:

 function mapStatusToErrorText(statusCode: number): string {
  switch (statusCode) {
    case 404:
      return 'Sorry we could not find your dns record';
    case 400:
      return 'We got an error processing requested action on your dns record';
    default:
      return getErrorMessageFromStatusCode(statusCode);
  }
}

Nothing special, but felt kinda cool.

https://github.com/DevelopingSpace/starchart/pull/554

Some afterthoughts

You know you're about to release something when you start writing instructions for it, and that's the case with StartChart. Next week will be hectic, with many final submissions and presentations. The struggle will be real, but only two weeks of school remain. I feel a lot of pressure to find a good full-time position, and the current job market isn't great (layoffs don't help). Nonetheless, I remain optimistic and believe that in three months, I'll be living the life I've dreamt of for years: a well-paying job that I enjoy and no more school. Happy Easter to all my fellow Catholics, and good luck with your finals! Peace.