ember.js - 应用程序级处理

ember.js - application level handling

我有一个 Ember.js 3.8 应用程序,我希望在其中进行应用程序级错误处理。我已经阅读了似乎是 relevant part of the documentation 的内容,但它并没有像我预期的那样工作。

我有一个组件来测试它:

异常-creator.hbs

<div class="panel panel-info">
  <div class="panel-heading">Development Only - Exception Creator</div>
  <div class="panel-body">
    <p>Press the button below to create an exception</p>
    <button {{action 'throw' }}>Throw an Exception</button>
  </div>
</div>
{{yield}}

异常-creator.js

import Component from '@ember/component';

export default Component.extend({
  actions: {
    throw(){
      alert("About to throw an exception");
      throw new Error('Whoops!');
    }
  }
});

并且(根据我对 doco 的阅读)我创建了一条路线 application-error

应用-error.hbs

<h1>Error Handler</h1>
<p>This is the error handler</p>
{{outlet}}

应用-error.js

import Route from '@ember/routing/route';

export default Route.extend({
});

按下按钮时,我希望(在警报之后)重新路由到 application-error 模板……但我没有。实际发生的是调试控制台显示 "Uncaught Error: Whoops!".

有人能告诉我哪里错了吗?


编辑

@stevenelberger 向我展示了正确的路径后,我现在有了一个工作版本,我将把它放在这里,以便其他人将来可能会从中受益(并不是说它有很多好处,但它可能帮助某人)。

我创建了一条新路线exception-testing-route

异常测试-route.js

import Route from '@ember/routing/route';

export default Route.extend({
  model() {
    throw new Error('Whoops - something bad happened at exception-testing-route');
  },
   actions: {
    error(error, transition) {
      console.log("The action 'error' is firing in the route exception-testing-route.");
      console.log("About to return true to bubble the error.");
      return true;
      }
  },
});

异常测试-route.hbs

{{outlet}}

使 error 操作 return 为真会导致错误冒泡,在本例中为 application-error 路由

应用-error.js

import Route from '@ember/routing/route';

export default Route.extend({

  setupController(controller, error) {
    console.log("application-error setupController firing");
    console.log(error.message);
    this._super(...arguments);
  }

});

应用-error.hbs

<h1>Error Handler</h1>
<p>This is the error handler</p>
{{outlet}}

调用异常测试路由会导致以下处理顺序。

我相信您可能错过了这部分文档:

As with the loading substate, on a thrown error or rejected promise returned from the [...] route's model hook (or beforeModel or afterModel) Ember will look for an error template or route...

为了澄清而添加了强调。您的代码目前正在从操作中抛出错误,但如果错误或被拒绝的承诺是 thrown/returned 来自路由的 modelbeforeModel,则 Ember 只会路由到错误状态或 afterModel 钩子(也可能来自转换,尽管文档对此有点模棱两可,我现在没有时间测试)。

因此,要到达应用程序错误路由,您需要在某些路由的 modelbeforeModel 或 [=12] 中抛出错误或 return 拒绝承诺=] 勾.