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. ! TV Station Operator " TV Station Manager # Hawaii-EMA

    Staff 1 $ Hawaii-EMA Staff 2 % Hawaii-EMA Supervisor Drill FUUUUU
  2. ⛔ 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)
  3. ⛔ 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)
  4. ⛔ 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)
  5. ⛔ 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
  6. 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
  7. 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!`); } }, // ... });
  8. 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
  9. 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
  10. <li>{{#link-to "settings.app" model.app}}People &amp; Settings{{/link- {{#if model.app.oss}} <li class="oss-link"><a href={{ossUrl}}

    target="_blank">Public Link< {{/if}} </ul> </div> {{/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 <div class="endpoints-list"> {{#unless model.isFullyLoaded}} <div class="loading"> {{loading-spinner}} </div>