[terra-base] Web App Loads Blank

[rrrxr6]

Bug Report

Description

Our React web app loads blank in windows server 2012 r2 environments. Issue starts with:
terra-base-5.22.0
terra-i18n-4.18.0

Lower versions work just fine.

Steps to Reproduce

Launch a web app that uses terra-base-5.22.0 and terra-i18n-4.18.0 (or greater) in a windows server 2012 environment.

Expected Behavior

App is not blank.

Environment

• Component Version:5.22.0
• Browser Name and Version: Internet Explorer 11
• Node/npm Version [e.g. Node 8/npm 5]: Node 9.11.1 / npm 5.8.0
• Webpack Version: 4.29.3
• Operating System and version (desktop or mobile): windows server 2012 r2

Additional Context / Screenshots

Only started happening recently so a windows security patch could also be at play.

Possible Solution

my current solution is to lower the version of terra-base and terra-i18n

Mentions

Dave Kasper

[ShettyAkarsh]

I don't think so this is an issue related to terra components. i am able to load our terra-ui page in windows server 2012 r2 machine once i add the url under trusted sites of Internet explorer .

[cbeeman]

I'm seeing the same issue as well. In one of my components, 5.2.0 terra-base with 4.1.0 terra-i18n works fine. However, in our package.json, we were pointing to "^5.2.0" terra-base. When building the jar that holds the webapp, it pulled in 5.23.0 of terra-base, and the component is now rendered blank.

[StephenEsser]

Is there any information/error available in the developer console when the page is rendered blank?

[cbeeman]

In my testing, no, there is no console error unfortunately.

[ryanthemanuel]

Unfortunately without a console log this is going to be tricky to debug. Can you try adding an error boundary to your top level to see if there's something that can be output that way? Also, can you compare the dependencies that you are pulling in with the different versions of terra-base to see if there's anything else that's different (using npm list or comparing package locks)?

[cbeeman]

I looked at logs of previous successful releases/builds of the jar:

• Last known recorded version of imported terra-base where the webapp still renders: 5.18.0.
• Earliest known recorded version of imported terra-base where it starts failing: 5.24.0. This is the version where I was most skeptical of due to the orion-fusion-theme changes listed in the changelog.

In both cases, the terra-i18n version was set to 4.1.0.

I'll work to see if I can add the error boundary changes and report back.

[rrrxr6]

Just found out that if I use the versions I stated above that break, but remove
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
from my html, then the page loads fine. The use of that meta tag appears to be pervasive across my org though.

[cbeeman]

Just an update, I keep playing around with the suggested ApplicationErrorBoundary, but haven't seen an error displayed just yet. I'll keep playing around, but right now it's unlikely we're going to be seeing an error. @rrrxr6, does your webapp allow you to see an error?

[cbeeman]

As @rrrxr6 noted originally, I also confirmed and narrowed the issue down to terra-base 5.22.0 and terra-i18n 4.18.0, as 5.21.0 and 4.17.0 render the component just fine.

I was able to recreate the original blank window issue (sometimes it's not recreateable reliably in testing scenarios), and unfortunately adding in ApplicationErrorBoundary yielded no errors (still just a blank window). Below is the gist of how I implemented the ApplicationErrorBoundary to the top level, so I'm not sure if it's an issue with ReactDOM or not.
ReactDOM.render( <ApplicationErrorBoundary> <Base locale={locale}> <Presenter ... /> </Base> </ApplicationErrorBoundary>, container,

[emilyrohrbough]

Here are the terra-i18n changes that occurred between 4.17 and 4.18. There was a bug fix for additional local data that needed to load in IE 10. I suggest installing v4.17 and slowly adding in these changes to narrow down what is causing the issue.

[emilyrohrbough]

I would also like to ask, which locales does your app support and can you confirm the translation assets are available to be loaded in the browser?

[cbeeman]

Thanks, @emilyrohrbough, I'll look into the changes.

Just putting it out there as a possibility, a few months ago one of our engineers implemented an "Intl.Collator" in the code to include some sorting functionality, and in the process, the window started rendering blank because Intl.Collator did not behave well with the 2012 R2 environment.

I see in that commit, there was the inclusion of Intl.DateTimeFormat and Intl.Format. Since DateTimeFormat, Format, and Collator are all i18n-related standard objects, but it could potentially be what is at fault here.
a5c42eb#diff-a55d6ca7900cf77c903df0e59d562ed2R6-R7

[emilyrohrbough]

It could be at fault if our polyfill is not getting loaded on the page.... Is your project providign a intl implementation?

Intl. DateTimeFormat and Intl.NumberFormat should have been polyfilled by the intl polyfill we included here.

Collator isn't supported by the polyfill we use and we don't reference it out terra or int he dependencies we are pulling in.

[ryanthemanuel]

@rrrxr6 @cbeeman are you around to go to office hours today for this?

[rrrxr6]

I'll swing by

[cbeeman]

Just an update, I've been working with @ryanthemanuel and we got the application to print out an error log. Not much, but it finally exists!

TypeError: Intl is not available

[emilyrohrbough]

@cbeeman I googled typeerror: intl is not available windows server 2012 r2
and this was the first article.

Changes in v4.17 to v4.18 removed the try-catch block for loading.

@ryanthemanuel and I talked and I will be creating a snapshot with some fixes to see if re-adding the try-catch will resolve the issue for you. I'll reach out when I have that work done.

[emilyrohrbough]

@cbeeman I have made the try-catch changes and pushed them to this branch.

I have validated these changes maintain the existing functionality in Chrome and in IE 11 in IE 10 Emulation mode with the IE 10 user agent.

Can you please validate these changes resolve the issue for your project? Here the the snapshot references you can pull into your project to test these changes:

"terra-base": "https://github.cerner.com/terra/terra-snapshots/blob/master/terra-core/add-try-catch-i18n/terra-base.tgz?raw=true",
"terra-i18n": "https://github.cerner.com/terra/terra-snapshots/blob/master/terra-core/add-try-catch-i18n/terra-i18n.tgz?raw=true",

[cbeeman]

Yay! That worked! The window is now loading just fine on the 2012 R2 box with those updates. Thank you so much.

[emilyrohrbough]

Awesome! I just sent out the PR can you also comment on the PR that this has resolved the issue just to close the loop? We are hoping to get this merged & released by next week.

@rrrxr6 It'd be great if you can validate this as well.