[Solved] Home page loads fine, inner pages do not (can-zone ignore)

Here is a screenshot of http://localhost:3030/contributors that shows a persistent error:

There are different errors upon first load of that page (probably before SSR has cached the page or something):

If you visit the deployed app, the errors are not displayed or shown in console, and the HTML table contains no data (SSR should be able to get the data regardless of client):

https://bitcentivez.herokuapp.com/contributors

At one point SSR was getting the data and it was just the client not being able to reattach without timeout.

If you visit https://bitcentivez.herokuapp.com and then click the “Contributors” menu item, the inner page loads as expected (unless you click off the Home page super fast, before client app is reattached).

I’m guessing there is an issue with SRR not being able to connect to with the data needed for that inner page, if that makes sense.

The code for that inner “Contributors” page is here:

I’m guessing I need to use can-zone ignore but I’m not sure how.

The error upon first page load (after fresh server restart) mentions can-observation-recorder, so it may be that https://canjs.com/doc/can-observation-recorder.ignore.html could be useful in some way as well, but again I am not sure and I definitely require guidance using either ignore function (have been trying to debug this for a while now without any success on my own).

Sorry, can you create a minimal version that breaks in the same way?

Hi Justin, thanks for replying.

The example repo/project is pretty barebones, and it’s directly adapted from a small subset of the official and original donejs/bitcentive example code, so you should already be pretty familiar with most of it!

I could rip out the styles and assets, but the problem is with the minimal amount of JavaScript… SSR works perfectly fine if you enter the app through the Home page, and then navigate to the Contributors page using the navbar… The problem appears when you try to visit /contributors directly.

You can at least please try cloning this down, to do a quick local investigation of the problem?

That should be easy as:

mongod --config /usr/local/etc/mongod.conf # Or, using brew services: brew services start mongodb

git clone https://github.com/leoj3n/bitcentivez.git && cd bitcentivez && npm install && npm run develop-ssr

open http://localhost:3030/contributors # reload to see the different second error, or restart server to see initial error again

The code for the SSR server is here:

The code for the contributors service (the only service) is here:

The code for the contributor model (the only model) is here:

The code for my custom-built super-model (a kitchen sink of behaviors) is here:

The pertinent client app js and stache templates are here:

Let me know what you’re seeing that you would want stripped out before you would be willing take a look.

Thank you!

Okay, I was able to get this to work. I based my solution off of this one use of zone in the original bitcentive:

Here’s where I needed to put it and what it ended up looking like in my bitcentivez project:

I knew from the start that I needed to ignore something in zones for SSR to work, but I just didn’t know what exactly. Removing parts of the application like @justinbmeyer suggested pointed out to me that SSR would work if return Contributor.getList({}); was removed from the client app. Once I knew this I just needed to figure out how to use can-zone's ignore feature.

Unfortunately, the can-zone docs page on the canjs.com site is 404ing, and the README doesn’t have any usage examples. I don’t know why but I didn’t think to check to see if the can-zone repo had a docs folder until now, which it does:

Instead I ended up finding the example in the original bitcentive. At any rate, it seems I can finally use SSR in my app without being frustrated that it’s broken for pages that load data via feathers.

I guess one assumption I still would like answered is: SSR should be able to load data from feathers without having to use CanZone.ignore. I assume this is the case, but is just not fully supported yet, and for now we have to use CanZone.ignore as suggested in these issues:

https://github.com/canjs/can-zone/issues/149

https://github.com/canjs/can-zone/issues/108

Is that assumption about can-zone and SSR compatibility with data from feathers (for example) correct?

We aren’t using ssr in our Bitcentive app. Feathers will not work by default because it uses a long lived websocket connection.

There is a way to configure the feathers client to use XHR. You’d have to switch to this when running the app in ssr.

Glad you were able to use bisection to figure out the problem.

1 Like

Thanks Justin, I was able to use feathers-rest on the server and feathers-socketio on the client with the help of steal-conditional:

https://github.com/leoj3n/bitcentivez/commit/bce502921c9d49b6efab90fb48e4d841217ba516

However, although it works locally in development, I encountered the following issue when attempting to build and deploy:

https://github.com/stealjs/steal-tools/issues/1086

It seems steal-conditional causes the conditionally loaded files to not get included in the bundle. :thinking:

You can see the resulting error in the console on that page: https://bitcentivez.herokuapp.com/contributors

NOTE (to future self):

Here are some related issues that might benefit from this method of loading feathers-rest in SSR:

https://github.com/donejs/bitcentive/issues/97
https://github.com/donejs/done-ssr/issues/198
https://github.com/canjs/can-connect-feathers/pull/104