open-data-rescue / climate-data-rescue

Climate Data Rescue is an archival data rescue platform using Ruby on Rails.
https://citsci.geog.mcgill.ca
MIT License
14 stars 9 forks source link

Javascript Error Pop-up - Instagram Embed code #250

Closed raakal closed 2 weeks ago

raakal commented 4 years ago

When loading https://citsci.geog.mcgill.ca/fr/connect/blog a Pop-up appears to submit a crash report.

Screen Shot 2020-07-10 at 2 19 15 PM

It only appears on the live production site on the French side, on both the public facing site and back-end where the page is edited. It does not appear on the test site in either English or French. Occurs on Chrome and Safari, not tested on Firefox as of yet. What is supposed to happen is what you see when loading https://citsci.geog.mcgill.ca/en/connect/blog (ie. no crash report pop-up). You can exit out of the pop-up by clicking the 'close' link to the right of the blue 'Submit Crash Report' button several times.

It was determined that this report represents a Javascript error and it is connected to the Instagram embeds which are used in two blog posts, representing 6 embed codes. This was determined by commenting out the code snippets referring to the instagram embeds. When this was done, the pop-up stopped.

It was suggested that this issue could be occurring due to the accents that are used in the French text on the page.

The code snippets are as follows (same order as in the original code):

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/Bsbpx1bjQ0z/embed/?cr=1&amp;v=12&amp;wp=990&amp;rd=https%3A%2F%2Ftest.citsci.geog.mcgill.ca&amp;rp=%2Fen%2Fadmin%2Fstatic_pages%2F30%2Fedit#%7B%22ci%22%3A0%2C%22os%22%3A43561.45999999717%2C%22ls%22%3A43195.74500003364%2C%22le%22%3A43200.88500005659%7D" allowtransparency="true" allowfullscreen="true" frameborder="0" height="818" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"></iframe>

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-1" src="https://www.instagram.com/p/B-lRqJXJPuz/embed/captioned/?cr=1&amp;v=12&amp;wp=990&amp;rd=https%3A%2F%2Ftest.citsci.geog.mcgill.ca&amp;rp=%2Fen%2Fadmin%2Fstatic_pages%2F30%2Fedit#%7B%22ci%22%3A1%2C%22os%22%3A43588.955000042915%2C%22ls%22%3A43195.74500003364%2C%22le%22%3A43200.88500005659%7D" allowtransparency="true" allowfullscreen="true" frameborder="0" height="782" data-instgrm-payload-id="instagram-media-payload-1" scrolling="no" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"></iframe>

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-2" src="https://www.instagram.com/p/B6vuimrgjVy/embed/captioned/?cr=1&amp;v=12&amp;wp=990&amp;rd=https%3A%2F%2Ftest.citsci.geog.mcgill.ca&amp;rp=%2Fen%2Fadmin%2Fstatic_pages%2F30%2Fedit#%7B%22ci%22%3A2%2C%22os%22%3A43598.12000009697%2C%22ls%22%3A43195.74500003364%2C%22le%22%3A43200.88500005659%7D" allowtransparency="true" allowfullscreen="true" frameborder="0" height="868" data-instgrm-payload-id="instagram-media-payload-2" scrolling="no" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"></iframe>

<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-3" src="https://www.instagram.com/p/BpP9RyonMN8/embed/captioned/?cr=1&amp;v=12&amp;wp=990&amp;rd=https%3A%2F%2Ftest.citsci.geog.mcgill.ca&amp;rp=%2Fen%2Fadmin%2Fstatic_pages%2F30%2Fedit#%7B%22ci%22%3A3%2C%22os%22%3A44183.96000005305%2C%22ls%22%3A43195.74500003364%2C%22le%22%3A43200.88500005659%7D" allowtransparency="true" allowfullscreen="true" frameborder="0" height="916" data-instgrm-payload-id="instagram-media-payload-3" scrolling="no" style="background: white; max-width: 540px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid rgb(219, 219, 219); box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;"></iframe>

rsmithlal commented 4 years ago

@raakal, when you use the embed iframes, do you still get the issue if you only use one javascript tag?

raakal commented 4 years ago

@rsmithlal I think so? At the end of the last iframe there was a From what I could tell, it required just that line after an embed, and wouldn't work when I put it at the end of each embed, so I left it off of the ones that came after. If I recall correctly, I just searched for tips online for embedding instagram into a web page and used what instagram provided with their embed feature to do so. (I also looked at what another website did to embed an instagram post)

balen commented 1 year ago

@VickyS08 is this still an issue?