问StimulusJS -如何确保控制器有所有必要的目标？

EN

选项1-使用刺激调试器工具

刺激有一个debug模式，为刺激控制器注销信息/警告等。您可以通过stimulus.debug = true;启用此功能。

您可以通过this.application.logDebugActivity()在您自己的控制器中调用它-请参阅https://github.com/hotwired/stimulus/blob/main/src/core/application.ts#L95

export default class extends Controller {
  static targets = ['name'];

  connect() {
    if (!that.hasNameTarget) {
      this.logDebugActivity(this.identifier, 'error', { message: 'target missing'});
      throw new Error('expected to find name target');
    }
  }
}

选项2-使用window.onerror回调

如果将当前代码保存在抛出错误的位置，那么刺激将不会在可能的情况下“破坏”任何东西，因为刺激内的所有调用都使用try/catch。

但是，您可以通过创建一个onerror函数来确保您的错误做了一些“响亮”的事情。

见docs - https://stimulus.hotwired.dev/handbook/installing#error-handling

请参见一个示例，其中可以将其用于类似Sentry https://blog.sentry.io/2016/01/04/client-javascript-reporting-window-onerror之类的东西。

您也可以非常大声地用类似于此的东西来阻止UI。

window.onerror = (message, url, lineNo, columnNo, error) => {
   document.body.style.backgroundColor = 'red';
   window.alert(message);
}

催复函

记住，在本地开发中只启用这些调试特性，您可以使用Webpack环境变量这样做，但这将根据您的工具不同而有所不同。

但是，在生产中，您可能希望将onerror调用推到您所拥有的任何日志记录基础结构。

stimulus.debug模式是相当“嘈杂”的，可能是太多的信息，这取决于您的设置。