如何使 JS 错误不会阻止 Trix 工作？

Posted 2023-03-07

【中文标题】如何使 JS 错误不会阻止 Trix 工作？

【英文标题】：How do I make that JS errors don't prevent Trix from working?

【发布时间】：2020-08-11 22:51:31

【问题描述】：

这是related to this question。

我发现有一些 JS 文件抛出了一个错误，似乎阻止了 Trix 正确执行（或根本无法执行）。

这就是我的app/javascript/packs/application.js 的样子：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()

window.Rails = Rails

import '../src/popper.min'
import '../src/jquery.min'
import 'bootstrap'

import '../src/aos'
// import '../src/clipboard.min'
// import '../src/jquery.fancybox.min'
// import '../src/flatpickr.min'
// import '../src/flickity.pkgd.min'
// import '../src/ion.rangeSlider.min'
// import '../src/isotope.pkgd.min'
// import '../src/jarallax.min'
// import '../src/jarallax-video.min'
// import '../src/jarallax-element.min'
// import '../src/jquery.countdown.min'
// import '../src/jquery.smartWizard.min'
// import '../src/plyr.polyfilled.min'
// import '../src/prism'
// import '../src/scrollMonitor'
// import '../src/smooth-scroll.polyfills.min'
// import '../src/svg-injector.umd.production'
// import '../src/svg-injector'
// import '../src/twitterFetcher_min'
// import '../src/typed.min'
// import '../src/theme'

$(document).on("turbolinks:load", () => 
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
)

import "controllers"

require("trix")
require("@rails/actiontext")

我尝试将require("trix") 调用放在此文件的顶部，但它仍然不起作用。

考虑到这里所有的 JS 依赖项，我是否可以确保 trix 和 actiontext 文件无论如何都能执行？

【问题讨论】：

1) I tried putting the require("trix") calls at the top of this file and it still doesn't work. - 它以什么方式失败了？ 2) 为什么要在导入中使用失败的js 文件？如果有任何失败，那么不仅trix，而且失败之后的所有代码和所有导入都不会被执行。 3) 一个最小的可重现示例将不胜感激（最好在一些在线 REPL 上）

删除$(document).on("turbolinks:load", () => $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() )还会出现这种情况吗？

您收到的实际错误信息是什么？

【参考方案1】：

试试这个通用答案：在 *.js 文件中逐行注释

【参考方案2】：

您可以尝试将非功能代码放在 try-catch 中，并将要执行的文件放在 finally 块中，而不管 try-catch 结果如何

【参考方案3】：

您可以通过覆盖window.onerror 函数来告诉您的浏览器忽略Javascript 错误。通常不建议这样做，因为它可能会导致意外行为，并且通常最好让代码在没有错误的情况下运行。错误处理是个好东西！

话虽如此，这将阻止错误导致您的脚本停止运行。

function errorIgnorer() 
   return true;


window.onError = errorIgnorer;

MDN docs 表示某些事件侦听器仍会触发，无论如何。在这些情况下，您也可以使用类似的方法来消除错误处理。

【参考方案4】：

考虑到这里的所有 JS 依赖项，我是否可以确保 trix 和 actiontext 文件无论如何都被执行？

不，所有文件都必须正常运行。

当然，您可以将它们包装在 try catch 块中，但如果您需要它们为您的应用程序提供功能，这可能行不通。

$(document).on("turbolinks:load", () => $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() )

如果你删除上面的代码，它仍然会发生吗？那并不真正属于那里（请参阅代码顶部的 webpack 评论）

【讨论】：

是的，如果我删除该代码，它仍然会发生。还有其他想法吗？

@marcamillion 如果你不提供任何额外的信息，我怀疑会有任何额外的想法。如果您留下您的问题，那么我在下面的评论就是您的答案：trix 或任何东西都没有办法也没有理由被执行。错误应该被修复，而不是避免。