複数のコンポーネントを含む AEM ページがあります。これらのコンポーネントには、すべてのクライアント側ロジックを囲む関数を含む .js ファイルがあります。次に、コンポーネントの HTML 内でその関数を呼び出します。
<script>
window.bootstrap_component(function() {
init_component_name();
});
</script>
前に述べたように、init_component_name は、必要なすべてのロジックを含む関数の名前です。
function init_component_name() {
//DO STUFF
}
ラッパーの bootstrap_component 関数は、すべてのページの共有 head.html で次のように定義されています。
<script>
window.bootstrap_component = function (handler) {
if (typeof handler === 'function') {
if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
handler();
} else {
document.addEventListener("DOMContentLoaded", function() {
handler();
});
}
}
}
</script>
これは問題なく動作し、実際の問題はありませんが、最近、エラーの監視とレポートに Bugsnag を使用し始めました。ほぼすべてのコンポーネントについて、ページで ReferenceError というレポートを取得しています。
これが発生していると私が考える理由は、init_component_name() 関数が script タグ内で宣言されていないためです。このため、function(init_component_name) がウィンドウ オブジェクトにアタッチされており、正常に実行されており、コンソール エラーは表示されません。
私が正しければ、これらのスクリプト タグをこのように変更することはできますか?
<script>
window.bootstrap_component(function() {
window.init_component_name();
})
</script>
私の同僚は、init_component_name 関数に 1 ミリ秒程度のタイムアウトを追加したいと考えていますが、それは私を間違った方法でこすります。もっと賢明なアプローチはありますか?