Trouble with IndexDB lesson...

[zipzit]

I'm working the online tutorial. Somebody put a whole lot of time into this. Thank you, thank you.

I'm not sure what's going on, but I'm struggling with getting the Indexed DataBase (IDB) stuff to work. The issue only occurs when using a person Object store method with custom index. The actual presentation page I'm currently on is: https://classroom.udacity.com/courses/ud899/lessons/6381510082/concepts/63774101670923

To reproduce the issue:

1. Clone this repository
2. git reset --hard
3. git checkout task-idb-people

run the server via npm run serve

Open two browser tabs in Chrome. One tab points to http://localhost:8888/ and the other points to http://localhost:8888/idb-test . Open up the developers tools within the browser for each of those tabs.

I can't get the new Person Objectstore to run correctly. I'm seeing too many JavaScript errors. In chrome [ Google Chrome Version 61.0.3163.100 (Official Build) (64-bit)] the error is: (and repeated numerous times in a single refresh...)

idb.js:23 Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': The object store uses out-of-line keys and has no key generator and the key parameter was not provided.
    at http://localhost:8888/js/idb-test.js:24:29
    at new Promise (<anonymous>)
    at promisifyRequestCall (http://localhost:8888/js/idb-test.js:23:13)
    at ObjectStore.ProxyClass.(anonymous function) [as put] (http://localhost:8888/js/idb-test.js:57:16)
    at http://localhost:8888/js/idb-test.js:369:15
    at <anonymous>

When I run the same page in Chrome Canary [Google Chrome Version 64.0.3255.3 (Official Build) canary (64-bit)], it seems to be working fine. I understand that Canary is more advanced than Chrome, but if that is the case, is the IDB technology really deployable in this decade for users using the more common Chrome browser?

And I don't mean to be ungrateful. Many thanks to the authors and presenters for a well thought out and presented class on Offline web applications.

(edit)
Still struggling with the lessons and the IndexedDB stuff... odd errors.. and the official solutions fail. I'm up to lesson 'Using IDB 2'.. to reproduce the errors after 'solving' that lesson:

git reset --hard
git checkout task-clean-db

And I'm getting mixed results on both Chrome and Canary. Its not clear if I'm doing something wrong, or there have been changes to elements or the browser that make this stuff fragile. Many thanks to anyone who can clarify what's going on.

[zipzit]

Edit #2. I finished the course, but still see many different errors in console log. At one point, I did reset all content in node_modules per this issue via the command rm -rf node_modules && npm cache clean --force && npm install . That certainly made improvements in the console error rate.

You can reproduce the issues via:

git reset --hard
git checkout cache-avatars

npm run serve

That fixed many errors, but a few remain. I see the following errors hundreds of times, generally when the server is in offline mode. Its not clear why these aren't warnings.

WebSocket connection to 'ws://localhost:8888/updates?since=1509669321090&' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
IndexController._openSocket @ main.js:2298
(anonymous) @ main.js:2321

and

prelude.js:1 Uncaught (in promise) TypeError: Failed to fetch
Promise rejected (async)
(anonymous) @ index.js:68
Promise resolved (async)
(anonymous) @ index.js:67
Promise resolved (async)
serveAvatar @ index.js:66
(anonymous) @ index.js:51
17:35:30.924 

[jakearchibald]

I can't recreate the issues in your original comment, which makes me wonder if you wrote some incorrect code in the database upgrade steps, and haven't updated the database version after making changes.

Try using "clear storage" in the "application" tab in devtools. This will remove the database and all other origin storage.

[jakearchibald]

Closing – feel free to reopen if you have more feedback