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:
- try...catch...finally (for any JS-code)
- Promise.prototype.catch / Promise.prototype.then - for async code
- element.onError / addEventListener('error', callback) - for async code on callbacks
- window.onError
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
Error Handling
By Dzmitry Tsebruk
Error Handling
- 1,476