Q&A
どういうエラーですか?
console.log() で表示されているメッセージなのですか? 何かが throw されているのですか?
前提
Nuxt.js (javaScript) を使用して p5.js のプログラムを書いて実行する環境を作っています。
iframe を使って p5.js を読み込んでいます。
実現したいこと
実行時にエラーが発生した場合、画面に表示したいです。
発生している問題・エラーメッセージ
エラー発生時にコンソールに表示されるエラーを取得して画面に表示したい。
考えた方針：
①エラーをコンソールに表示すると同時に内容を取得する。
②コンソールに表示された内容を取得する。
どちらでも良いのですが、いずれにせよ実現方法がわかりません。
処理のフロー
サイトにアクセス
↓
画面表示（iframeやテキストエリアなどの各コンポーネントを表示）
↓
テキストエリアにコードを記入し実行ボタンを押下
↓
文字列を置換する関数が実行され iframe の srcdoc が更新
↓
p5js が実行、エラーがあればコンソールに表示
該当のソースコード
親コンポーネントのテキストエリアに書かれた p5.js 用のコードを取得して
以下のコードの '<script></script>' を置換 ( '<script>' + code + '</script>' ) することで実行しています。
javaScript
1<template> 2 <iframe id="result" :srcdoc="htmlDoc" class="result" /> 3</template> 4 5<script> 6export default { 7 data() { 8 return { 9 name: 'Result', 10 msg: 'Result', 11 htmlDoc: 12 '<!DOCTYPE html>' + 13 "<html lang='ja'>" + 14 '<head>' + 15 "<meta charset='utf-8'>" + 16 '</head>' + 17 '<body style="margin:0;padding:0;">' + 18 "<script src='/p5.js/p5.min.js'\><\/script>" + 19 '<script><\/script>' + 20 '</body>' + 21 '</html>' 22 } 23 } 24} 25</script>
試したこと
以下を参考に試してみましたが結果は変わらず、コンソールに表示されました。
補足情報（FW/ツールのバージョンなど）
nuxt のバージョンは 2.15.4, p5.js のバージョンは 0.7.2 です。
エラーサンプル
たとえば、テキストエリアで以下のように宣言していない変数を使用して実行すると iframe には何も表示されませんが console では "Uncaught ReferenceError: x is not defined" が表示されます。
javaScript
1let position_x = 10; 2 3function setup() { 4 createCanvas(600, 400); 5} 6 7function draw() { 8 stroke(0, 0, 0); 9 rect(x, 100, 60, 60); 10 11 position_x += 5; 12}
この "Uncaught ReferenceError: x is not defined" をコンソールを確認しなくてもわかるように画面表示したいです。
質問後にやったこと１（解決せず）
イベントリスナを設定してみましたが、結果が以前と何も変わらなかったです。リスナ内の console.log() が実行されていないようなのでリスナが動作していない？のではないかと思います。
javaScript
1<script> 2export default { 3 data() { 4 return { 5 name: 'Result', 6 msg: 'Result', 7 htmlDoc: 8 '<!DOCTYPE html>' + 9 "<html lang='ja'>" + 10 '<head>' + 11 "<meta charset='utf-8'>" + 12 '</head>' + 13 '<body style="margin:0;padding:0;">' + 14 "<script src='/p5.js/p5.min.js'\><\/script>" + 15 '<script><\/script>' + 16 '</body>' + 17 '</html>' 18 } 19 }, 20 mounted() { 21 document 22 .getElementsByTagName('iframe')[0] 23 .contentWindow.addEventListener('error', event => { 24 console.log('addEventListener', event) 25 }) 26 } 27} 28</script>
質問後にやったこと２（解決）
以下のイベントリスナを srcdoc 更新時に毎回埋め込むよう( htmlDoc の '<script></script>' を置換後、以下のタグを追加 ) に修正。
javaScript
1<script> 2 window.addEventListener('error', (event) => { 3 console.log('error:', event); 4 }) 5</script>
回答1件
0
ベストアンサー
iframeの window に対して、error イベントリスナを登録し、その中でイベントの情報を画面に表示しましょう。
投稿2022/07/21 03:43
編集2022/07/21 03:58総合スコア20884
試してみましたが結果は変わらずでした。コードは質問に追記しています。
console.log()が実行されていないのでリスナが動作していないのだと思います。
他に考えられることはありますでしょうか。
どういうタイミングでエラーのあるスクリプトが実行されるのかいまいち理解してないのですけども、contentWindow.addEventLisetner() はエラーが出るスクリプトが実行されるよりも前に実行する必要があります。
mounted() なので DOM が生成されたタイミング（下の①の部分）で実行されるのではないかと思います。
処理タイミングについて言葉足らずですみません。以下のようになっています。
----
サイトにアクセス
↓
画面表示（iframeやテキストエリアなどの各コンポーネントを表示）
↓
①：イベントリスナの登録
↓
テキストエリアにコードを記入し実行ボタンを押下
↓
文字列を置換する関数が実行され iframe の srcdoc が更新
↓
p5js が実行、エラーがあればコンソールに表示
srcdoc を更新すると contentWindow は入れ替わる気がしますよ。
もしそうなら、addEventListener() のコードも htmlDoc に埋め込む必要がありますね。
htmldoc に埋め込むことで解決しました。大変助かりました。ありがとうございます！
あなたの回答
tips
プレビュー
