Meteor 错误

由 北公爵无欢 创建，路飞 最后一次修改 2016-08-12 错误仅使用浏览器标准的 alert() 对话窗去警告用户他们的提交有错误有那么一点不令人满意，而且显然不是一个良好的用户体验。我们可以做得更好。相反，让我们建立一个更加灵活的错误报告机制，来更好地在不打断流程的情况下告诉用户到底发生了什么。我们要实现一个简单的系统，在窗口右上角显示新的错误信息，类似于流行的 Mac OS 应用程序 Growl。介绍本地集合一开始，我们需要创建一个集合来存储我们的错误。既然错误只与当前会话相关，而且不需要以任何方式长久存在，我们要在这做点新鲜的事儿，创建一个本地集合（Local collection）。这意味着，错误 Errors 集合将会只存在于浏览器中，并且将不作任何尝试去同步回服务器。为实现它，我们在 client 文件夹中创建错误（确保这集合只在客户端存在），我们将它的 MongoDB 集合命名为 null （因为集合的数据将不会保存在服务器端的数据库中）：// 本地（仅客户端）集合Errors = new Mongo.Collection(null);一开始，我们应该建立一个可以储存错误的集合。介于错误只是对于当前的会话，我们将采用及时性集合。这就意味着错误集合只存在于当前的浏览器，该集合不会与服务端同步。既然集合已经建立了，我们可以创建一个 throwError 函数用来添加新的错误。我们不需要担心 allow 和 deny 或其他任何的安全考虑，因为这个集合对于当前用户是“本地的”。throwError = function(message) { Errors.insert({message: message});};使用本地集合去存储错误的优势在于，就像所有集合一样，它是响应性的————意味着我们可以以显示其他任何集合数据的同样的方式，去响应性地显示错误。显示错误我们将在主布局的顶部插入错误信息：<template name="layout"> <div class="container"> {{> header}} {{> errors}} <div id="main" class="row-fluid"> {{> yield}} </div> </div></template>让我们现在在 errors.html 中创建 errors 和 error 模版：<template name="errors"> <div class="errors"> {{#each errors}} {{> error}} {{/each}} </div></template><template name="error"> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert">×</button> {{message}} </div></template>Twin 模版你可能注意到我们在一个文件里面建立了两个模板。直到现在我们一直在遵循“一个文件， 一个模板”的标准，但对于 Meteor 而言，我们把所有模板放在同一个文件里也是一样的（但是这会让 main.html 的代码变得非常混乱！）。在当前情况下，因为这两个错误模板都比较小，我们破例将它们放在一个文件里，使我们的 repo 代码库更干净些。我们只需要加上我们的模板 helper 就可以大功告成了！Template.errors.helpers({ errors: function() { return Errors.find(); }});你可以尝试手动测试我们的新错误消息了。打开浏览器控制台，并输入：throwError("我就是一个错误!");两种类型的错误在这一点上，重要的是要把“应用级（app-level）”的错误和“代码级（code-level）”的错误区别开来。应用级错误一般是由用户触发，用户从而能够对症采取行动。这些包括像验证错误、权限错误、“未找到”错误，等等。这是是那种你希望展现给用户，以帮助他们解决他们刚刚遇到的任何问题的错误。代码级错误，作为另一种类型，是实际的代码 bug 非期待情况下触发的，你可能不希望将错误直接呈现给用户，而是通过比如第三方错误跟踪服务（比如 Kadira）去跟踪错误。在本章中，我们将重点放在处理第一种类型的错误，而不是去抓虫子（bug）。创建错误我们知道怎样显示错误，但我们还需要在发现之前去触发错误。实际上我们已经建立了良好的错误情境：重复帖子的警告。我们简单地用新的 throwError 函数去替代 postSubmit 事件 helper 中的 alert 调用：Template.postSubmit.events({ 'submit form': function(e) { e.preventDefault(); var post = { url: $(e.target).find('[name=url]').val(), title: $(e.target).find('[name=title]').val() }; Meteor.call('postInsert', post, function(error, result) { // display the error to the user and abort if (error) return throwError(error.reason); // show this result but route anyway if (result.postExists) throwError('This link has already been posted'); Router.go('postPage', {_id: result._id}); }); }});既然到此，我们也针对 postEdit 事件 helper 做同样的事情：Template.postEdit.events({ 'submit form': function(e) { e.preventDefault(); var currentPostId = this._id; var postProperties = { url: $(e.target).find('[name=url]').val(), title: $(e.target).find('[name=title]').val() } Posts.update(currentPostId, {$set: postProperties}, function(error) { if (error) { // display the error to the user throwError(error.reason); } else { Router.go('postPage', {_id: currentPostId}); } }); }, //...});亲自试一试：尝试建立一个帖子并输入 URL http://meteor.com。因为这个 URL 已经存在了，你可以看到：清理错误你会注意到错误消息在几秒钟后自动消失。这是因为本书开头我们往样式表中添加的一些 CSS 而产生的魔力：@keyframes fadeOut { 0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;}}//....alert { animation: fadeOut 2700ms ease-in 0s 1 forwards; //...}我们定义了一个有四帧透明度属性变化（分别是 0%、10%、90% 和 100% 贯穿整个动画过程）的 fadeOut CSS 动画，并附在了 .alert class 样式。动画时长为 2700 毫秒，使用 ease-in 效果，有 0 秒延迟，运行一次，当动画完成时，最后停留在最后一帧。动画 vs 动画你也许在想为什么我们使用基于 CSS 的动画（预先定义，并且在我们应用控制以外），而不用 Meteor 本身来控制动画。虽然 Meteor 的确提供插入动画的支持，但是我们想在本章专注于错