在 Ember / Ember Data 应用程序中捕获（失败）net::ERR_NAME_NOT_RESOLVED

Question

我正在开发一个使用 Ember 数据的 Ember 应用程序。我们主要使用 Rails 和 Postgres 作为后端，但一小部分数据存储在 WordPress 后端。 WordPress 正在 wp.example.com 上运行。

Ember Data 设置为可与 Rails 和 WordPress 后端一起使用，因此我可以执行以下操作：

// Get WordPress category by slug
this.store.query('wordpress/category', { slug }).then((models) => {
  // Leave page if no category was found
  if (typeof models.get('firstObject') == 'undefined') this.transitionTo('backupRoute');

  return models.get('firstObject');
});

现在我想知道如果wp 子域处于脱机状态，我该如何捕捉错误。

当我更改 WordPress 后端 URL 时（我不确定这是否是模拟失败的最佳方法），几秒钟后我在 Chrome DevTools 中收到 (failed)net::ERR_NAME_NOT_RESOLVED 并且 Ember 显示错误 500。相反，我会喜欢捕捉网络错误并做一些有用的事情，在本例中是重定向。

有没有办法捕捉这些错误？添加一个简单的catch() 会完全破坏页面。当有一个未决的请求时，它会保持白色约两分钟，然后显示 502 Bad Gateway。我也在日志中得到了这个：

my_service_1 | (node:1) UnhandledPromiseRejectionWarning: [object Object]
my_service_1 | (node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 13)

Answer 1

这个问题出现在今天的May I Ask a Question 节目中。

这些代码示例来自 Octane 风格的应用程序并具有 Octane 语法，但这些功能在旧版 Ember 中也可用。

Ember 的一些内置功能将在此处为您提供帮助：Loading and Error Substates 和错误事件。

首先，您需要抛出错误。然后你需要添加一个错误动作，并说明发生错误时应该发生什么。当您的请求出错时，错误事件会自动触发，您可以将转换代码放在那里。错误事件处理是 Ember 路由的一个特性。

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ArticlesOverviewRoute extends Route {
  @service store;

  model(params) {
    return this.store.query('wordpress/category', { slug }).then((models) => {
      if (typeof models.get('firstObject') == 'undefined') {
        throw new Error("Sorry, there was a problem")
      };
    });
  }

  @action
  error(error, transition) {
    this.transitionTo('backupRoute')
  }
};

或者，如果您的目标是显示错误页面，您可以做一些更简单的事情。使用以下命令创建错误模板：ember g template error。这将创建一个模板文件app/templates/error.hbs。在模板中添加一些文本，例如“哎呀！”，这样您就可以在它工作时看到它。

您仍然需要抛出错误以便 Ember 能够注意到它，但您不再需要错误操作。 Ember 会自动路由到错误模板。

export default class ArticlesOverviewRoute extends Route {
  @service store;

  model(params) {
    return this.store.query('wordpress/category', { slug }).then((models) => {
      if (typeof models.get('firstObject') == 'undefined') {
        throw new Error("Sorry, there was a problem")
      };
    });
  }
};

错误模板可以存在于许多不同的路径中。指南包含所有详细信息，但一般来说，您可以将它们放在您的路线文件夹中，例如 some-route/error.hbs 或者您可以将它们放在应用程序的根目录中，就像我们对 ember g template error 所做的那样