Prying Open The Black Box (EmberConf 2018)

When your code doesn't work the way you expect, it could be a frustrating exercise to figure out what exactly went wrong. In this session, we will walk through the process of debugging an Ember app. Along the way, we will learn about some of the tools and techniques that could help shed light on the behavior of our code.

Upon completing this orientation, you will be well-equipped to pry open the mysterious black box the next time your app misbehaves!

Transcript

1. Godfrey chan
   

   View Slide

2. @chancancode
   

   View Slide

3. DEBUGGING
   

   View Slide

4. failures
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. ! TV Station Operator
    " TV Station Manager
    # Hawaii-EMA Staff 1
    $ Hawaii-EMA Staff 2
    % Hawaii-EMA Supervisor
    Drill
    FUUUUU
    

    View Slide

12. ⛔ TypeError: Cannot read property 'get' of undefined (application.js:100)
    at Class.model (endpoints.js:41)
    at Class.deserialize (vendor.js:54008)
    at applyHook (vendor.js:71256)
    at UnresolvedHandlerInfoByParam.runSharedModelHook (vendor.js:71709)
    at UnresolvedHandlerInfoByParam.getModel (vendor.js:71943)
    at tryCatcher (vendor.js:73328)
    at invokeCallback (vendor.js:73506)
    at publish (vendor.js:73492)
    at vendor.js:64571
    at invoke (vendor.js:32075)
    

    View Slide

13. ⛔ Alert: Incoming missile detected (tv-station.js:3)
    at Class.model (endpoints.js:41)
    at Class.deserialize (vendor.js:54008)
    at applyHook (vendor.js:71256)
    at UnresolvedHandlerInfoByParam.runSharedModelHook (vendor.js:71709)
    at UnresolvedHandlerInfoByParam.getModel (vendor.js:71943)
    at tryCatcher (vendor.js:73328)
    at invokeCallback (vendor.js:73506)
    at publish (vendor.js:73492)
    at vendor.js:64571
    at invoke (vendor.js:32075)
    

    View Slide

14. ⛔ Alert: Incoming missile detected (tv-station.js:3)
    at ! StationOperator.broadcastMissileAlert (tv-station.js:3)
    at " StationManager.didReceiveMissileAlert (tv-station.js:15)
    at # EMAStaff.sendMissileAlert (ema.js:23)
    at $ EMAStaff.notify (ema.js:27)
    at % EMASupervisor.runDrill (ema.js:7)
    

    View Slide

15. View Slide

16. Look, no
    more error!
    

    View Slide

17. isExercise
    isExercise
    

    View Slide

18. p
    ause on
    exceptions
    isExercise
    isExercise
    

    View Slide

19. p
    ause on
    exceptions
    

    View Slide

20. It me
    

    View Slide

21. It me
    

    View Slide

22. It me
    isExercise
    isExercise
    isExercise
    

    View Slide

23. w
    at
    isExercise
    isExercise
    isExercise
    isExercise
    

    View Slide

24. OOPSIE
    isExercise
    isExercise
    isExercise
    isExercise
    

    View Slide

25. Nailed it
    isExercise
    isExercise
    

    View Slide

26. Y tho
    isExercise
    isExercise
    isExercise
    

    View Slide

27. naice
    OHHHH
    isExercise
    isExercise
    isExercise
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. ⛔ Alert: Incoming missile detected (tv-station.js:3)
    at ! StationOperator.broadcastMissileAlert (tv-station.js:3)
    at " StationManager.didReceiveMissileAlert (tv-station.js:15)
    at # EMAStaff.sendMissileAlert (ema.js:23)
    at $ EMAStaff.notify (ema.js:27)
    at % EMASupervisor.runDrill (ema.js:7)
    FUUUUU
    Drill
    

    View Slide

