Please wait… Oh, it didn't work!

Transcript

1. TOBIAS BIENIEK github.com/Turbo87 Please wait… Oh, It Didn’t Work! 😱 SIMPLABS simplabs.com
2. Turbo87 TobiasBieniek
3. simplabs based in Munich consulting all over 🇪🇺
4. TOBIAS BIENIEK github.com/Turbo87 Loading States and Error Handling SIMPLABS simplabs.com
5. TOBIAS BIENIEK github.com/Turbo87 Loading States and Error Handling and TESTS!! SIMPLABS simplabs.com
6. A „simple“ application Like 👍
7. A „simple“ application <button type="button" {{on "click" this.like}} > Like 👍 !</button>
8. A „simple“ application class LikeButton extends Component { @action async like() { await fetch('/like', { method: 'POST' }); } }
9. A „simple“ application class LikeButton extends Component { @action async like() { await fetch('/like', { method: 'POST' }); } } No Loading State No Error Handling
10. Fantastic Loading States and how to test them ⏳
11. A „simple“ application Like 👍
12. A „simple“ application Like 👍 Please wait...
13. Loading State <button type="button" disabled={{this.inProgress}} {{on "click" this.like}} > {{#if this.inProgress}} Please wait… {{else}} Like 👍 {{/if}} !</button>
14. Loading State class LikeButton extends Component { @tracked inProgress = false; @action async like() { this.inProgress = true; await fetch('/like', { method: 'POST' }); this.inProgress = false; } }
15. Loading State class LikeButton extends Component { @tracked inProgress = false; @action async like() { this.inProgress = true; await fetch('/like', { method: 'POST' }); this.inProgress = false; } } What happens when fetch() fails?
16. Loading State class LikeButton extends Component { @tracked inProgress = false; @action async like() { this.inProgress = true; try { await fetch('/like', { method: 'POST' }); } finally { this.inProgress = false; } } }
17. Loading State class LikeButton extends Component { @tracked inProgress = false; @action async like() { this.inProgress = true; try { await fetch('/like', { method: 'POST' }); } finally { this.inProgress = false; } } } What if the component is already gone?
18. Loading State class LikeButton extends Component { @tracked inProgress = false; @action async like() { this.inProgress = true; try { await fetch('/like', { method: 'POST' }); } finally { if (!this.isDestroying !&& !this.isDestroyed) { this.inProgress = false; } } } }
19. Loading State with ember-concurrency class LikeButton extends Component { @task *likeTask() { yield fetch('/like', { method: 'POST' }); } get inProgress() { return this.likeTask.isRunning; } }
20. Loading State with ember-concurrency class LikeButton extends Component { @task *likeTask() { yield fetch('/like', { method: 'POST' }); } get inProgress() { return this.likeTask.isRunning; } }
21. Fantastic Loading States and how to test them ⏳
22. Happy Path Tests module('Component | LikeButton', function(hooks) { setupRenderingTest(hooks); test('happy path', function() { await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('[data-test-like-counter]') .hasText('42 Likes'); }); });
23. Happy Path Tests module('Component | LikeButton', function(hooks) { setupRenderingTest(hooks); test('happy path', function() { await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('[data-test-like-counter]') .hasText('42 Likes'); }); }); Causes real API requests…
24. API mocking • Pretender github.com/pretenderjs/pretender • Mirage miragejs.com / ember-cli-mirage.com • Polly.js netflix.github.io/pollyjs emberobserver.com/categories/mocking,-fixtures,-and-factories
25. API mocking import { setupMirage } from 'ember-cli-mirage/test-support'; module('Component | LikeButton', function(hooks) { setupRenderingTest(hooks); setupMirage(hooks); test('happy path', function() { this.server.post('/like', { likes: 5 }); await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('[data-test-like-counter]') .hasText('5 Likes'); }); });
26. Loading State Tests test('loading state', function() { this.server.post('/like', { likes: 5 }, { timing: 500 }); await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('button') .isDisabled() .hasText('Please wait…'); });
27. Loading State Tests test('loading state', function() { this.server.post('/like', { likes: 5 }, { timing: 500 }); await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('button') .isDisabled() .hasText('Please wait…'); }); Assertion failed 😢
28. Loading State Tests test('loading state', function() { this.server.post('/like', { likes: 5 }, { timing: 500 }); await render(hbs`<LikeButton!/>`); await click('button'); await waitFor('button[disabled]'); assert.dom('button') .isDisabled() .hasText('Please wait…'); await settled(); assert.dom('button') .isEnabled() .hasText('Like 👍'); }); github.com/emberjs/ember-test-helpers/blob/master/API.md#waitfor
29. Loading State Tests test('loading state', function() { this.server.post('/like', { likes: 5 }, { timing: 500 }); await render(hbs`<LikeButton!/>`); await click('button'); await waitFor('button[disabled]'); assert.dom('button') .isDisabled() .hasText('Please wait…'); await settled(); assert.dom('button') .isEnabled() .hasText('Like 👍'); }); github.com/emberjs/ember-test-helpers/blob/master/API.md#waitfor Tests are getting slooooow… 🥱
30. Loading State Tests import { defer } from 'rsvp'; test('loading state', function() { let deferred = defer(); this.server.post('/like', deferred.promise); await render(hbs`<LikeButton!/>`); click('button'); await waitFor('button[disabled]'); assert.dom('button') .isDisabled() .hasText('Please wait…'); deferred.resolve({ likes: 5 }); await settled(); assert.dom('button') .isEnabled() .hasText('Like 👍'); }); github.com/tildeio/rsvp.js/#deferred
31. Summary Loading State Tests • Use a library / addon to mock your API calls (Mirage, Pretender, Polly.js, ...) • Use await waitFor() after a regular test helper without await (click, focus, ...) to wait for a loading state • Use await settled() to check the end state • Use defer() to avoid race conditions and speed up the tests
32. Error Handling Oops! … It did it again 🧨
33. Error Handling Tests test('500 Internal Server Error', function() { this.server.post('/like', {}, 500); await click('button'); await render(hbs`<LikeButton!/>`); assert.dom('[data-test-error]') .hasText('whoops… that did not work!'); });
34. Error Handling Tests test('500 Internal Server Error', function() { this.server.post('/like', {}, 500); await click('button'); await render(hbs`<LikeButton!/>`); assert.dom('[data-test-error]') .hasText('whoops… that did not work!'); }); Where do we display this?
35. Notifications • ember-cli-flash github.com/poteto/ember-cli-flash • ember-cli-notifications github.com/mansona/ember-cli-notifications • ember-notify github.com/adopted-ember-addons/ember-notify emberobserver.com/categories/notifications
36. Notifications with ember-cli-notifications class LikeButton extends Component { @service notifications; @task *likeTask() { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { this.notifications.error( 'whoops… that did not work!' ); } } }
37. Notifications with ember-cli-notifications let ENV = { !// !!... 'ember-cli-notifications': { autoClear: true, }, }; if (environment !!=== 'test') { !// disable auto clearing so that we can !// manually clear the queue if needed ENV['ember-cli-notifications'].autoClear = false; } config/environment.js
38. fetch error scenarios class LikeButton extends Component { @service notifications; @task *likeTask() { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { this.notifications.error( 'whoops… that did not work!' ); } } } fetch can fail too!
39. fetch error scenarios class LikeButton extends Component { @service notifications; @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new Error('HTTP request failed'); } } catch { this.notifications.error('whoops… that did not work!'); } } }
40. Error Handling Tests test('Network Error', function() { window.fetch = async function () { throw new TypeError( 'NetworkError when attempting to fetch resource.' ); }; await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('[data-test-notification-message="error"]') .hasText('whoops… that did not work!'); });
41. Error Handling Tests test('Network Error', function() { window.fetch = async function () { throw new TypeError( 'NetworkError when attempting to fetch resource.' ); }; await render(hbs`<LikeButton!/>`); await click('button'); assert.dom('[data-test-notification-message="error"]') .hasText('whoops… that did not work!'); }); needs to be reset after the test!
42. Error Handling Tests function setupFetchRestore(hooks) { let oldFetch; hooks.beforeEach(function () { oldFetch = window.fetch; }); hooks.afterEach(function () { window.fetch = oldFetch; }); }
43. Error Handling Tests module('Component | LikeButton', function(hooks) { setupRenderingTest(hooks); setupMirage(hooks); setupFetchRestore(hooks); !// !!... });
44. Error Reporting CSI: Sentry 🕵
45. Stacktrace Browser & Operating System Error Message git commit
46. Error Reporting Sentry sentry.io TrackJS trackjs.com Bugsnag bugsnag.com Rollbar rollbar.com ... and more
47. How to setup Sentry in Ember.js apps simplabs.com/blog/2019/07/15/sentry-and-ember/
48. Error Reporting import * as Sentry from '@sentry/browser'; class LikeButton extends Component { @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new Error('HTTP request failed'); } } catch (error) { this.notifications.error('whoops… that did not work!'); Sentry.captureException(error); } } }
49. Error Reporting import * as Sentry from '@sentry/browser'; class LikeButton extends Component { @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new Error('HTTP request failed'); } } catch (error) { this.notifications.error('whoops… that did not work!'); Sentry.captureException(error); } } } do we want to send ALL errors to Sentry?
50. Error Types • Network Error expected • HTTP 5xx Server Errors expected • HTTP 4xx Client Errors mostly unexpected • JSON Errors unexpected • Other Errors unexpected
51. Error Types • Network Error expected • HTTP 5xx Server Errors expected • HTTP 4xx Client Errors mostly unexpected • JSON Errors unexpected • Other Errors unexpected ✅ ❌ ✅ ❌ ✅ ( ✅ ) ✅ ✅ ✅ ✅ Notification Error Reporting
52. Error Reporting class LikeButton extends Component { @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new Error('HTTP request failed'); } } catch (error) { this.notifications.error('whoops… that did not work!'); if (!isNetworkError(error) !&& !isServerError(error)) { Sentry.captureException(error); } } } }
53. Error Reporting class LikeButton extends Component { @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new Error('HTTP request failed'); } } catch (error) { this.notifications.error('whoops… that did not work!'); if (!isNetworkError(error) !&& !isServerError(error)) { Sentry.captureException(error); } } } } but how?
54. Error Reporting function isNetworkError(error) { return error instanceof TypeError; }
55. Error Reporting function isNetworkError(error) { return error instanceof TypeError; } can catch more than intended… 🤷
56. Error Reporting class LikeButton extends Component { @task *likeTask() { try { let response = yield fetch('/like', { method: 'POST' }); if (!response.ok) { throw new HttpError(response); } } catch (error) { this.notifications.error('whoops… that did not work!'); if (!isNetworkError(error) !&& !isServerError(error)) { Sentry.captureException(error); } } } }
57. Error Reporting export class HttpError extends Error { constructor(response) { let message = `HTTP request failed with: ${response.status} ${response.statusText}`; super(message); this.status = response.status; } } function isServerError(error) { return error instanceof HttpError !&& error.status !>= 500; }
58. Summary Error Handling • Use a notification system • Use an error reporting service • Throw HttpError for HTTP error responses • Only send unexpected errors to your error reporting service
59. TOBIAS BIENIEK github.com/Turbo87 Please wait… Oh, It Didn’t Work! 😱 SIMPLABS simplabs.com