My First Steem.js Adventure, Part 4: Fixing My API Timeout Bug & Finishing Up!
Posts in this series: Part 1 / Part 2 / Part 3 / Part 4
I finished my first STEEM project!
In my previous post, I said that it might be the final in my series about creating my first Steem.js tool, but I just got some help from my mentor and I feel like it would be valuable to share what fixed the problem.
The bug was that if I searched with too many users, the API calls would get hung up. It looks like the problem might have been a security feature on the STEEM API that wanted to make sure I wasn’t doing anything malicious. To fix this I just needed to put a small gap of time between some of the calls.
The Fix
The solution for this problem only took a few lines of code. First was a function to create a promise that waits a specified amount of time:
function sleep(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
})
}
Then I just had to shuffle this function into my big array of API calls. Before my fix, I used map
to wrap promises around my STEEM API calls like this:
let namePromiseArray = usersToSearch.map(name => createHistoryPromise(name, transactionsCount, startDate, endDate));
My fix was to iterate over usersToSearch
and execute my sleep function every fifth iteration:
let namePromiseArray = [];
for (let [index, name] of usersToSearch.entries()) {
if (index % 5 === 0) await sleep(1000);
namePromiseArray.push(createHistoryPromise(name, transactionsCount, startDate, endDate))
}
You might have noticed that I used the await
keyword again to wait for my sleep
function to execute. To make this possible, I just made the callback function surrounding the for loop an async
function.
Monitoring the API Requests With Chrome Dev Tools
The way I’ve been monitoring all of the API calls to make sure they go through, is with the Network section in Chrome dev tools. You can open up the dev tools by right clicking on the web page and selecting inspect. If you click Network at the top, it will show you all of the network requests that are happening:
If I look at this pane after clicking search in my app, I see the requests as they’re executed:
This is how I found that some of the requests weren’t going through before. A group of them went through pretty quickly, and then the others got hung up until I received an error.
Cleaning Up My Code & Publishing
The first order of business to get things finalized was to add a pacman loading spinner:
Then I wanted to add a message in red at the top of the list if the app needed more transactions to process the data properly. At first I just had the message sent back in the 'total' field on the table:
So I created a small function to look through the table and see if that message was returned.
function checkResultsForError(resultsArray) {
let found = resultsArray.some(function (el) {
return el.total === 'need more transactions';
});
return found;
}
Then I showed the message with this:
let error = checkResultsForError(resultsArray);
if (error) $('.error').text('The app needs more transactions for this search. Increase the value above and search again.');
I then added a new div
to my html along with a one line css file. Here’s the result:
And that’s it! Here’s the final product in action:
Removing Node & Publishing
After I fixed everything up, I moved the jQuery and Steem.js files into my main folder and then updated the file paths to get rid of Node. Then I enabled Github Pages on my repo and it is now live here. If you try it out and find any bugs, please let me know here or on Github!
Making this app has been a good example of what I’m enjoying so much about coding. I’m learning this skill to help me get a job, but I just used it to help solve a problem. That’s so cool! I can’t wait to see other opportunities to use what I’ve learned as I get more proficient.
Thanks so much for following along with my coding adventure! It feels so good to have this first app out there in the wild and being used by people to save some time. 🙂
Posts in this series: Part 1 / Part 2 / Part 3 / Part 4
![follow_jeffbernst.gif](https://steemitimages.com/DQmXGhxrjSU8mJHaRFmq5rKc67YDutbCHLTGHHRRTN4hwwi/follow_jeffbernst.gif)
Excellent post
Thanks!
Thaks for upvoting
This is an excellent resource @jeffbersnt! Thanks for creating this, it'll allow us to keep track of power up all-stars :)
No problem! :) I'm glad I was able to use what I'm learning and help out a little!
Thank you @jeffbernst for such a great content.
It is great that you're doing your best to bring improvement in this post. Yeah, This small project will help you in finding jobs because you are building your portfolio as a developer.
Yeah, good point! I'm glad to be filling out my portfolio. This is actually one of the bigger projects I've put together so far, but I'm getting a little better each week :D
It's great that you are working towards your goal.
Yeah, Consistency is the only key to get success. The more you do, the better you will become. Coding is something that people are not learning from theory, You have to experiment with different areas of language for becoming better.
Many thanks for your hard work. And congratulations on your first completed Steem project. 🎉
Thanks! A small but exciting first step 🙂
Great write up Jeff, looking forward to seeing more of your projects!
Thanks! I'm looking forward to seeing more of your posts and photos!
Nice post!
Wouldn't it be possible to cache the requests with service worker + cache storage? It could save you a lot of time if the request was already sent any time in the past :)
Thanks so much for reading and offering advice! I was really hoping to get some tips on how to improve what I did 🙂
I've actually never used service worker before. Would it know if a request would return the same results or not? For example, if the user had submitted a search that included the current day, which still had some transactions, would the search know not to return those same results if the user searched the same range sometime in the future? Sorry if that's confusing!
I guess I'll just have to look into it and see if I can use it to improve my little app. Thanks again!
You're welcome 🙂
The possibilities how to implement it in detail are endless. The CacheStorage works totally dynamic so you could decide every request if to cache or not. There are also different caching strategies: have a look here.
Kinda impractical that my post about Service Workers and CacheStorage is only in German 😅
Awesome, thanks for sharing! Haha no worries, maybe I can try using google translate on your post 😀
a really wonderfull post sir...and i want to be your friend sir
Hi guys ! let's exchange followers ...follow me, reply that you did and i will follow you back within seconds.
This comment has been flagged because it is considered spam. This style of comment diminishes the overall quality and authenticity of this platform. @steemflagrewards
let's exchange followers ...follow me, reply that you did and i will follow you back within seconds.
This comment has been flagged because it is considered spam. This style of comment diminishes the overall quality and authenticity of this platform. @steemflagrewards