Uncaught (in promise) in navigation bar.

Webix JS
#1

Hi, recently, I updated webix-jet 1.0.3 for 2.1.3 version. Everything works well. However, I have Uncaught (in promise) NavigationBlocked error log when I change the pages by pressing sidebar menu. Following is the page code:
this.app.show(routes["/" + selection.page]).
Do I have to catch smth in the config method of JetView?

#2

Hello @Yryskul,

Everything works well. However, I have Uncaught (in promise) NavigationBlocked error log when I change the pages by pressing sidebar menu.

Does the navigation actually occur when this error pops up, or is it completely prevented by this error? Usually, this error occurs when the navigation is specifically blocked via the app:guard event.

To be fair, I can’t say for certain what might be causing this issue without taking a look at your code first (if you are not specifically blocking the navigation yourself). If at all possible, could you please provide the code for the JetView containing the sidebar, as well as the initial app configuration? It would also help if you could provide the code for your app via GitHub (or some other way that would allow to see the entire app structure), if possible.

#3

@Dzmitry , no, it does not block anything. İt just logs in the console.

var menu = {
      view: "sidebar",
      id: "top:menu",
      scroll: true,
      multipleOpen: true,
      data: [
        { value: _("Home"), key: "Home", id: "home", icon: "home", page: "home" },
        developmentMenu,
        userMenu,
        notificationsMenu,
        wizardMenu,
        alarmsMenu,
        { value: _("Control Panel"), key: "Control Panel", id: "panel", icon: "server", page: "control-panel" },
        { value: _("Visualization"), key: "Visualization", id: "visualization", icon: "bullseye", page: "visualization" },
        { value: _("Trend Graphic"), key: "Trend Graphic", id: "trendGraphics", icon: "signal", page: "trend-graphics" },
        { value: _("Variable History"), key: "Variable History", id: "variableHistory", icon: "tags", page: "variable-history" },
        { value: _("Variable Monitor"), key: "Variable Monitor", id: "variableMonitor", icon: "heartbeat", page: "variable-monitor" },
        { value: _("Process"), key: "Process", id: "flow-procedures", icon: "eercast", page: "procedures" },
        { value: _("Job"), key: "Job", id: "jobs", icon: "server", page: "jobs" },
        { value: _("Project Map"), key: "Project Map", id: "map", icon: "globe", page: "map" },
        { value: _("Report"), key: "Report", id: "reportView", icon: "file-pdf-o", page: "reports" },
        logMenu,
        helpMenu
      ]
    };

Here, following is initial app config:

webix.ready(() => {
 
  var app = new JetApp({
    id: "project management ui",
    version: 1.0,
    start: routes["/home"],
    debug: true,
    routes: routes
  });

  app.use(plugins.User, {
    model: session,
    public: (path) => {
      if (path.indexOf("top/main.animationUrl") > -1) parseToken(path);
      return path.indexOf("top/main.animationUrl") > -1;
    }
  });
  app.use(plugins.Locale);
  app.render();

  app.attachEvent("app:error:resolve", function(name, error) {
    window.console.error(error);
  });

  function parseToken(url_string) {
    var url = new URL("http://localhost:8081" + url_string);
    window.tokenAccess = {
      token: url.searchParams.get("token"),
      projectName: url.searchParams.get("projectName"),
      name: url.searchParams.get("name"),
    }
  }

});
#4

@Yryskul
plugins.User blocks navigation when required

#5

Hi @integral, how can I solve this problem? Do you have any suggestions?

#6

@Yryskul
I do not think it is a problem.
navigation is usually blocked when user does not have required rights.
probably it is possible to create custom JetApp based class and override show method to catch base methods’ errors.
if you do not want to see promise’s uncaught errors at all, try to replace window.Promise with webix.promise
https://snippet.webix.com/estc7rlo

#7

@integral Thanks for ur answer. I replaced the window.Promise with webix.promise as u said, and it disappeared. Does it have any side effects? Do they differ in some conditions?

#8

they are not very different.
side effect is that you will not be informed about uncaught errors

#9

@integral Thanks.

#10

If I do not want to replace window.Promise with webix.promise, is there any more appropriate way to do this?

#11

Solution exists.
Thank this article Error handling with promises.

We have a standard event ‘unhandledrejection’ of the window object.
So I added to my code:

	$(window).on('unhandledrejection', ({ originalEvent: e }) => {
		if (e.reason.constructor.name == 'NavigationBlocked') return false;
	});

There are no more errors in the console caused User plugin.

#12

Better will be to use e.preventDefault().
Seems like Firefox sucks with this handling.
Will try in it later on the production build.

#13

No…no…no…Profit! ))