I think I'm missing something fundamental

[BryanB]

Hi,

I’ve been spinning my tires for a couple days now. I cannot seem to get any existing project to work as a web site app, and perhaps that’s the fundamental issue I’m missing. I upload everything I work on as an website using Web Hosting Manager, and maybe this cannot work with the DOM API? Must everything be a stand-alone App or run via localhost://p:3xxx?

First, I should mention I’m using SAFE Browser alpha-2 and Web Hosting Manager alpha-2 in 64-bit Linux (Mint specifically, a fork of Ubuntu). Both are built from the master branches of the respective repos with NODE_ENV=dev to use mocknet. My Browser is using commit bf21e5eb. I don’t have the safe_examples commit readily available, but I can find it out if relevant. I can confirm mocknet works for the SAFE Browser because I’m able to create a login while offline using any arbitrary invite code. When I upload files using Web Hosting Manager (again, offline), I can navigate to them using safe:// URLs, which I assume means that is all set for mocknet.

Second, I have to note that I cannot debug. My console and inspector are tied weirdly to the SAFE Browser, but not to any actual page I have loaded. Someone else already reported that problem here:

PSA on SAFE Beaker Browser Developer Tools

I have been driving myself absolutely insane by using Window -> Developer Tools in Beaker Browser. This is the set of dev tools for beaker itself! This is COMPELETELY NOT HELPFUL for developing SAFE apps using the DOM API. I am not sure how else to get the actual page dev tools but I know at least one way. I am using right click anywhere on your app page and select inspect element. This brings up the actually relevant dev tools. I hope the docs/guides will be updated to reflect this note. I wa…

I began writing code from scratch, referencing the 0.3.0 Beaker Plugin API, into a fairly simple HTML+JS website. I don’t get errors (which I log as HTML elements, since I cannot use the Browser debug). I get handles everywhere I expect. But it seems like no data is getting stored or retrieved. I assumed I’m writing my API calls wrong or screwing up Promises (they can be fickle).

So I switch over to using code written by @loziniak. I basically get the same problem described in the following thread, wherein I can safeMutableDataEntries.insert without error, but I get empty lists from safeMutableData.getEntries, or I assume they are empty because the function passed into safeMutableDataEntries.forEach is never called. Again, no errors from catching Promises.

Problem with inserting data to app's own container

Hi. I wrote a simple test app, where I get app’s home container and try to insert an entry to it. But that does not seem to work - pushing read button, then save and then read again makes no difference between reads - no entry seems to be added to md. Can anyone check what I’m possibly doing wrong? I’ve abstracted all original API mess to safe_api.js file, so the code may not look familiar to you, but possibly cleaner

