Problems with Local Storage Manager

niam · September 2, 2020, 2:40pm

Wappler Version : 3.2.1
Operating System : OS X 10.15.6

Expected behavior

What do you think should happen?
After adding the Local Storage component, web page should open without errors.

What actually happens?
I see the error in the console and page (frontend and editor) is blank, as soon as I remove the component, everything works fine.

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at localManager.js:28
    at Array.reduce (<anonymous>)
    at n.getData (localManager.js:26)
    at n.render (localManager.js:22)
    at n.constructor (BaseComponent.js:20)
    at n (appConnect.js:488)
    at n.e.hasOwnProperty.e.constructor (appConnect.js:521)
    at new n (appConnect.js:488)
    at n.$addChild (BaseComponent.js:213)

report_2020-8-2_17-37-15.zip (221.0 KB)

Teodor · September 2, 2020, 2:41pm

Can you please paste the whole page code when you add the local storage component / when this error appears?

niam · September 2, 2020, 2:51pm

Sure

    <!doctype html>
<html is="dmx-app">

<head>
	<meta name="ac:route" content="/:page/:qr?">
	<base href="/">
	<script src="dmxAppConnect/dmxAppConnect.js"></script>
	<meta charset="UTF-8">
	<title>Untitled Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
	<script src="js/jquery-3.4.1.slim.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
	<script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
	<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
	<script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
	<script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Pacifico" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js" defer=""></script>
	<script src="dmxAppConnect/dmxLazyLoad/lazysizes.min.js" defer=""></script>
</head>

<body id="qrpage" style="background:#f2f2f2;">
<dmx-local-manager id="local1"></dmx-local-manager>

	<dmx-serverconnect id="getqrcode" url="api/getqrcode" dmx-param:page="query.page" dmx-on:success="session1.set('donate',getqrcode.data.api1.data)"></dmx-serverconnect>




	<div is="dmx-browser" id="browser1"></div>
	<dmx-serverconnect id="serverconnect1" url="api/qrcode" dmx-param:page="query.page"></dmx-serverconnect>
	<section class="container-fluid mt-auto mb-auto">

		<div class="container mb-0">
			<div class="row align-items-center justify-content-center mt-5 mb-0">
				<div class="col-3 ml-0">
					<img dmx-bind:src="serverconnect1.data.page.userpic" class="img-fluid rounded" width="60" height="60">
				</div>


			</div>
			<div class="row justify-content-center mt-0 mb-1 pt-0">
				<div class="mt-3 col-9 text-center">
					<h4 class="font-weight-bolder">Hey, I'm {{serverconnect1.data.page.username}}</h4>


				</div>
			</div>
			<div class="row row-cols-7 justify-content-center align-items-center w-auto mt-4">
				<div class="justify-content-center text-center align-self-center offset-0 rounded border-white rounded-lg bg-transparent col-12 mt-n4 pt-0 pb-0 pl-0 pr-0" id="qrcode">

					<p dmx-html="getqrcode.data.api1.data">

					</p>
				</div>
			</div>
			<div class="row align-items-center justify-content-center no-gutters text-center mt-0">
				<div class="col">
					<button id="btn1" class="btn btn-dark text-center btn-sm pt-2 pb-2">;<i class="fa fa-heart"></i></button>
				</div>
			</div>

		</div>
		<div class="row text-center justify-content-center mt-4">
			<footer class="navbar-light container text-center">
				<nav class="navbar navbar-expand-lg navbar-light bg-transparent justify-content-center">
					<a class="navbar-brand w-auto ml-0 mr-0" href="#" style="font-size:28px;"></a>
				</nav>
			</footer>
		</div>




	</section>

	<script src="bootstrap/4/js/popper.min.js"></script>
	<script src="bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>

niam · September 3, 2020, 5:22pm

Exactly the same thing happens after adding and removing Session storage manager.
Wappler 3.2.2

Teodor · September 3, 2020, 5:42pm

@patrick will check this

patrick · September 10, 2020, 1:58pm

Sorry for responding this late. The error message tells that it got an error when it tried to parse the data stored in the session/local storage. It is stored as a json serialized string and the is being parsed back when reading from it. Seems that in your case it contains invalid json.

I should probably do some better error handling. If you still have this error then please check the content of the local/session storage using devtools. In Chrome you find that under the Application tab. Alternative you can just type localStorage or sessionStorage in the console to inspect them. The data used by App Connect are stored under keys prefixed with dmxState-.

niam · September 10, 2020, 2:16pm

Hey @patrick,
Thanks for the hint

patrick · September 15, 2020, 8:47am

Have updated the plugin, it should now not throw an error, instead it now shows a warning in the console when it can’t parse the value stored in the storage and skip it.

dmxStateManagement.zip (1.3 KB)

niam · September 15, 2020, 8:57am

Thanks!

Teodor · September 18, 2020, 7:48am

Fixed in Wappler 3.3.2

Teodor · September 19, 2020, 3:00pm

This topic was automatically closed after 31 hours. New replies are no longer allowed.