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

Question

这是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 文件无论如何都能执行？

Answer 1

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

Answer 2

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

Answer 3

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

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

function errorIgnorer() {
   return true;
}

window.onError = errorIgnorer;

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

Answer 4

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

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

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

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

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