How Does One Diagnose A React White Screen On Mobile After Build?

Question

Note: This is NOT a React Native question. It's referring to ReactJS (regular React for making frontend websites).

Also, the target website I will reveal is www.superstoreglobal.com

I ran a build on a ReactJS site. The website shows up on desktop perfectly fine but on mobile I am getting a blank white screen.

Thinking that I could easily solve this by solving all the "warnings" did nothing to fix it.

I was not able to locate the reason for this.

How can one diagnose an issue such as this when there is no F12/developer tools on mobile safari/chrome?

Please help.

Update1: browserstack solution did not reveal any errors in the console.

Update2: removing the "natural" package solved the problem.

Answer 1

update:

I was able to reproduce the white screen bug while connected to the web inspector. As I suspected, it only happens on (iPhone iOS) Safari:

It seems to be some JavaScript that is only conditionally executed on Safari? The error is: "SyntaxError: Invalid regular expression: invalid group specifier name."

Luckily, the JS file was not minified so the offending JS can be examined:

However, this regular expression seems to be valid and work in (PC desktop) Chrome:

So maybe the regular expression uses JS Regex features that are not available on Safari? Safari's JS engine tends to be relatively outdated. Anyways, due to this JS bug React never renders any components and HTML/body height is 0.

I was able to inspect this blank screen bug using both the free and paid methods to connect iOS Safari to a PC as I described below.

The next step I would take is to try removing the natural package and confirm that is actually the reason the site doesn't work on iOS Safari.

---

Perhaps www.superstoreglobal.com uses HTML/CSS that is not supported by iOS Safari:

• Blank, white screen on an iPhone.
• Rendered fine on Android mobile device.
• Rendered fine on PC desktop Chrome.
• No Mac to test with...

When I tried to reload on the iPhone while connected to dev tools on my PC, the URL stopped working on all platforms due to error 504 gateway time out. So I couldn't inspect and investigate further...

How to connect iOS Safari mobile to PC/MAC web inspector:

• With a Mac
• With a PC (Paid method; free trial)
• With a PC (Free method)

Also: React Developer Tools is a browser extension that gives additional React-specific debugging information:

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

Answer 2

Safari is throwing this error

SyntaxError: Invalid regular expression: invalid group specifier name(anonymous function) @ 0.chunk.js:100751

Which leads us to this line of code.

  let tokens = text.match(/(?<=\s+|^)["'‘“'"[({⟨]?(.*?[.?!])(\s[.?!])*["'’”'"\])}⟩]?(?=\s+|$)|(?<=\s+|^)\S(.*?[.?!])(\s[.?!])*(?=\s+|$)/g);

The issue here is the beginning of that expression. These characters (?<=ABC) called the positive look behind, are not supported in safari, mobile or desktop.

I also tested in Safari Technology preview, and it didn't work there either.

Answer 3

You can debug android/ios on your system using the following ways. You'll be able to see the developer console in the browser of your desktop for the mobile device website. For more details visit the following websites for device-wise debugging.

https://developer.chrome.com/docs/devtools/remote-debugging/ https://www.browserstack.com/guide/safari-remote-debugging