问题标签 [phoenix-live-view]

我在仍然处于测试阶段的Phoenix LiveView库中玩得很开心。我感到困惑的一件事是如何确保我的 LiveView 在发生异常时以可预测和透明的方式运行。

在传统的基于 HTTP 请求的世界中，我希望该特定请求会崩溃，返回 500 响应以及可能向用户指示“嘿，服务器出现问题”的错误页面。开发人员可以依靠集成，例如Rollbax检测和报告异常，因此我会收到一封有关错误的电子邮件，并且可以在 Rollbar 仪表板中检查它。

但是当我的 LiveView 代码崩溃时，我无法得到这种保证。LiveView 进程将从崩溃中恢复并（据我了解）恢复到其最后一个已知的健康状态，这真的很酷，但也会让用户感到沮丧（例如，“每次我提交表单时，它都会向我显示一个加载图标恢复为空白表格”）。而且我不清楚如何在 LiveView 中检测或捕获异常，以便将它们报告给像 Rollbar 这样的错误监控服务。（缺少不切实际的解决方案，例如向rescue每个处理程序添加一个）

如何检测 LiveView 中发生的异常，以便 a) 以某种方式提醒最终用户该问题，以及 b) 确保将异常报告给开发人员？

我有一个简单的实时视图，它计算表中的行数并显示它。它得到了更新，而且效果很好。但我想向用户展示某种动画。例如，当数字增加时，数字会“闪烁”或快速模糊。

我尝试了 onchange="something"，但这对我不起作用。

这是实时视图代码：

知道我该怎么做吗？目前我对动画的细节不感兴趣，只是我如何将更改信息发送到前端。

我的 LiveView 渲染中出现了一个奇怪的问题。以下是作为流程发生的情况：

1. 我从第一个选择中选择任何非默认选项，将第二个选择保留为默认 -> 我将搜索表单提交到 LiveView -> 在重新加载的带有新条目的屏幕上，我再次为第一个选择选择默认选项，将第二个选择保留为默认 -> 我提交我的搜索表单到 LiveView -> 第二个选择消失
2. 我从第二个选择中选择任何非默认选项，将第一个选择保留为默认 -> 我将我的搜索表单提交到 LiveView -> 在重新加载的带有新条目的屏幕上，我再次选择第二个选择的默认选项，将第一个选择保留为默认 -> 我提交我的搜索表单到 LiveView -> 首先选择消失
3. 我从两个选择中选择任何非默认选项 -> 我将我的搜索表单提交到 LiveView -> 我清除向 LiveView 提交clear事件的字段 -> 我将我的搜索表单与第一个和第二个选择的默认值提交到 LiveView -> 两个选择都消失了

通过说消失，我的意思是消失 - 在 chrome 开发人员工具中的元素中，选择器应该在的地方只是空的。

我认为问题是在为字段分配值时引起的，这是我生成选择的代码：

@form_vals是来自先前请求的值，这些值是为表单加载以保持其状态的。我确定它们通过了，但我不确定它们是否具有良好的格式。进入 LiveView 的参数格式：

离开 LiveView 的参数格式为form_vals：

向 LiveView发送clear事件时，我只需使用明确的字段值进行响应：

如果有人知道为什么我的选择器消失了，我会非常感激让我知道。我真的被困住了，不知道我该怎么办。

在正常路线中：

get /index, MyController, :index

Plug.Conn我可以简单地从's path_info 函数中获取路线。

但是，如果我有实时路线，如何检索当前路径？

live /index, IndexLive

很抱歉这篇长文，我试图提供所有信息并解释我已经尝试过的内容。

问题： 我将经典的凤凰视图放入实时视图中。虽然一切看起来都很好，但 echart 只是在完成绘画后就消失了。好像没有办法挽回了。

这是我的图表。如您所见，我尝试将它也与phx:update-event 挂钩。但这无济于事...... graph.js：

这是html（graph.html.leex）。如您所见，为了安全起见，我什至将数据放在另一个 div 中。

还有直播

ttnmessages 甚至从未更新。ttnmessage 很少更新。滴答声不负责任，我尝试禁用它。

图表消失之前（在页面加载期间） 和之后 有趣的是，当我尝试编辑元素 css 并添加红色背景颜色时，当勾选时。

window.updateGraph()从浏览器控制台调用不会使图形重新出现，但会打印出updating the graph....

我知道我可以通过包含以下内容来更新实时视图：

但是，有没有办法从我的应用程序的其他地方触发它？

例如，如果您正在更新流量统计信息，您只想在新的点击到达时更新控件。

我有一个 Phoenix LiveView，其表单不受数据层支持，如下所示：

我无法使用变更集支持表单，因为我没有使用 Ecto。提交表单后，提交处理就好了，但是表单textarea没有被清除。如何在不使用 Javascript 的情况下清除输入？

如果没有 Javascript 就无法做到这一点，我如何使用Javascript 做到这一点，但又不绕过 LiveViewphx-submit机制？

一些额外的故障排除信息：

这是我的事件处理程序：

我尝试了几种不同的方法来解决这个问题，主要涉及支持表单的数据结构的变化。

• 我试过用地图支持表格。这是行不通的，因为表单必须由实现Phoenix.HTML.FormData协议的结构支持，而 Phoenix 只为Plug.Conn和Atom
• 我尝试过使用结构，但这与地图的原因相同
• 我没有Conn在我的表单中使用，因为这是一个 LiveView，但我可以Conn在 LiveView 控制器中创建一个，所以我做到了。我用它支持表单并在事件处理程序中传递一个新实例以进行后期创建。这并没有解决问题。
• 最后，我将其更改textarea为 a text_input，并在提交表单时立即清除此输入。所以看起来问题是特定于textarea元素的。我不确定这是否是 Phoenix 的错误。

使用 Phoenix 实时视图文档，我添加了一个用于编写实时表单应用程序的实时页面。有一个非常简单的演示：

服务器端代码（就像文档一样）：

问题是在我单击或向服务器发出消息<td contenteditable后，值将被恢复。-+

1. 为什么-或+影响<td>的价值？是不是最小化修改了dom数据？
2. 这种场景有最佳实践吗？

谢谢！

UPDATE
将 contenteditable 添加为数据模型后，它仍然不起作用，例如：
1. html 片段

2. 后端

如果单击或，@somedata也会恢复为 $001 。-+

我有一个 Phoenix (1.4) LiveView (0.8) 应用程序，我希望在启动服务器时自动打开浏览器窗口。有谁知道这是否可以做到，如果可以，怎么做？

我尝试查看是否可以像为 FE 应用程序所做的那样在 Webpack 中配置该选项，但我无法让它工作。

谢谢！

所以我正在尝试制作一个phoenix live view 应用程序，当我尝试将它实施到我已经存在的项目中时遇到了一个问题。我使用 phoenix.html 提供的 form_for 制作了一个表单，它在我的 live socket 上向服务器发出一个 post 请求。我不认为这不应该发生，因为我成功完成了演示，它允许我发布到实时视图。这是错误：

这是实时控制器：（test_live.ex）

这是 test.html.leex：

所以我尝试做其他事情，这是一个仅使用 html 和属性的表单：

令我惊讶的是，这种形式不会引发 no route 错误。但是，它仍然没有调用我在 test_live.ex 中定义的 handle_event 函数

这是我的路由器：

任何帮助表示赞赏。谢谢！