Unable to reach masterhead or contact tabs in journal settings

Software Support
, ,
1

Hi,

I’m trying to fix a damaged OJS 3.2.1-1 (php 7.3 with “official” docker images).

All works fine, but when I try to reach Journal Settings (management/settings/context) Masterhead tab is empty and, same happens on Contact.

PHP log says nothing apart from this “Division by zero” warning:

[Wed Aug 26 02:47:35.763853 2020] [php7:warn] [pid 114] [client 172.23.0.1:36604] PHP Warning: Division by zero in /var/www/html/lib/pkp/classes/core/ArrayItemIterator.inc.php on line 134, referer: https://localhost/rb/management/settings/context

I tried with Debug=On and I can’t see nothing useful

The only clue is in the firefox console that shows plenty of warnings and errors.

I pastebined them here: La cookie “__atuvc” pronto se tratará como cookie de sitio cruzado contra “https - Pastebin.com

Warnings are stuff like this one:
La cookie “_gid” pronto se tratará como cookie de sitio cruzado contra “https://localhost/rb/management/settings/context” porque el esquema no coincide. context

But my concern are 3 errors like this one:
TypeError: this.fields is undefined hasMultilingualFields https://localhost/js/build.js?v=3.2.1.1:8 get https://localhost/js/build.js?v=3.2.1.1:14 evaluate https://localhost/js/build.js?v=3.2.1.1:14 hi https://localhost/js/build.js?v=3.2.1.1:14 availableLocales https://localhost/js/build.js?v=3.2.1.1:8 get https://localhost/js/build.js?v=3.2.1.1:14 evaluate https://localhost/js/build.js?v=3.2.1.1:14 hi https://localhost/js/build.js?v=3.2.1.1:14 Ye https://localhost/js/build.js?v=3.2.1.1:8 _render https://localhost/js/build.js?v=3.2.1.1:14 i https://localhost/js/build.js?v=3.2.1.1:14 get https://localhost/js/build.js?v=3.2.1.1:14 ri https://localhost/js/build.js?v=3.2.1.1:14 In https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 init https://localhost/js/build.js?v=3.2.1.1:14 h https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 b https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 Ar https://localhost/js/build.js?v=3.2.1.1:14 _update https://localhost/js/build.js?v=3.2.1.1:14 i https://localhost/js/build.js?v=3.2.1.1:14 get https://localhost/js/build.js?v=3.2.1.1:14 ri https://localhost/js/build.js?v=3.2.1.1:14 In https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 init https://localhost/js/build.js?v=3.2.1.1:14 h https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 b https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 Ar https://localhost/js/build.js?v=3.2.1.1:14 _update https://localhost/js/build.js?v=3.2.1.1:14 i https://localhost/js/build.js?v=3.2.1.1:14 get https://localhost/js/build.js?v=3.2.1.1:14 ri https://localhost/js/build.js?v=3.2.1.1:14 In https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 init https://localhost/js/build.js?v=3.2.1.1:14 h https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 b https://localhost/js/build.js?v=3.2.1.1:14 p https://localhost/js/build.js?v=3.2.1.1:14 Ar https://localhost/js/build.js?v=3.2.1.1:14 _update https://localhost/js/build.js?v=3.2.1.1:14 i https://localhost/js/build.js?v=3.2.1.1:14 get https://localhost/js/build.js?v=3.2.1.1:14 ri https://localhost/js/build.js?v=3.2.1.1:14 In https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 $mount https://localhost/js/build.js?v=3.2.1.1:14 _init https://localhost/js/build.js?v=3.2.1.1:14 wi https://localhost/js/build.js?v=3.2.1.1:14 init https://localhost/js/build.js?v=3.2.1.1:8 <anonymous> https://localhost/rb/management/settings/context:222

I’m pretty sure the problem is because I have a corrupted db (that I can’t recover because there is no backup), but I don’t know much about vue.js so I don’t know how to start debugging to fix the db.

Any help is really appreciated,
m.

2

That suggests to me that one of the form fields that is being shown is not configured correctly. This could be because a plugin you are running has added or modified a form incorrectly. Or it could be because the data in your forms is wrong.

The most common culprit is in journal locale settings. The forms rely on these to display multilingual forms, and I’ve seen lots of cases where the settings are off in the database. So first I’d recommend checking the active locales and trying to reset them if possible.

Failing that, I’d recommend using the old delete-and-test method to discover which form is causing the problem. In context.tpl, try removing the <pkp-form> tags one-by-one, testing as you go, until you can access the page without errors. That should at least tell you which form is causing the error.

1 Like
3

Nate, thanks a LOT for your guidance.

Just in case somebody falls with the same stone, this is what I tried (from easiest to most dificut):

  • First I disabled all the plugins from the UI and… didn’t help.
  • Second I disabled all the languages except English and I reload it… but was useless (even now I’m unsure if this is the locate settings that I need to check).
  • Then I go with the ./templates/management/context.tpl form trying to find the set of fields that where making all this noise… and I removed masterhead and/or contact (all combinations) and fails with both tabs, but I can’t go deeper there because fields are “bind” to the template.

If I look into the template but, as said, I have no vue.js vudú powers at all, so this part of the code is completely cryptic to me:

<tab id="masthead" label="{translate key="manager.setup.masthead"}">
     {help file="settings/journal-settings" class="pkp_help_tab"}
     <pkp-form
           v-bind="components.{$smarty.const.FORM_MASTHEAD}"
           @set="set"
     />
