Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Interceptor for 404 with error method not working

See original GitHub issue

Version

v5.8.0

Reproduction link

https://github.com/msonowal/nuxt-bug-reproduce-link

Steps to reproduce

add this in plugins dir make file name it axios.js

and add the link in nuxt config plugins array visit any route whose axios calls are 404

axios.js file content below

export default function({ $axios, error }) {
  $axios.onError((responseError) => {
    if (responseError.response.status === 404) {
      error({ statusCode: 404, message: 'Post not found from interceptor' })
    }
  })
}

What is expected ?

show the error response with 404 code as defined in the nuxt app Post not found from interceptor

but

not redirect to 301

What is actually happening?

it is showing default nuxt error

NuxtServerError Request failed with status code 404

<div align="right">_{This bug report is available on Nuxt community (#c305)}</div>

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:10 (1 by maintainers)

Top GitHub Comments

1reaction

ola-skriubakkencommented, May 14, 2020

Anything happening on this one? Or are there any way to solve this? I would like to show a proper error page to the user without redirecting (which works), or show the nuxt default error page.

0reactions

Scinocommented, Jan 22, 2021

This problem is still occurring. Please reopen the issue.

"@nuxtjs/axios": "^5.12.5",
"nuxt": "^2.14.12",

Top Results From Across the Web

NUXT JS Interceptor for 404 or any errors with error method ...

This seem to work for me. _.vue async asyncData(context) { ... try { const response = await context.$axios(options); ... } catch (error) ...

Angular — intercept your http errors - Level Up Coding

With the so-called HttpInterceptor , Angular provides us a way to transform http requests and responses. Through the interface, we can implement the...

Angular: Handle HTTP Errors using Interceptors

An error interceptor is a special type of interceptor which is used for handling errors that arise while making an HTTP request. The...

How to Handle Errors with Angular Error Handling - Code Maze

The page that handles the 404 error is already created, so, let's continue on by creating a 500 (Internal server error) component.

NUXT JS Interceptor for 404 or any errors with error method ...

Coding example for the question NUXT JS Interceptor for 404 or any errors with error method not working-Vue.js.