vue-meteor icon indicating copy to clipboard operation
vue-meteor copied to clipboard

Added support for: reject status `code` and `message`; `context.statusCode`.

Open mrauhu opened this issue 5 years ago • 3 comments

Greetings, Guillaume @Akryum.

In this pull request I added support for:

  • reject code set status code and message appends to body:
    // no matched routes
    if (!matchedComponents.length) {
      reject({ code: 404, message: 'Not found' })
    }
    
  • context.statusCode and example of usage with wildcard * path for creating custom 404 error.

Best wishes, Sergey.

P.S. This pull request is copy of https://github.com/meteor-vue/vue-meteor/pull/390, but from different branch (not master).

mrauhu avatar Apr 21 '20 14:04 mrauhu

@mrauhu It might be better to add machine readable strings. A bit like how the Meteor guide describes the error field: https://guide.meteor.com/methods.html#throwing-errors. This way we can apply translations to them and it follows a similar structure to how Apollo's resolvers work: https://www.apollographql.com/docs/apollo-server/data/errors/

chris-visser avatar Jun 06 '20 21:06 chris-visser

It might be better to add machine readable strings.

Purpose of this changes is make a human readable Server-Side Rendered (SSR) 404 error page with a machine readable 404 Not found HTTP status code.

@chris-visser please, read carefully: Current implementation of the vue-ssr have the bug, that breaks your SEO dramatically, it's return the 200 OK HTTP status code for not found pages.

Right now, the no matched routes example code from vue-ssr README.md not working, and return 200 OK to web crawlers (scrapers) as Googlebot, Bingbot, Baiduspider or YandexBot:

https://github.com/meteor-vue/vue-meteor/blob/078e632b631e7b4a05a8b32059fa6268b82b15f8/packages/vue-ssr/README.md#L85-L88

This pull-request fix the bug and make code cross-platform between the Vue SSR guide approach and Vue+Meteor SSR.

Basically, you can copy code from your Vue.js or Nuxt.js application to Vue+Meteor and it's works.

As example, you may return reject({ code: 404 }) as described in: https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router

Please, see the code from the Vue SSR guide:

Now we need to implement the server-side routing logic in entry-server.js:

    // wait until router has resolved possible async components and hooks
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // no matched routes, reject with 404
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // the Promise should resolve to the app instance so it can be rendered
      resolve(app)
    }, reject)

A bit like how the Meteor guide describes the error field This way we can apply translations to them and it follows a similar structure to how Apollo's resolvers work

It's not about Meteor or Apollo errors.

Optional the reject({ message: 'Custom error message'}) attribute needed for replace the default error message Server error that hardcoded in:

https://github.com/meteor-vue/vue-meteor/blob/2ddce135e86baf69780579f66844da2394cbe7fc/packages/vue-ssr/server/index.js#L67-L69

Thank you for attention, Sergey.

mrauhu avatar Jun 06 '20 22:06 mrauhu

Oh lol. Turned out I'd misread your example. You are showing it indeed as part of how devs could use it. Actually really nice this! 🙂

chris-visser avatar Jun 06 '20 23:06 chris-visser