Chartkick + Rails 7 (Turbo) + Heroku

Question

我有一个使用 Turbo 的 Rails 7 应用程序。我使用 Chartkick (+ Chart.js) 并在我的页面上放置了一些图表。

在我的本地设置中一切正常，但部署到 Heroku 后我遇到了一个奇怪的问题。

当我通过在 URL 栏中输入 URL 来访问包含图表的页面时，图表会正确加载。但是，当我使用某些链接导航到包含图表的页面时，图表仅显示“正在加载...”。当我在链接上禁用涡轮增压 () 时，图表也可以工作。所以涡轮有一些问题。

我可以在 JS 控制台中运行

Chartkick

，它为我提供了一个包含页面上所有图表的对象。在图表不起作用的情况下，这不会返回任何图表，因此我什至无法执行

chart.redraw()

。

再次强调，这仅适用于 Heroku。在我的本地开发设置中，一切都运行良好。

我用谷歌搜索了很多，但没有结果。知道从哪里开始调查这个吗？

Answer 1

您在 Heroku 上的 Rails 7 应用程序中遇到的 Chartkick 和 Turbo 问题似乎与 Turbo 如何处理页面导航和脚本执行有关。 Turbo 会干扰正常的页面加载过程，影响 Chartkick 等 JavaScript 库初始化和呈现内容的方式。以下是调查并可能解决此问题的一些步骤：

1. Turbo 事件：确保 Chartkick 使用 Turbo 的页面导航正确初始化。 Turbo 使用 Ajax 加载页面内容，这会导致某些 JavaScript 无法正确执行。监听 Turbo 的特定事件（如 Turbo:load）来初始化 Chartkick。示例：

    document.addEventListener("turbo:load", function() {
       // Initialize or reinitialize Chartkick here
    });
   

2. JavaScript 初始化：仔细检查您的 Chartkick JavaScript 初始化代码是否针对 Turbo 构建正确。它可能适用于传统的全页面重新加载（如您的本地环境中所示），但不适用于 Turbo 的部分页面加载。

3. 资产编译：验证您的资产是否已正确编译并在 Heroku 上提供。有时，本地环境和生产环境在资产处理方面的差异可能会导致此类问题。

4. Heroku 日志：检查 Heroku 日志，了解导航到包含图表的页面时发生的任何错误或警告。在终端中使用 heroku logs --tail 查看实时日志。

浏览器开发工具中的网络选项卡：导航到图表页面时检查网络请求。查找加载 JavaScript 文件时是否存在任何失败的请求或问题。
Turbo 配置：检查您的 Turbo 配置以确保它不会无意中阻止 Chartkick 脚本的执行。
JavaScript 控制台错误：出现问题时在浏览器控制台中查找任何 JavaScript 错误。这可以提供有关问题所在的线索。
版本检查：确保您使用的是 Rails、Turbo、Chartkick 和 Chart.js 的兼容版本。有时，版本不匹配可能会导致意外行为。
缓存问题：Heroku 的缓存机制可能会提供过时的 JavaScript 文件。尝试清除缓存或进行更改部署以强制刷新缓存。
后备选项：如果问题仍然存在，作为最后的手段，您可以考虑禁用通向图表页面的链接的 Turbo，尽管这更多的是一种解决方法而不是解决方案。