Nuxt.js: Open Graph Facebook meta tags - Server error

[atmar]

Hello,

When I'm testing out the open graph on our new site, it just gives us a generic nuxt server error with no extra information. When I visit the site, all meta tags are visible and correct.

head code:

  head() {
    let product = this.product
    return {
      title: `${product.name} (PC) - localhost`,
      meta: [
        {
          hid: `description`,
          name: 'description',
          content: product.short_description
        },
        {
          hid: `keywords`,
          name: 'keywords',
          keywords: product.name
        },
        {
          hid: `og:title`,
          property: 'og:title',
          content: `${product.name} (PC) - localhost`
        },
        {
          hid: `og:url`,
          property: 'og:url',
          content: 'https://localhost' + this.$route.fullPath
        },
        {
          hid: `og:image`,
          property: 'og:image',
          content: `${this.$store.state.imageUrl}/assets/img/products/header/460x215/${product.product.image_cover}`
        },
        {
          hid: `og:description`,
          property: 'og:description',
          content: product.short_description
        }
      ]
    }
  },

_{This question is available on Nuxt.js community (#c1805)}

[NicoPennec]

It seems not a meta tags error. You have a more global issue on your server! Check your server logs.

I just run a wget command to quick check:

wget https://<private-url>
--2017-11-06 21:51:56--  https://<private-url>
Resolving <private-url> (<private-url>)... 104.25.xx.yy, 104.25.xx.yy, 2400:cb00:2048:1::xxxx:yyyy, ...
Connecting to <private-url> (<private-url>)|104.25.xx.yy|:443... connected.
HTTP request sent, awaiting response... 500 TypeError
2017-11-06 21:51:56 ERROR 500: TypeError.

Then you have a mixed content, your page includes HTTP resources from http://cdn.edgecast.steamstatic.com/

[atmar]

Hmm it's strange. It's not related to mixed content as a different product without that has the same error. I can't find any error so far either (using Engintron, nginx). Not in cpanel errors, nginx error log or laravel log
I don't have it on the main site, https://localhost, which is a standard laravel site. It's only with this Nuxt site.
Is it possible with a nuxt build to show a more exact error?

Below is the nuxt server:

const { Nuxt, Builder } = require('nuxt')

const https = require('https')
const fs = require('fs')
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 3000

// We instantiate nuxt.js with the options
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)

// Render every route with Nuxt.js

// Build only in dev mode with hot-reloading
if (config.dev) {
  new Builder(nuxt).build()
  .then(listen)
  .catch((error) => {
    console.error(error)
    process.exit(1)
  })
}
else {
  listen()
}

function listen() {
    const options = {
key: fs.readFileSync('/home/certs/localhost.key'),
cert: fs.readFileSync('/home/certs/localhost.crt')
};
  // Listen the server
// Create the server
https
.createServer(options, nuxt.render)
.listen(port)
  console.log('Server listening on `localhost:' + port + '`.')
}

[NicoPennec]

I have a hypothesis for your error 500 (but I can't check your nginx error logs /var/log/nginx/error.log)

With wget or curl or from facebook test page, you request with the protocole http/1.
But from a browser (chrome, firefox, edge), you request with the protocole http/2.
So, maybe your server is not configured to fallbakc on http1 properly ???

Can you share an extract of your nginx config (from /etc/nginx/sites-enabled/xxx ) ?
and your nuxt.config.js file too?

[atmar]

There is no /etc/nginx/sites-enabled/xxx in this server. Engintron doesn't have it. Rules are set in /etc/nginx/custom_rules

https://github.com/engintron/engintron/wiki/Engintron-&-CloudFlare

if ($host ~ "localhost") {
 set $PROXY_DOMAIN_OR_IP "xxx.xx.xx.x";
 set $PROXY_TO_PORT 3000;
}

Traffic always goes through https with cloudflare option. Nginx error log is completely empty. I've reset it before trying the requests.

nuxt.config.js

const webpack = require('webpack')
require('dotenv').config()

module.exports = {
  /*
   ** Headers of the page
   */
  head: {
    title: 'store_gameodds',
    meta: [{
      charset: 'utf-8'
    },
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1'
    },
    {
      hid: 'description',
      name: 'description',
      content: 'gameodds store'
    }
    ],
    bodyAttrs: {
      class: ''
    },
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css?family=Roboto'
    },
    {
      rel: 'stylesheet',
      href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
    }
    ]
  },

  css: [
    'semantic-ui-css/semantic.min.css',
    '@/assets/scss/main.scss'
  ],

  env: {
    dev: (process.env.NODE_ENV !== 'production'),
    IMAGE_URL: process.env.BACKEND_URL,
    baseUrl: process.env.BASE_URL
  },


  /*
   ** Customize the progress-bar color
   */
  loading: {
    color: '#3B8070'
  },

  modules: [
    // With options
    ['@nuxtjs/axios', {
      credentials: false,
      proxyHeaders: false,
      baseURL: process.env.BACKEND_URL + '/api/v2'
    }]
  ],

  router: {
    middleware: [
      'i18n',
      'check-auth'
    ]
  },

  plugins: [
    { src: '~/plugins/vue-thumbnail-carousel', ssr: false },
    { src: '~/plugins/vue-countdown'},
    { src: '~/plugins/vue-lightbox.js', ssr: false },
    { src: '~/plugins/i18n.js' },
    { src: '~plugins/filters.js' },
    { src: '~plugins/vue-tooltip.js' },
    { src: '~plugins/vue-modal.js' },
    { src: '~/plugins/vue-notifications.js', ssr: false },
    { src: '~/plugins/nuxt-client-init.js', ssr: false },
    { src: '~/plugins/i18n-mixin.js' }
  ],


  /*
   ** Build configuration
   */
  build: {

    extractCSS: true,

    vendor: ['axios', 'babel-polyfill', 'vue-i18n', 'v-img', 'vue-js-modal', 'vuejs-noty', 'v-tooltip'],

    plugins: [
      new webpack.ProvidePlugin({
        '$': 'jquery',
        'jQuery': 'jquery',
        '_': 'lodash'
        // ...etc.
      }),
    ],

    //Add this, otherwise window is not defined
    //vendor: ['semantic-ui-css'],

    /*
     ** Run ESLINT on save
     */
    extend(config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)|(plugins)/
        })
      }
    }
  }
}

[atmar]

Found the issue. I couldn't run npm run dev on the production server for some reason so I only had a 500 error to work with. But I found a npm package called localtunnel https://localtunnel.github.io/www/ . It allowed me to expose my localhost application to the public. I've used the OG tester of Facebook on it and found the following error:

Cannot use function split on undefined

It showed me where it was located and I found the following code in my i18n plugin:

 let locale = req.headers['accept-language'].split(',')[0].split('-')[0].toLocaleLowerCase() || 'en'

Appearently there is no req.headers['accept-language'] when Facebook checks for the OG tags and it caused an error. Changed it to the following and everything works:

      let locale = 'en'
      if (req.headers['accept-language'] !== undefined) {
      let locale = req.headers['accept-language'].split(',')[0].split('-')[0].toLocaleLowerCase() || 'en'
      }

[atmar]

@NicoPennec Could you change my domain to something else like localhost? I felt no other choice then to show the domain because of my issue, but I'd rather not have it pop up on github issues forum. Thanks.

[NicoPennec]

@atmar done! ;-)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.