32. launch orbit re-entry
    FlightControl.reEntry
    commitDeorbitBurn
    roll
    ⛔ Emergency: loss of vehicle (mission-control.js:3)
    at Orbiter.onDestroy (orbiter.js:37)
    at Orbiter.executeRoll (orbiter.js:15)
    at Orbiter.commitDeorbitBurnSequence (orbiter.js:23)
    at FlightControl.reEntry (mission-control.js:27)
    at Mission.run (sts-107.html:7)
    planning
    Mission.run
    NO HOLE
    '
    ' ' '
    Hole on
    left wing
    

    View Slide

33. View Slide

34. STEP
    OVER!
    

    View Slide

35. STEP
    OVER!
    

    View Slide

36. STEP
    OVER!
    

    View Slide

37. STEP
    OVER!
    

    View Slide

38. STEP
    OVER!
    

    View Slide

39. STEP
    OVER!
    

    View Slide

40. STEP
    INTO
    

    View Slide

41. STEP
    INTO
    

    View Slide

42. STEP
    INTO
    

    View Slide

43. STEP
    OUT!
    

    View Slide

44. STEP
    OUT!
    

    View Slide

45. STEP
    OUT!
    

    View Slide

46. Resume
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. WOW!
    

    View Slide

56. APPLICATION ROUTE P
    ARENT ROUTE CHILD ROUTE
    APP BOOT
    DATA
    LOADED
    MISSING
    RELATIONSHIPS
    

    View Slide

57. Did you know...
    

    View Slide

58. BREAKPOINTS
    

    View Slide

59. CLICK
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. CLICK
    

    View Slide

64. CLICK
    

    View Slide

65. Continuation
    

    View Slide

66. I need to
    go here
    

    View Slide

67. View Slide

68. shut up!
    

    View Slide

69. View Slide

70. Click
    

    View Slide

71. Debug functions
    

    View Slide

72. import Route from '@ember/routing/route';
    export default Route.extend({
    beforeModel(params) {
    let collectorUrl = params.queryParams.collectorUrl;
    if (collectorUrl) {
    console.log(`Using collectorUrl ${collectorUrl}...`);
    this.set('config.collectorWsUrl', collectorUrl);
    } else {
    console.log(`Missing collectorUrl!`);
    }
    },
    // ...
    });
    

    View Slide

73. import Route from '@ember/routing/route';
    import { debug } from '@ember/debug';
    export default Route.extend({
    beforeModel(params) {
    let collectorUrl = params.queryParams.collectorUrl;
    if (collectorUrl) {
    debug(`Using collectorUrl ${collectorUrl}...`);
    this.set('config.collectorWsUrl', collectorUrl);
    } else {
    debug(`Missing collectorUrl!`);
    }
    },
    // ...
    });
    Dev
    only
    

    View Slide

74. import Route from '@ember/routing/route';
    import { assert, debug } from '@ember/debug';
    export default Route.extend({
    beforeModel(params) {
    let collectorUrl = params.queryParams.collectorUrl;
    assert(`Missing collectorUrl!`, collectorUrl);
    debug(`Using collectorUrl ${collectorUrl}...`);
    this.set('config.collectorWsUrl', collectorUrl);
    },
    // ...
    });
    Dev
    only
    

    View Slide

75. Templates & UI
    

    View Slide

76. {{#link-to "settings.app" model.app}}People & Settings{{/link-
    {{#if model.app.oss}}
    Public Link<
    {{/if}}
    
    
    {{/unless}}
    {{debugger}}
    {{#if model.error}}
    {{partial "endpoints/error"}}
    {{else}}
    {{#if model.app.isLocked}}
    {{partial "endpoints/locked"}}
    {{else}}
    {{app-overview-graph model=model.app timestamp=model.frozenTimestamp dur
    
    {{#unless model.isFullyLoaded}}
    
    {{loading-spinner}}
    
    

    View Slide

77. Click
    It me
    

    View Slide

78. View Slide

79. Click
    It me
    

    View Slide

80. View Slide

81. View Slide

82. DEBUGGING
    

    View Slide

83. Thank you
    

    View Slide