Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prying Open The Black Box (EmberConf 2018)

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!

Godfrey Chan

March 14, 2018
Tweet

More Decks by Godfrey Chan

Other Decks in Programming

Transcript

  1. Godfrey chan

    View full-size slide

  2. @chancancode

    View full-size slide

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

    View full-size slide

  4. ⛔ 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 full-size slide

  5. ⛔ 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 full-size slide

  6. ⛔ 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 full-size slide

  7. Look, no
    more error!

    View full-size slide

  8. isExercise
    isExercise

    View full-size slide

  9. p
    ause on
    exceptions
    isExercise
    isExercise

    View full-size slide

  10. p
    ause on
    exceptions

    View full-size slide

  11. It me
    isExercise
    isExercise
    isExercise

    View full-size slide

  12. w
    at
    isExercise
    isExercise
    isExercise
    isExercise

    View full-size slide

  13. OOPSIE
    isExercise
    isExercise
    isExercise
    isExercise

    View full-size slide

  14. Nailed it
    isExercise
    isExercise

    View full-size slide

  15. Y tho
    isExercise
    isExercise
    isExercise

    View full-size slide

  16. naice
    OHHHH
    isExercise
    isExercise
    isExercise

    View full-size slide

  17. ⛔ 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. Did you know...

    View full-size slide

  21. Continuation

    View full-size slide

  22. I need to
    go here

    View full-size slide

  23. Debug functions

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. Templates & UI

    View full-size slide

  28. {{#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 full-size slide