</tab>

If I need to guess, looks like this is a vue.js component that is going to be built by javascript but I even I grep I can’t find where the fields and the data are assigned.

Thanks a lot for your time @NateWr

4

Great. My dyslexia strikes again. I was grepping “masterhad” instead of “masthead”. (w1f) :wink:

If Looks like data is assigned here:
classes/components/forms/context/MastheadForm.inc.php

And here:
classes/components/form/context/PKPMastheadForm.inc.php

Let’s see what I find. :slight_smile:

1 Like
5

I missed to report back with the solution.

Following Nate’s indications, in a few minutes, I was able to debug the form and I found the problem.
In my case, it was related with the “About the journal” field.

No feedback in logs so I’m still unsure if it happens because the field include wired chars (latinswedish to utf8 issue) or because of the content length… or the combination of both, the point is OJS start doing crazy thinks after trying to reach this field.

I attached an adminer to the project container to reach the DB and modify the field (it’s stored in journal_settings table) and after this, all worked like a charm.

Thanks a lot Nate!

6

Now that we are using Vue.js to run much of our UI, you’re likely going to encounter more issues that occur in the browser. These typically won’t create an entry in your server logs, but will throw an error in your browser’s console.

To debug these, the best thing to do is to make sure you build Vue.js in development mode and make use of the Vue.js browser plugin, which lets you inspect the state in run-time. I know this is a bit of a paradigm shift for people not used to working a lot in JavaScript, but there’s a lot of debugging help to be found here once you are setup.

To build the JavaScript package in development mode when running OJS from the git repository (ie - not a packaged distribution), run this on the command line in your OJS root:

npm run watch
2 Likes
7

Thanks a lot for your comment Nate. Very needed.

I noticed this paradigm shift (that, BTW, is killing the last old BOFH ;-)) but I have seen enough technology transitions to say that it’s just a matter of time that you will be back to the server side, young man. :stuck_out_tongue:

BTW, other paradigm shift that I noticed and concerns me much more than the former one is see people/organizations moving all their iron/selfhosted servers to cloud… without been worried it means a huge lose of control over our data and infrastructures. I feel like the ecosystem is dying and one day, not far from now, we will only have serverless solutions based in AWS, Azure, Google Cloud. Difficult to decide who you trust.

Anyway, back to vue.js, apart of the indications you made in this post, is there any PKP documentation or generic links to help removing my rusty?

I’m asking because one day I like to create a docker-compose for OJS developers (vue.js, less, php debug ready) with all this stuff set up and right now I’m quite lost.

The official documentation a good starting point?

They mention plugins for FF and Chrome (even an electron app) but looks like they recommend VC Code/Codium… and each developer have their own favorite editor, so the solution need to be generic.

BTW, I’m with vim (in server side) and Atom (in my desktop, that now is M$ too) so I’m thinking to move to VCodium as explained here:

And now that we talk seriously… may I extend this documentation petition to less? I succeed with theming with my old fashion grep powers, but I suspect dev live will be easier if I can see in the browser side the less file that I need to touch. :slight_smile:

To close… please, if you don’t have clear references to share or you are busy now, just forget this petition.

Thanks in advance,
m.

8

I couldn’t avoid the temptation of trying this in the existing docker-ojs images, but it fails. :frowning:

Reporting here to keep working in this in future:

“npm run watch” inside the container reports it was not able to find “npm” (that is perfectly normal because to we delete it to make docker images more lightweights) so I reinstall this (and it’s dependences: c-ares, libuv and nodejs ) with:

$ apk add npm

And then it run the command but reports a missing package.json in ojs root, so I download it as follows:

$ wget https://raw.githubusercontent.com/pkp/ojs/ops-3_2_0-1/package.json

So now the “npm run watch” returns a “npm ERR! missing script: watch” and googling it’s supposed to fail because it need to be installed first, so I ran:

$ npm install
$ npm watch

But nothing changes:

npm ERR! missing script: watch
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-09-07T17_42_10_155Z-debug.log

And log shows:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'watch' ]
2 info using npm@6.13.4
3 info using node@v12.15.0
4 verbose stack Error: missing script: watch
4 verbose stack     at run (/usr/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack     at /usr/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack     at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack     at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack     at checkBinReferences_ (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack     at final (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack     at then (/usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack     at /usr/lib/node_modules/npm/node_modules/read-package-json/read-json.js:281:12
4 verbose stack     at /usr/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:115:16
4 verbose stack     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)
5 verbose cwd /var/www/html
6 verbose Linux 5.4.0-45-generic
7 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "watch"
8 verbose node v12.15.0
9 verbose npm  v6.13.4
10 error missing script: watch
11 verbose exit [ 1, true ]

So my first conclusion is there is no fast/dirty script to make it run on our existing docker images and looks like will be cleaner creating a Dockerfile that don’t remove all the npm, nodeJS, git, travis, etc… for developers.

9

Answer
In config.inc.php
This was the solution which worked for me
connection_charset = utf8 and not utf-8

1 Like
10

Missed to report back the solution.

Thanks @hannanhazari but in my case, this was related with language miss-configuration and the fix was as easy as going to the admin area and enable UI, Forms and Sumissions (last two were disabled) as explained in this post:

For my peace of mind I also made a “Reload defaults”.