As part of the Release 0.3 project in my open source course (DPS909), I was asked to continue my learning progression from Hacktoberfest by making another pull request (PR) to an internal project. Internal in this case means a project repository that is maintained by the class.
The project I chose was Telescope, which is an open source web server and client application for aggregating and presenting a timeline of Seneca's open source blogs.
The Issue
The issue I chose to work on was issue #3607. This issue described a bug that was occurring during the sign up process when the user would input their Blog/RSS URLs to link to their account. The issue here is that the instructions state that the user can enter multiple URLs separated by spaces. But when multiple URLs are entered, the form throws an error and says it's an invalid URL. The user must get rid of the additional URLs and leave just the one.
The PR
PR: https://github.com/Seneca-CDOT/telescope/pull/3766
Let me just get one thing clear about this PR. It may only say that 1 change and 1 deletion occurred, but it was not as simple as the number of code changes make it seem. This was probably the most frustrating issue I've worked on so far in this course.
Problem 1
The frustration began even before working on the issue. I had trouble setting up the development environment. I followed the environment setup documentation exactly as described and I still could not run the backend or frontend of the application locally on my machine. A day was wasted going through the steps over and over again hoping it would work.
I then turned to the Telescope Slack channel hoping someone could help diagnose my problem. My course Professor noticed that it looked like Docker was running out of resources when trying to run the app. Telescope uses Docker to deploy all the different parts of the app. Based on that advice, I looked at every obvious resource like CPU, RAM and disk. I had over 10 GB of free space before attempting to run the app, but I noticed that Docker took up all that space and that's when the app build broke.
So obviously the problem was low disk space, much to my annoyance. I was told that Docker takes up a ton of disk space. I moved the Docker image file to another disk on my machine and that's when I was able to build and run the app... only took a couple of days.
Problem 2
The second problem I encountered was just learning how the entire application worked. I've never worked with Telescope before so everything was new.
I was already familiar with part of the tech stack used, but just the sheer size of the application was intimating. Trying to follow how the code was executed was also frustrating as I would often lose myself within all the files.
Eventually, I was able to somewhat grasp how the sign up process worked. So I decided to start working on the issue at hand.
Problem 3
The third problem I had was figuring out where the bug was originating from. I found the component used for the validating the Blog URL in the sign up form (RSSFeeds), so I started debugging there.
I had no idea why the error kept appearing after inputting more than one URL. I experimented with every 'validating' and 'error' variable in the component to see if something changed. The file was covered in console.log in my attempt to find the source of the bug.
I then noticed that if I commented out an error check there would be no error with multiple URLs and they would be parsed correctly; as I described in this comment.
However, one of the Telescope admins suggested I keep the error check and guided me to look elsewhere in the project. So I still didn't find the origin of the bug.
Problem 4
This problem was due to the fact that I did find the origin of the bug as I described in this comment. However, I could not implement the solution I had come up with because I could not find a way to convert input text to an array while still being validated by the form validation schema. I had experiment with what seems like every possible solution, but could not get past the error that the validation schema would throw. I even tried adjusting the validation schema to accommodate the array, but nothing.
The Solution
After many hours of frustration with not being able to implement the original solution that I thought of, I noticed that the Channel URL section of the sign up form uses the same RSSFeeds.tsx component and a similar validation schema. Oddly, the Channel URL input does not have the same bug when inputting multiple URLs.
As I described in more detail in my PR, this was because the Channel URL is not validated as a URL. It was only validated as a string so it could accept multiple URLs. When it's validated as a URL any space in the string automatically flags it as an error, which is why the bug existed.
So I made sure to match the Channel and Blog URL validation schema. Just doing this one simple change completely fixed the bug.
Conclusion
I feel this PR taught me how to deal with frustration and taught me the importance of working with others on GitHub and Slack. Without guidance from other people I probably would have given up because I would have thought this was out of my skill level. The solution may have been simple, but the process to get there certainly was not.
Top comments (0)