こんにちは、Procom開発チームです。
今回は、開発環境で突如発生したInstagram埋め込みが表示されなくなるエラーについて、記録として残しておきたいと思います。結論から言えば、原因は不明のままですが、最終的に自然復旧しました。こういうこともあるんですね……。
🌀発生した現象
開発環境（ローカル）で InstagramEmbed コンポーネントが急に表示されなくなるという現象が発生しました。具体的には：
- InstagramのURLは正しく入力されている
- Firestoreからの読み込みも成功
- DOMにも
blockquote.instagram-media要素が挿入されている https://www.instagram.com/embed.jsスクリプトも読み込まれている
にもかかわらず、何も表示されない。
🐛consoleの警告
以下のようなエラーが出力されていました：
Uncaught Invariant Violation: Minified invariant #47458;
調べても、Instagramの内部スクリプトで発生しているようで、詳細なエラー原因はわからず。
🛠 試したこと
window.instgrm.Embeds.process()を再実行- scriptタグを毎回削除して再挿入
<blockquote>タグの再生成- 他のInstagram URLを試す
- 開発モード・本番モードを切り替える
- ブラウザキャッシュ削除
- embed.js のバージョン確認
- Procom側の構造や表示条件の再確認
しかし、どれも効果なし。
🤯最終的に
「BannerLinksBlock」など他の作業をしているうちに、突然またInstagramが表示されるようになりました。本番環境では一貫して表示されていたため、ブラウザやInstagramの一時的な仕様変更・API制限・キャッシュ・CDN遅延などの可能性もあります。
💡教訓
- SNS系の埋め込みは、外部依存が大きいため不安定さを想定しておくことが必要
embed.jsの読み込みとEmbeds.process()の実行タイミングは非常に繊細- 本番環境と開発環境での動作差も意外と起こる
✍️まとめ
今回は「突然表示されなくなり → 原因不明のまま復活」というモヤモヤする経験でしたが、同じような現象に悩む開発者の方の参考になれば幸いです。
もしProcomをご利用中の方で「Instagramが表示されない」と感じたら、URL形式やブラウザの状態、本番環境での挙動を一度ご確認ください。
Procom開発チームより。今後もこうした記録をブログでシェアしていきます！
