Munchkin is not defined の原因 #JavaScript

エラー検知ツールの Sentry でエラーログを見てるとき、↓のエラーが20万件弱発生していた。

Munchkin is not defined

Munchkinというのは、マーケティングオートメーションツールのMarketoのトラッキングをしたいときに使うScriptで、
公式ドキュメントに書いてあったようにCDNから munchkin.js を読み込んで、ページの読み込み時に初期化して使っている。

<script type="text/javascript" src="//munchkin.marketo.net/munchkin.js"></script>
<script>Munchkin.init('munchkinAccountId');</script>

CDNで読み込んだ関数を呼び出してるだけなので特にエラーが頻発するようには見えず、、、
実際、チームメンバーの誰の環境でもエラーは再現できませんでした。

is not defined と言われてるので、関数が定義されてない状態で init() が実行されてるんだろうけど、
同期的に読み込まれてるので、CDNが読まれる前に関数を実行してるわけでもないし。。

Developer toolで回線速度を落としても特に関係なく。。

原因

悪戦苦闘した後にたどり着いた原因が、ブラウザのAdBlock系のプラグインでした😭
AdBlockerを入れてるとMunchkinのCDNにアクセスできず、 Munchkin が参照できずにエラーが起きていました。

解決策

window objectに Munchkin が存在するか判定してから、 init()　を実行するようにしました。

  (function() {
    function initMunchkin() {
      if (!('Munchkin' in window)) {
        return;
      }
      Munchkin.init('munchkinAccountId');
    }

    initMunchkin();
  })();