Then I decided I should find a working example that is simple and should do what I need. I found the Markdown Editor in the examples (https://github.com/maidsafe/safe_examples/tree/master/markdown_editor). It seems to be built in React, whereas I just want a simple webpage. So I stole config.js and store.js and tried to go from there. The page wouldn’t load when the files were sourced; without being able to see errors in SAFE Browser, I had to resort to other measures. I fired it up in Firefox and got complaints about export being in places it ought not be. I removed all export and import notation from the two files and rely on them being available through the sort of global scope of the web page. It’s a minor change and got the calls up and running.

In my test using code from the markdown editor, I make a call to saveFile('filename', 'some basic\n\ntext'); with no errors and get a handle back. Then I make a call to getFileVersions('filename') and literally things break down. At first I got some really weird Promise error about null has no property emulateAs, yet the only calls to emulateAs were from window.safeMutableData which was tested and shown to be not-null on lines 15-19 of store.js (https://github.com/maidsafe/safe_examples/blob/master/markdown_editor/src/store.js#L15-L22). I nuke everything and start over. Now, same code, I get -103: Core error: Routing client error -> Requested data not found from a Promise catch in response to getFileVersions('filename').

Can someone point out a very simple DOM API example that successfully uploads a file or changes MutableData using 0.3.0 API calls, which can be uploaded with Web Hosting Manager, which can work in SAFE Browser 0.6.0 alpha-2 in mocknet? Is this fundamentally not possible? I’d like a simple example, not something built on top of React or setup as a standalone App, but maybe that is not an option and why I cannot make any progress.

[BryanB]

Here are relevant excerpts from my markdown editor test:

<!-- in HEAD -->
<SCRIPT src="safe_logger.js"></SCRIPT>
<SCRIPT src="config.js"></SCRIPT>
<SCRIPT src="dist/store.js"></SCRIPT>

<!-- at the end of BODY -->
<SCRIPT>
  set_logger('log_status');
  console.log = log_status;
  console.warn = log_status;
  console.log('started');

  var app = authorise()
  console.log('A');
  app.then(() => {
    return saveFile('testfile','This is a test file.\n\nReading the words are wonderful.');
  }, console.log);
  //app.then((dunno) => { console.log(dunno); });
  console.log('B');
  app.catch(console.log);
  console.log('C');

  if (window.safeMutableData === null) {
    console.log('ITS GONE');
  }

  //var app = authorise()
  console.log('A');
  app.then(() => {
    console.log('AA');
    return getFileVersions('testfile');
  }).then((data) => {
    console.log('AB');
    if (data === undefined) console.log('data is undefined');
    console.log('AC');
    if (data === null) console.log('data is null');
    console.log('AD');
    if (data.length === 0) console.log('data is empty');
    console.log('AE');
    console.log('data str is ' + data.toString());
    console.log('AF');
    console.log('data is ' + data);
    console.log('AG');
  }, console.log);
  console.log('B');
  app.catch(console.log);
  console.log('C');
</SCRIPT>

If I print dunno, I get a handle, which I assume means saveFile was successful. The code always breaks after printing AA, though the error changes. For now, it is -103: Core error: Routing client error -> Requested data not found.

[nice]

hello !

in order to debug, you need to right click your page and select “inspect element” . The “browser console” menu entry is for Beaker internals only. This is bit counter intuitive , and has been reported as an issue on the repo, I think.

[BryanB]

@nice

Ah, I read the other thread about the problem, but I didn’t quite grasp what you just suggested here. I see what you’re saying and I will give that a try. To reiterate my understanding, there are at least two different debug consoles, one tied to the Browser and one tied to the web page. The only way to get to the web page debug console is right click in the page and select inspect. Keyboard commands and menu bars are going to go to the Browser debug. If it works, that will certainly speed up debugging in the future, which is much appreciated.

[happybeing]

I don’t know why it doesn’t work for some, but Ctrl-Alt-I opens the Web page console for me in SAFE Browser.

[BryanB]

@happybeing

I built my SAFE Browser for mocknet on Linux 64-bit. That alone is 3 different factors: I built it using my own environment (not using one of the released builds), it’s built for mocknet (not testnet), my architecture is 64-bit Linux. Changing any one of those factors, or any particular combination, could potentially give rise to different results. This isn’t the best thread for trying to debug which scenarios cause the issue.

[happybeing]

The difference between us seems to be the browser build and maybe the Linux desktop. I’m using the MaidSafe built browser (I’m on Debian x64 too, Linux Mint Debian Edition).

[BryanB]

For anyone else who bumps into this, it turns out there was apparently an example of exactly what I wanted right in the safe_examples project. I have no idea how I missed it. Props to @bochaco for pointing it out.

https://github.com/maidsafe/safe_examples/releases/download/0.13.0/examples.html

@happybeing There’s another factor of which commit one is using. Since the devs post pretty regularly to master and the git tags don’t seem to be code releases/freezes as one might expect, if one is building their own browser (necessary for mocknet), one must also note precisely which git commit one is using. Since you’re using a prepackaged browser, your precise git commit is locked to whatever the release used. AFAIK, there is no prepackaged release that supports mocknet, though, so mocknet users have to use whatever commit is on master at the moment, and that changes a lot over a short time.

[loziniak]

@BryanB, I also run a mocknet browser built by myself on 64-bit linux (Arch) and I have no problems running a right console. In fact, I cannot find the other console that you are talking about (browser console). Maybe you faced the same problem I’ve also faced recently - I didn’t know that beaker:start and safe-auth://home/#/login pages are also HTML pages that you can run console on - maybe it’s the “browser console” that you write about? I attach two screenshots - of console fired on my localhost:// test page and second - the browser’s authenticator page. Maybe this rings any bell?

[BryanB]

@loziniak There’s another thread specifically about the debugging problem.

I was indeed talking about the browser console. In fact, in your post, @Joseph_Meagher suggests the workaround I found noted by @waynenilsen in the this thread: PSA on SAFE Beaker Browser Developer Tools

I tested the Inspect Element workaround and it’s the only way I can access the console for the website, as opposed to the console which debugs for the SAFE Browser itself. I suspect everyone who is encountering this particular problem has built their own browser, while the people who do not encounter it are using a prepackaged one. It’s hard to tell since people don’t report OS, browser version, whether browser was downloaded or built, git commit if built, mocknet support if built, nvm and node versions, etc. These are all necessary factors to tracing down an issue in this fairly complex environment, and I’m sure there are even more factors on top.

[joshuef]

@BryanB the best (and most up to date) examples in the repo are the email app and webhosting. The other examples haven’t been ported to the updated APIs from alpha 2 (insofar as I’m aware).

The confusion over the inspector has been noted, and we’ll be straightening that out ([MAID-2382] - JIRA for reference).

---

@BryanB

I can safeMutableDataEntries.insert without error, but I get empty lists from safeMutableData.getEntries

Here you need to be sure to be committing the changes to the network. Inserting / editing mutable data changes are not propagated to the network automatically (which is probably not clear enough in the docs). You must call applyEntriesMutation once you’re done updating your MD objects.

---

If you take a look at the email example for (safe comms)[https://github.com/maidsafe/safe_examples/blob/master/email_app/app/safenet_comm.js], or webhosting hopefully that’ll clarify some of the mutable data workflow.

Hope that helps a bit. Any more Qs of if I missed something let me know, @BryanB!

[BryanB]

Thanks for those additional pointers @joshuef. Although the safe_examples release code I’m using might not be completely up to date with alpha-2, I tested it on my mocknet and it successfully pushed some data then read some data. It is the first bit of example code I found which is as easy as 1) upload via web hosting manager 2) visit safe:// site 3) profit. Everything else requires so many additional steps just to get it running and see what it looks like. I know that sounds lazy … I have no defense against such claims