Template JS is stripped with a syntax error

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X, 7.1.10 DXP FP5, 7.1.10 DXP FP9, Master
• Fix Version/s: 7.0.0 DXP FP82, 7.0.10.12 DXP SP12, 7.0.X, 7.1.3 CE GA4, 7.1.10 DXP FP11, 7.1.X, Master
• Component/s: Site Templates
• Labels:
  • backend_test
  • ee-ts
  • liferay-fixpack-de-82-7010
  • liferay-fixpack-dxp-11-7110
• Branch Version/s:
  7.1.x, 7.0.x
• Backported to Branch:
  Committed
• Story Points: 1
• Fix Priority: 4
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/71946
• What problem did the customer find?:
  Hide

  The customer found that the DOM has been stripped of bad code when it goes through the process of minification. ; ; When a developer implements bad code in the template and uses that template, the minifier would strip the code if it contains errors. Currently when the javascript code goes through `compress()`, it returns an empty string for two reasons (1) code is empty or (2) code contains error(s). ; ; The customer wants to see their bad code in the DOM so that it would be more convenient to find the error.

  Show

  The customer found that the DOM has been stripped of bad code when it goes through the process of minification. When a developer implements bad code in the template and uses that template, the minifier would strip the code if it contains errors. Currently when the javascript code goes through `compress()`, it returns an empty string for two reasons (1) code is empty or (2) code contains error(s). The customer wants to see their bad code in the DOM so that it would be more convenient to find the error.
• What do you think is the root cause? (if known):
  Hide

  Closure Compiler returns an empty string when there is error in the code. So when the code goes through the compiler and contains an error, the compiler will swallow the bad code and spit out an empty string. ; ; The bad code does not get displayed in the DOM because it has been swallowed during minification.

  Show

  Closure Compiler returns an empty string when there is error in the code. So when the code goes through the compiler and contains an error, the compiler will swallow the bad code and spit out an empty string. The bad code does not get displayed in the DOM because it has been swallowed during minification.
• Proposed solution (if any):
  Hide

  My thoughts then are to check if the compiler has found errors, and if so, it would return the bad code instead of swallowing it. ; ; But this also brings up concerns of the possible consequences that this fix would entail. The changes committed may affect other components that use GoogleJavascriptMinifier since it's being called through StripFilter. We just want a fix that concerns one component (journal) but the fix may actually affect other components that we would not want to change. ; ; Would there be another suggested solution or is this not a concern?

  Show

  My thoughts then are to check if the compiler has found errors, and if so, it would return the bad code instead of swallowing it. But this also brings up concerns of the possible consequences that this fix would entail. The changes committed may affect other components that use GoogleJavascriptMinifier since it's being called through StripFilter. We just want a fix that concerns one component (journal) but the fix may actually affect other components that we would not want to change. Would there be another suggested solution or is this not a concern?

Description

When adding JavaScript with a syntax behavior into a structure/template, JavaScript is stripped from html with no errors in the console. This makes it difficult to pin point where the error is coming from as well as find where the error is in the JS code itself. 

Steps to Reproduce

1. Create a structure/template. Add script tag with code that contains syntax error to template. 
2. Create web content article for this structure/template. 
3. Add article to a new page. 
4. Refresh the page
5. Inspect article body with developer tools (go down the line within portlet-body). 
6. Check if associated script tag contains any code in html and executes any of your JS code.

Expected Result 
Code exists between associated script tags with console error

Actual Result 
Associated script tags is empty with no new console error after refreshing