Unable to load template

magnusvhendin

I have a number of custom templates in my plugin and for some reason browsing to them can sometimes cause issues. In Chrome it looks like it works fine, but Firefox seems to have issues.

It seems to originate from ajaxify.loadTemplate.

The template has a script attached to it via plugin.json as such: "static/lib/communityAnalytics.js",.

The script itself is defined as follows define('forum/community/analytics',...

Clicking on a link that takes you to that template/page works fine in Chrome, but fails in Firefox. Browsing directly to that page works in both browsers.

Any ideas?

PitaJ

@magnusvhendin are there any errors in the browser console? Have you tried rebuilding and restarting and clearing your cache?

magnusvhendin

@pitaj Yep.

Unable to load template: community/analytics nodebb.min.js:25493:12

and

Uncaught Error: Script error for "/assets/templates/community/analytics.js"
https://requirejs.org/docs/errors.html#scripterror

These actually come up twice in one navigation.

I have tried rebuild/restart and clear cache.

magnusvhendin

@pitaj I also have this issue in another plugin, but then it was only in the admin panel so I didn't put any effort into fixing it. This is on the forum itself, which is why I would like to sort it out.

<baris>

Can you share your plugin.json and how you render the template in your plugin? If the plugin is open source a link to the source code would help as well.

magnusvhendin

@baris The plugin is not open source as of yet. It hopefully will be in the future but right now it's not ready.

This is the plugin.json:

{
	"id": "nodebb-plugin-community-analytics",
	"library": "./library.js",
	"hooks": [
		{
			"hook": "static:app.load", "method": "init"
		},
		{
			"hook": "static:api.routes", "method": "addRoutes"
		},
		{
			"hook": "filter:admin.header.build", "method": "addAdminNavigation"
		},
		{
			"hook": "action:events.log", "method": "writeEventLog"
		}
	],
	"staticDirs": {
		"static": "./static"
	},
	"less": [
		"static/style.less"
	],
	"modules": {
		"chroma.js": "static/external/chroma.min.js"
	},
	"scripts": [
		"static/lib/communityAnalytics.js",
		"static/lib/globalAnalytics.js",
		"static/lib/activityReport.js",
		"static/lib/chartHelpers.js"
	],
	"acpScripts": [
		"static/lib/admin.js"
	],
	"templates": "static/templates",
	"languages": "languages"
}

This is in the controllers.js-file.

Controllers.renderCommunityAnalyticsPage = async (req, res) => {
	const cid = parseInt(req.params.category_id, 10);

	if (Number.isNaN(cid)) return Helpers.notAllowed(req, res);

	const category = await Categories.getCategoryData(cid);

	const { from, to } = getTimestamps(req.query.from, req.query.to);

	return res.render('community/analytics', {
		category,
		filters: {
			from,
			to,
		}
	});
};

This is the script (not all obviously) that's not being found and the cause of an error being thrown:

'use strict';

define('forum/community/analytics', ['api', 'components'], (api, components) => {
    const Analytics = {
        category: ajaxify.data.category,
    };

    Analytics.init = () => {

    };

    return Analytics;
});

There are some functions in there that are not relevant, since the script doesn't even load. I just wanted to show how I defined it.

PitaJ

@magnusvhendin what about your template file? And also where is the template located?

magnusvhendin

@pitaj This is the template:

<div class="row">
    <div class="col-xs-12 col-md-2 no-print">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-12 form-group">
                <label for="start">[[admin/advanced/events:filter-start]]</label>
                <input type="date" component="analytics/input-start" name="start" value="{query.start}"
                    class="form-control" />
            </div>
            <div class="col-xs-12 col-sm-6 col-md-12 form-group">
                <label for="end">[[admin/advanced/events:filter-end]]</label>
                <input type="date" id="end" component="analytics/input-end" value="{query.end}"
                    class="form-control" />
            </div>
            <div class="form-group col-xs-12">
                <button class="btn btn-primary" component="analytics/apply-btn">Apply</button>
            </div>
            <div class="form-group col-xs-12">
                <button class="btn btn-primary" component="analytics/view-activity-report">Activity report</button>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-10" id="events-chart">
        <canvas></canvas>
    </div>
</div>
<div class="row">
    <div class="col-xs-12" id="companies-chart">
        <canvas></canvas>
    </div>
</div>

The two canvases are used to draw diagrams with chart.js included from NodeBB core.

The template is located in static/templates/community/analytics.tpl

To me though, the error suggests that it tries to load a js file that it assumes exists (and it does) but then fails and halts everything. It's also seems a bit odd that it works fine on Chrome, but not Firefox.

PitaJ

Can you try Chrome incognito mode and Firefox private browsing?

Can you check nodebb/build/public/templates/community for analytics.tpl and analytics.js?

magnusvhendin

@pitaj Private browsing doesn't solve it. And the two scripts you mentioned are where they should be.

Chrome (inkognito) still works. Firefox (private browsing) still doesn't work.

magnusvhendin

Also works fine in Safari.

PitaJ

You mentioned that there are errors in the browser console when you load with Firefox. Does it say anything about a syntax error or anything? Does it point to a line in the file?

Can you see the file in the Firefox sources panel? Can you see the load fail in the network panel?

julian

@magnusvhendin This will seem entirely out of left field, but...

Do you have an ad blocker running on Firefox? What happens if you turn it off just for your NodeBB site?

magnusvhendin

@julian Oh wow that actually fixed it. Firefox is my primary browser and I do have an extra layer of tracking protection installed. At least now I know what the cause is, and can move on to troubleshooting it.

Any reason you thought of that?

julian

@magnusvhendin the word "analytics". It's something that's happened a couple times. Not enough for me to actually resolve (I mean, I can't circumvent an ad blocker, even if it is a false positive), but often enough that it is top of mind

uBlock is quite sensitive sometimes

To make matters worse, I can't actually reproduce it with the word "analytics". It usually happens with topics that contain the word in the title.

Also when you mentioned that it seemed like the client side file request just got cancelled, that also sounded familiar, as that is how uBlock origin works.

gotwf

@magnusvhendin Just a couple quick, half baked thoughts: Are you using uBlock in default "luser mode" or one of the "expert modes". If the latter you can get a better picture of what it may be blocking. Also, turn on it's logging.

Shooting from the hip: where are these these various templates and dependencies being served up from? Recent versions of uBlock are tuned to block "CNAME Abuse", which is rampant, particularly among certain analytics and CDN providers looking to masquerade their 3rd party stuff as being served under the same origin domain.

And finally, @julian, iirc, uBlock (Origin) is the most widely used blocker (ad blocker would be a misnomer since it offers controls for much more that just ads). Hence, I would think it would be desirable to ensure stuff jfw with its default settings.

Privacy is a constant arms race 'twixt good and evil. Good to be on the right side of that one. Especially as more and more media attention is cluing in the formerly clueless... A day will arrive when all the kool kids on the block are running stuff like uBlock. Maybe it is already here. Only a short step from there to being embraced by the unwashed masses....

P.S.; And yes, I get the irony that many (most?) of these same media outfits being some of the worst of the worst offenders.

magnusvhendin

@julian I'm actually using uBlock so disabling it did the trick. The simple solution is probably to name it something else, like statistics or something. No big deal. Either way, thanks for the assist.

@gotwf I only have uBlock Origin installed but haven't changed any settings whatsoever. So I guess that would be the first option. I'll definitely check the logging options. Thanks!

gotwf

@magnusvhendin Settings->Advanced User

Obligatory reading: https://github.com/gorhill/uBlock/wiki/Advanced-user-features

Although it still does allow some stuff I'd rather not see, on balance I tend to favor "Medium Mode" : https://github.com/gorhill/uBlock/wiki/Blocking-mode:-medium-mode

Once you're "in the advanced user" modes, enable various "noop" rules to season to taste. Speaking of which, you probably also should read up "Dynamic Filtering": https://github.com/gorhill/uBlock/wiki/Dynamic-filtering

For those more visual and auditory learners: youtuber link: https://www.youtube.com/watch?v=2lisQQmWQkY

Have fun! o/