Как обрабатывать ошибки 404 vue + ssr?

Question

[Александр Флоренко]

Всем привет.

Есть приложение на vue + ssr. Есть страница, на пример, с продуктом.
Не могу понять, как быть в случае, если продукта нету в базе.

Конфиг vue + ssr брал тут

И так. Есть компонент product.vue
В asyncData вызывается actions

async asyncData({store, route}) {
	await store.dispatch('GET_PRODUCT', route.params.id);
},

Сам actions выглядит так

GET_PRODUCT: async ({ commit }, id) => {
    try {
        const RES = await productApi.GET_PRODUCT(id);
        await commit('SET_PRODUCT', RES.data);
    } catch (e) {
        console.log(e.response);
    }
},

Если продукта нету в базе, апи мне возвращает ошибку 404.
И респонс { error: '404 error' }

В каком месте я могу проверить, что приходит в ответе, и если мне приходит 404 ошибка, сделать $router.push({name: '404'})?

В actions и asyncData я не могу получить доступ к $router

Comments

[Игорь]

Я думаю, не нужно делать $router.push({name: '404'})

Так как у вас 2 разных приложения, не обязательно в vue транслировать 404 ошибку, которая произошла где-то на бекенде.

Правильнее, как я полагаю, просто сообщить пользователю, мол не удалось загрузить продукты или таковых нет.

Vue как декоратор.
Vue самостоятельное приложение
И если API бекенда отвечает 404, это не ошибка vue

[Александр Флоренко]

Игорь, понял.
рассмотрю этот вариант.

Но, все же хотелось бы узнать, как быть в таких случаях.
Например, у меня в ТЗ четко написано, что надо перенаправлять на 404 страницу.

[Игорь]

Александр Флоренко, Ну не правильно это.
Vue может работать и без бекенда, а следовательно если ввести неправильно url то тут как раз нужно обработать ошибку и сообщить юзеру "page not found 404"

Если отталкиваться от технического задания, то можно сделать вот так.
Я думаю в вашей ситуации, правильнее будет создать layouts папку, установить vue-extend-layout
и создать несколько разных корневых шаблонов.

Например

default.vue - это ваш основной шаблон
error.vue - этот шаблон для показа ошибок.

Ссылка на ресурс где можно посмотреть как это делается


Например в nuxt именно так и сделано

layouts/error.vue

<template>
  <v-container fluid>
    <v-layout
      column
      fill-height
      align-center
    >
      <v-flex>
        <h2 v-if="error.statusCode === '404'">Страница не найдена</h2>
        <h2 v-if="error.statusCode === '500'">{{error.message}}</h2>
        <h3 v-else>Произошла ошибка</h3>
        <nuxt-link to="/">Вернуться на главную</nuxt-link>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
  export default {
    name: "error",
    props: ["error"]
  }
</script>

<style scoped>

</style>

[Игорь]

Не по теме.

Если продукта нету в базе, апи мне возвращает ошибку 404.

Вообще странно всё это.

По идее, апи в любом случае должен возвращать статус кода 200

Например, api в vk.com там всегда 200.

Только тело ответа содержит код ошибки или 0 если ошибки нет

например:

{
    "code": 0,
    "count": 1,
    "items": [
        {
            "name": "Ресторан \"Клот Моне\"",
            "home": null,
            "phone": null,
            "site": null,
            "schedule": null,
            "latitude": "1.000000",
            "longitude": "1.000000",
            "id": "3",
            "city": null,
            "street": null,
            "country": null,
            "rating": "0.0",
            "services": [
                {
                    "name": "Домашняя",
                    "id": 3,
                    "group": {
                        "id": 2,
                        "name": "Кухня"
                    }
                },
                {
                    "name": "Французкая",
                    "id": 20,
                    "group": {
                        "id": 2,
                        "name": "Кухня"
                    }
                }
            ],
            "images": [],
            "post_code": null
        }
    ]
}

[Игорь]

Игорь, Абстрагироваться от ошибок протокола.

[Александр Флоренко]

Игорь, Ок, не плохой вариант.

Тогда, у меня еще 1 вопрос.

У меня есть роут

{
    path: ':catalogName',
    name: 'catalog',
    component: () => import('Views/catalog')
}

находится в самом низу, полный урл будет выглядеть так domain.com/catalog-1

Если юзер введет domain.com/catalog-7, ему напишет, мол запрашиваемого каталога не существует.

Но, в таких случаях, любой неверный урл - это поиск каталога.
Как быть в таких случаях?

Я так понимаю, что я что то не то делаю.

[Игорь]

Александр Флоренко, Такс.

1. Нужно выполнять валидацию входного параметра маршрута

Например для конкретного маршрута, мы обязаны проверить, что бы входной параметр соответствовал паттерну!

const router = new VueRouter({
        routes: [
          {
            path: '/:catalogName',
            component: Foo,
            beforeEnter: (to, from, next) => {
              // нужно выполнить проверку params действительно ли есть параметр catalogName в from.params
              if (если не в порядке) {
                next('/error') // например посылаем на маршрут, возможно с дополнительным параметрами
              }
              next()
            }
          }
        ]
      })

Ссылка на доки

После того, как мы убедились что входной параметр соответствует заявленному паттерну.
В компоненте начинаем загружать данные.
И только после того как нам удалось без ошибок получить данные, отдаём Данне в data

[Игорь]

Да, ещё заметил один момент.
То как вы загружаете компоненты маршрутов

Присмотритесь к такому варианту
./router.js

Vue.use(Router)

function route (path, view, name, meta) {
  return {
    name: name || view,
    path,
    meta,
    component: () => import(`~/pages/${view}.vue`).then(m => m.default || m)
  }
}

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: paths.map(path => route(path.path, path.view, path.name, path.meta)).concat([{ path: "*", redirect: "/" }])
  })
}

./path.js

export default [
  {
    path: "/",
    name: "index",
    view: "index",
    meta: {
      title: "Справочник компаний",
      breadcrumbs: [
        {name: "Главная", href: "/"}
      ]
    }
  },

  {
    path: "/organizations",
    name: "organizations",
    view: "organizations",
    props: true,
    meta: {
      title: "Организации",
      breadcrumbs: [
        {name: "Главная", href: "/"},
        {name: "Организации"},
      ]
    }
  },

  {
    path: "/organization",
    name: "organization",
    view: "organization",
    meta: {
      breadcrumbs: [
        {name: "Главная", href: "/"},
        {name: "Организация"},
      ]
    }
  }
]

Этот вариант оставляет потенциал для увеличения количества маршрутов в проекте!

[Александр Флоренко]

Игорь, Принял. Спасибо!

[Александр Флоренко]

Игорь, тут не особо понял, а как мне проверить наличие параметра, если юзер переходит из внешнего ресурса, или же просто вставляет ссылку в браузер?

[Игорь]

Александр Флоренко, Понимаете какое дело.
Если юзер вставит ссылку в браузер, например

mydomain.com/user/1
mydomain.com/user/2

Он получит ошибку
Да, именно ошибку.

Подробнее, как это исправить в официальной документации

Я ранее в посте привел пример

const router = new VueRouter({
        routes: [
          {
            path: '/:catalogName',
            component: Foo,
            beforeEnter: (to, from, next) => {
              // здесь будут происходить события перед переходом по этому маршруту
              // next() разрешает перейти дальше или next(перенаправляю на другой маршрут)
              // потому что данные не соответствуют паттерну в from.params или from.query
            }
          }
        ]
      })

[Александр Флоренко]

Игорь, Разобрался. Спасибо!