Javascript error thrown from uiComponent 'notification_area' if messages are malformed

[sylvainraye]

A javascript error is thrown from the uiComponent notification_area in Magento backend when the parameter $content of the class \Magento\Ui\TemplateEngine\Xhtml\Result::wrapContent is empty or false. As the parameter is provided, no PHP error is thrown and the parameter doesn't have a strict type like string.
The javascript error blocks all others frontend behavior.

The \Magento\Ui\TemplateEngine\Xhtml\Result::wrapContent method return a requireJs dependency but cause of the empty/false value, javascript throw this error:

Uncaught SyntaxError: Unexpected token } in JSON at position 33
    at JSON.parse (<anonymous>)
    at getNodeData (scripts.js:87)
    at Array.map (<anonymous>)
    at scripts.js:117

The position 33 is the following javascript piece of code returned by the method \Magento\Ui\TemplateEngine\Xhtml\Result::wrapContent

{"*": {"Magento_Ui/js/core/app": }}

Preconditions

1. Magento 2.2.3
2. PHP 7.1
3. MariaDB 15.1
4. MAMPro with Apache 2.4
5. A notification message providing a potential json_encode error

Steps to reproduce

1. Have a notification providing a json_encode error as this one will return false if not successful:
   We discovered a third party module from Wyomind providing this issue because the notification message has the following content (see attachment) with a malformed UTF8 and

[notification_area_data_source] => Array
(
	[type] => dataSource
	[name] => notification_area_data_source
	[dataScope] => notification_area
	[config] => Array
		(
			[data] => Array
				(
					[totalRecords] => 3
					[items] => Array
						(
							[0] => Array
								(
									[identity] => 474f763ee31e264fe88a0b2acedb275d
									[severity] => 1
									[created_at] => 2018-04-20 18:13:56
									[text] => One or more of the Cache Types are invalidated: Blocks HTML output, Collections Data.  Please go to <a href="http://domain.test/admin/admin/cache/index/key/b4b91dcc283814b9c86c4e7bdb5974e6ff54c94e725fe0b936344f634e294f4d/">Cache Management</a> and refresh cache types.
								)

							[1] => Array
								(
									[identity] => cf26fc7b5a6e6f0ad76fc5826c76deef
									[severity] => 1
									[created_at] => 2018-04-20 12:33:11
									[text] => <div style='padding-bottom:5px;'><b> Wyomind Data Feed Manager</b> <br> Your license is not yet activated.<br><a target='_blank' href='https://www.wyomind.com/license_activation/?licensemanager=3.5.0&method=post&rv=11.4.0.2&cv=11.4.0.2&namespace=datafeedmanager&activation_key=�'���l`N�G��+�2�������a��R�س�&domain=https://domain.test/&magento=2.2.3'>Activate it now !</a></div>
								)

							[2] => Array
								(
									[identity] => da332d712f3215b9b94bfa268c398323
									[severity] => 2
									[created_at] => 2018-04-20 12:30:52
									[text] => Magento\Framework\Phrase Object
										(
											[text:Magento\Framework\Phrase:private] => One or more <a href="%1">indexers are invalid</a>. Make sure your <a href="%2" target="_blank">Magento cron job</a> is running.
											[arguments:Magento\Framework\Phrase:private] => Array
												(
													[0] => http://domain.test/admin/indexer/indexer/list/key/f5b0ff91d68e33fa09e9173fefb2718926d23f12df3e5025079da3aff57824db/
													[1] => http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands-cron.html#config-cli-cron-bkg
												)

										)

								)

						)

				)

			[update_url] => http://domain.test/admin/mui/index/render/key/031c5f717bde8027453f0ab6d9c0ba30e1d7cbadce8561efe538f9e86e1dcb6d/
			[component] => Magento_Ui/js/grid/provider
			[storageConfig] => Array
				(
					[indexField] => identity
				)

			[aclResource] => Magento_AdminNotification::show_list
			[params] => Array
				(
					[namespace] => notification_area
				)

		)

)

)

Expected result

1. No javascript error thrown thanks to a try/catch and log the issue
2. A way to catch json_encode error and provide the issue in console.log

Actual result

Uncaught SyntaxError: Unexpected token } in JSON at position 33
    at JSON.parse (<anonymous>)
    at getNodeData (scripts.js:87)
    at Array.map (<anonymous>)
    at scripts.js:117

Js position 33 is:
{"*": {"Magento_Ui/js/core/app": }}

There is json_encode function called at \Magento\Ui\TemplateEngine\Xhtml\Result::appendLayoutConfiguration to encode the configuration in json, however in some cases it can return false if any issue happens. The function json_last_error_msg() permits to determine what was the last error returned. In my case, it was a Malformed UTF-8 characters, possibly incorrectly encoded issue

Solution:

One of the solution is of course making sure that no error can happen in json_encode, however a platform like Magento support third parties extension and those may provide issue, it's important to reduce the fields of blocking issue. So, in the case of the notification_area, it's better to totally not display the notifications but inform at least the user that there is a blocking issue by displaying an error message in the notification area then they should contact the admin instead of blocking completely the backend cause of this javascript error.

As workaround, we did temporary the following into the method \Magento\Ui\TemplateEngine\Xhtml\Result::wrapContent

    protected function wrapContent($content)
    {
        if (empty($content)) {
            return '';
        }

        return '<script type="text/x-magento-init"><![CDATA['
        . '{"*": {"Magento_Ui/js/core/app": ' . str_replace(['<![CDATA[', ']]>'], '', $content) . '}}'
        . ']]></script>';
    }

[acampos1916]

I've been experiencing this exact problem this week (M2.2.1). I too am using a Wyomind extension.

Your workaround at least allowed me to use the admin.

[powierski]

Having the same issue, also have the Wyomind extension installed.

Can confirm the above solution/workaround resolves the issue.

[AlekosDordas]

I've been experiencing this exact problem this week (M2.2.1). I too am using a Wyomind extension.

Your workaround at least allowed me to use the admin.

The empty $content return ' ' gave me a warning in the dashboard. I changed it instead to the following, and it didn't give me any kind of warning.

        if (empty($content)) {
            return '<script type="text/x-magento-init"><![CDATA[{}]]></script>';
        }

(P.s i used a Wyomind extension as well)