Error Handling

How to throw an error? 

There are several ways:

  • Promise.reject() / falling in any async code
  • throw
  • Syntax / TypeErrors, and so on.

Livecoding!

How to catch an error? 

There are several ways:

Livecoding!

How to create Custom Errors?

Livecoding!

How to handle all the errors and organise error handling in an application?

Error Boundary + Custom Errors

Livecoding!

Code from the stream

// 1 HOW TO THROW AN ERROR ?

// them wil cause async error (error in promise)
new Promise((res, rej) => {
    rej('Error');
}).then();
Promise.reject('This is an error');

// it will cause regular error
throw new Error('Error has occured!');

// it will cause TypeError
var isTrue = true;
isTrue[0][0];

// it will cause SyntaxError
let a = 1;
let a = 2;

// -------------------------



// 2 HOW TO CATCH AN ERROR ?

try {
    // some code
} catch (error) {
    // code in this block is executed only if code in try block fails
} finally {
    // code in this block is executed always
}

Promise.reject()
    // this guys work the same way like try/catch
    .catch((error) => /* do smth */ {})
    .finally((res) => /* do smth */ {});

Promise.reject()
    // yet another way to catch error in Promise 
    .then((res) => /* do smth */ {}, (error) => /* do smth */ {})


// How to handle errors with window Object
window.onerror = function (msg, url, lineNo, columnNo, error) {
    console.log(msg, url, lineNo, columnNo, error);
    return true; // return true if you would like to handle error
};
// the same with element.error = ...
// or you can use:
window.addEventListener('error', () => /* do smth */ {})

// -------------------------



// 3 HOW TO CREATE CUSTOM ERRORS ?

// examples of typical error codes

// AuthorisationFailed
// PD3212
// 234
// NOT_FOUND

// How to create Custom Errors and handle error flow an application? 
class CustomError extends Error {
    constructor(message, statusCode) {
        super();
        this.message = message;
        this.statusCode = statusCode;
    }
}

class GoogleApiError extends CustomError {
    constructor(message, statusCode, code) {
        super();
        this.message = message;
        this.statusCode = statusCode;
        this.code = code;
    }
}

class NotFoundError extends GoogleApiError {
    constructor(message, statusCode, code) {
        super(message, statusCode, code);
    }
}

class DatabaseError extends CustomError {
    constructor(message, code) {
        super();
        this.message = message;
        this.code = code;
    }
}

// -------------------------



// 4 HOW TO HANDLE ALL THE ERRORS AND ORGANISE ERROR HANDLING IN AN APPLICATION ?

// emulation of real error requests
const googleApi = async () => { throw { statusCode: 404, code: 'NOT_FOUND' }; }
const database = async () => { throw { message: 'Server shutdown', code: 'SERVER_SHOTDOWN' }; }

const callGoogleApi = async () => {
    try {
        const result = await googleApi();
        return result;
    } catch (error) {
        throw new GoogleApiError(error.message, error.statusCode, error.code);
    }
}

const callDatabase = async () => {
    try {
        const result = await database();
        return result;
    } catch (error) {
        throw new DatabaseError(error.message, error.code);
    }
}

// app entry point 
const main = async () => {
    try {
        // await callGoogleApi();
        await callDatabase();
    } catch (error) {
        if (error instanceof GoogleApiError) return console.log(error.statusCode, 'Some problem with google api:', error.code);
        if (error instanceof DatabaseError) return console.log('Database error:', error.code);
        
        console.log(500, 'Something went wrong', error.toString());
    }
}

main();

// -------------------------

Thank you
&
QA

Made with Slides.com