Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à EWD 3 Training Course Part 11: Handling Errors in QEWD
Similaire à EWD 3 Training Course Part 11: Handling Errors in QEWD (20)
Plus de Rob Tweed
Plus de Rob Tweed (14)
Dernier
Dernier (20)
EWD 3 Training Course Part 11: Handling Errors in QEWD
- 1. Copyright © 2016 M/Gateway Developments Ltd EWD 3 Training Course Part 11 Handling Errors in QEWD Rob Tweed Director, M/Gateway Developments Ltd Twitter: @rtweed
- 2. Copyright © 2016 M/Gateway Developments Ltd Back-end Error Responses • Simply return an error object via the finished() function • Examples: login: function(messageObj, session, send, finished) { if (session.authenticated) { finished({error: 'You are already logged in!'}); return; } var username = messageObj.params.username; if (username === '') { finished({error: 'You must enter a username'}); return; } var password = messageObj.params.password; if (password === '') { finished({error: 'You must enter a password'}); return; } // Validate username and password against authentication database records var status = checkLogin(username, password); // however this works if (status.ok) { session.authenticated = true; finished({ok: true}); } else { finished({error: status.error}); // return an error message string giving the reason for failed login } }
- 3. Copyright © 2016 M/Gateway Developments Ltd Handling Error Responses in Browser • Simple handling in EWD.send() callback function EWD.send(messageObj, function(responseObj) { if (responseObj.message.error) { // display the value of responseObj.message.error } else { // no error occurred } });
- 4. Copyright © 2016 M/Gateway Developments Ltd Handling Error Responses in Browser • Simple handling in Pub/Sub handlers EWD.on('someMsgType', function(responseObj) { if (responseObj.message.error) { // display the value of responseObj.message.error } else { // no error occurred } });
- 5. Copyright © 2016 M/Gateway Developments Ltd Handling Error Responses in Browser • Using built-in error event handler EWD.on('error', function(responseObj) { // fires whenever an error occurs in any returned response // display the value of responseObj.message.error // Message type that generated the error is in responseObj.type });
- 6. Copyright © 2016 M/Gateway Developments Ltd Displaying Errors in Browser • Up to you what technique you use • Crudest technique is alert(errorText) – blocking • A useful library is toastr – https://codeseven.github.io/toastr/ – Displays non-blocking pop-up messages that automatically disappear after a few seconds – Very easy to integrate
- 7. Copyright © 2016 M/Gateway Developments Ltd Load toastr into index.html <html> <head> <title>Demo ewd-xpress application</title> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> </head> <body> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/ewd-client.js"></script> <script src="app.js"></script> <button id="testBtn">Click Me</button> <div id="content"> Content goes here </div> </body> </html>
- 8. Copyright © 2016 M/Gateway Developments Ltd Edit app.js $(document).ready(function() { EWD.log = true; EWD.on('ewd-registered', function() { EWD.on('error', function(responseObj) { toastr.error(responseObj.message.error); }); EWD.on('intermediate', function(responseObj) { $('#content').text(responseObj.message.date); }); EWD.on('socketDisconnected', function() { $('#content').text('You have been logged out'); $('#testBtn').hide(); }); $('#testBtn').on('click', function(e) { var message = {type: 'testButton'}; EWD.send(message, function(messageObj) { $('#content').append('<br /> ' + messageObj.message.ok); }); }); }); EWD.start('demo1', $, io); }); Add a socket disconnected handler
- 9. Copyright © 2016 M/Gateway Developments Ltd Create a test error message • C:qewdnode_modulesdemo1.js or • ~/qewd/node_modules/demo1.js module.exports = { handlers: { testButton: function(messageObj, session, send, finished) { session.data.$('foo').value = 'bar'; send({ type: 'intermediate', foo: 'bar', date: new Date().toString() }); finished({ error: 'This is a test error! }); } }; Clicking the button will now return an error
- 10. Copyright © 2016 M/Gateway Developments Ltd Try it out
- 11. Copyright © 2016 M/Gateway Developments Ltd Try it out A toastr error pop-up will now appear automatically for every error you return
- 12. Copyright © 2016 M/Gateway Developments Ltd toastr is handy for other things • Displaying: – Warnings • toastr.warning(text) – Information messages • toastr.success(text) • toastr.info(text) • See https://github.com/CodeSeven/toastr