search

PRX / theworld.org

React/Next.js frontend for theworld.org
https://theworld.org
Mozilla Public License 2.0
1 stars 0 forks source link

Stories with TikTokEmbed throwing 500, `navigator` undefined #468

Open kookster opened 3 days ago

kookster commented 3 days ago

reported in this slack https://prx.slack.com/archives/CR59F3MU2/p1720188868004629 I see this in the application logs in AWS/AMP

2024-07-05T15:24:37.741Z    ReferenceError: navigator is not defined
2024-07-05T15:24:37.741Z    at TikTokEmbed (/var/task/.next/server/chunks/5913.js:1:84825)
2024-07-05T15:24:37.741Z    at Wc (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
2024-07-05T15:24:37.741Z    at Zc (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
2024-07-05T15:24:37.741Z    at Z (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
2024-07-05T15:24:37.741Z    at $c (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
2024-07-05T15:24:37.741Z    at bd (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
2024-07-05T15:24:37.741Z    at Z (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
2024-07-05T15:24:37.741Z    at $c (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
2024-07-05T15:24:37.741Z    at Zc (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
2024-07-05T15:24:37.741Z    at Z (/var/task/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)

Issue seems to be trying to use the navigator object from SSR, at this line of code: https://github.com/PRX/theworld.org/blob/wordpress/components/TikTokEmbed/TikTokEmbed.tsx#L18

without checking for it to be defined, as is done in the player code: https://github.com/PRX/theworld.org/blob/wordpress/components/Player/Player.tsx#L255

perhaps if it is not present we could default to en-US, or get the language value from an http request header?

kookster commented 3 days ago

Example failing stories:

https://theworld.org/stories/2024/05/13/donerflation-outcry-in-germany-over-rising-cost-of-doner-kebab

https://theworld.org/stories/2024/06/03/mexico-makes-history-electing-its-1st-woman-president-claudia-sheinbaum