TUTORIAL - Create a Steem Browser Extension - JavaScript - Basic - Part 4

What Will I Learn?

This Tutorial Series is all about how to create a browser extension showing steem account data. This part dedicates itself how to handle an invalid entered username by showing an error screen.

Result of Tutorial:

Requirements

• Please read the previous part (Click here)

Difficulty

• Basic

Tutorial Contents

Error Screen

It is useful to inform a user if something went wrong, so he doesn't wonder about it and knows why the application stopped working. For this purpose applications show error screens. The most error screen is probably the 500 Error.

Our current extension has some cases where it could fail working and the user would never know why or even that the application stopped working. One case is an incorrect username entered inside of the options.

(The extension stopped working, but we will never know. The loading indicator never stops and the user only thinks it takes a looooooong time to load...)

In this case an error screen should be showed instead of a loading indicator.

Creating an error screen
Head over to your index.html and create a new hidden div inside the body element.

<div id="error" class="hidden text-center" style="color: red;">
            <h3>An Error Occurred</h3>
            <div id="error_msg">
            </div>
</div>

text-center class is a class I created to center the text inside of my div (text-align: center).
Okay, we created a basic error screen which is hidden until we show it. As you can see the error_msg is empty. It will be set depending on what error occurred.

Open your index.js

function showError(type) {
    const errorContainer = document.getElementById("error");
    const indicator = document.getElementById("indicator");
    var errorMsg = '';
    switch (type) {
        case 'no_username':
            errorMsg = 'No username provided!';
            break;
        case 'getAcc_failed':
            errorMsg = 'It seems like your entered username is wrong or couldn`t be loaded';
            break;
        case 'getFllw_failed':
            errorMsg = 'Getting Follower & Following Count failed. Please try again';
            break;
    }
    document.getElementById("error_msg").innerHTML = errorMsg;
    indicator.className += " hidden";
    errorContainer.classList.remove('hidden');
}

We created a new function 'showError()' which is called as soon as your application failed and stopped working. It will then hide your loading indicator and present the error screen.

indicator.className += " hidden";
errorContainer.classList.remove('hidden');

The error message is chosen based on the error type. We are using a Switch-Case here (Click here for more Switch-Case).

The only things we have to do now is to call the function on our exit-earlies.

steem.api.getAccounts([username], function (err, result) {
        if (err || !result || result.length === 0) {
            console.log('Error loading account: ' + err);
            showError('getAcc_failed');
            return;
        }
...
steem.api.getFollowCount('moonrise', function(err, result) {
            if (err || !result || result.length === 0) {
                console.log('Error loading follow count: ' + err); 
                showError('getFllw_failed');
                return;
            }

You realise I´ve added result.length === 0 as a new break condition. By writing this Tutorial I found out that getAccounts can return an empty result array, so we are checking this from now on!

And onLoad

function onLoad() {
    chrome.storage.sync.get(["username"], function(items) {
        var username = items.username;
        if (username === undefined) {
            showError('no_username');
            return;
        }
        getAccountData(username);
    });
}

Try it
Enter an invalid username and restart your extension.

Thanks for reading :)

What's up next ?

• Retry Button inside our error screen
• Validating Username input (correct name format)

Full Source Code

Curriculum

• Part 1 - Setup
• Part 2 - Reading Data & Designing
• Part 3 - Loading Indicator

---

Posted on Utopian.io - Rewarding Open Source Contributors

---