Router failure resulted in an internal server error

When navigating to a page in my router, I make a REST API request to retrieve data from the server in the beforeEnter clause as shown below:

beforeEnter: (to, form, next) => {
              getData().then(
                (response) => {
                  //some logic to get data
                  next(); //if no error redirect to page
                },
                (error) => {
                  next(false); //on error not redirect on page - at this moment, I want to display information about internal server error
                });
            }

I have a question now: How can I display a toast/notification with the message "Internal server error" when an error occurs in my beforeEnter function?

Thank you for any assistance.

javascripttypescriptvue.jstoast

Answer №1

Alright, I'll take care of it

If there's an error:

(error) => {
              HelpersService.internalServerErrorToast();
              next(false);
            }

Within the service:

  internalServerErrorToast() {
    let bootStrapToaster = new BToast();

    bootStrapToaster.$bvToast.toast("500", {
      title: "Internal Server Error",
      toaster: "b-toaster-bottom-right",
      solid: true,
      variant: "danger",
      appendToast: false,
      noCloseButton: true,
      toastClass: "internalErrorToast",
    });
  }

Answer №2

Have you considered using the catch method instead of just then in your code? By using then, you can also incorporate catch.

beforeEnter: function(to, form, next) {
    this.getData().then((response) => {
        next();
    }).catch(error => {
         throw error
    })

}

Give this a try. If it doesn't work, leave a comment and we will explore other options.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Double-clicking with Ajax and JSF after the initial click

When I interact with a dataTable that has a column named DELETE (which is a link) and has a listener attached to it, I experience an issue. After clicking on the link for the first time (click 1), the row gets deleted as expected. However, subsequent click ...

javascriptajaxjakarta-eejsf-2

generate code to automatically output the content of a website

I'm in the process of creating a program that automatically navigates to a website and prints a page. Unfortunately, I'm encountering difficulties in getting it to function properly. I've attempted using the selenium chrome driver, but with ...

javascriptc#selenium-webdriver

Is it possible to utilize a route path in a JavaScript AJAX request?

So I have a situation with an ajax call that is currently functioning in a .js file, utilizing: ... update: function(){ $.ajax({ url: '/groups/order_links', ... However, my preference would be to use the route path instead. To achieve ...

javascriptruby-on-railsajaxruby-on-rails-4url-routing

Exploring the capabilities of zooming on SVG elements using D3 within an Angular

I want to implement pan/zoom functionality on an SVG element. I came across a tutorial that suggested using d3.js for this purpose, you can find it here Below is the code I have tried: import { Component,AfterViewInit,OnInit } from '@angular/core&a ...

javascriptangulard3.jssvg

Error encountered while trying to authenticate user through post request

I have written a post route request function below to handle user login. However, I keep encountering 401 unauthorized errors when making the request. Can anyone suggest any modifications or refactorings that could potentially fix this issue? Thank you i ...

javascriptnode.jsexpressasynchronouspost

Automatically populating state and city fields with zip code information

Starting out in the world of web development, I encountered a challenge with a registration form I'm constructing for our company. For guidance, I referred to this resource: http://css-tricks.com/using-ziptastic/. This project marks my initial interac ...

javascriptjqueryajaxjsonforms

Is there a way for me to receive the response from the this.$store.dispatch method in vue.js 2?

Here is the structure of my component : <script> export default{ props:['search','category','shop'], ... methods: { getVueItems: function(page) { this.$store.disp ...

javascriptvue.jslaravel-5.3vuejs2vue-component

Ways to prevent prop changes from passing up the chain?

After some experimentation, I discovered that the props I passed to a component can actually be changed within the component and affect the parent. This behavior is discussed in the official documentation. While objects and arrays cannot be directly modi ...

javascriptvue.jspointersvuejs3components

Creating dynamic form fields using AngularJS

I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...

javascriptjqueryhtmlangularjs

Having trouble utilizing Vue CLI 3

When I tried to create a new Vue app using vue CLI 3 with the command vue create my-app, I encountered an error message saying zsh: command not found: vue. However, during the installation of vue CLI, I noticed the following warning: npm WARN deprecated ...

node.jsvue.jsnpmvue-cli-3

Access parent component's properties by clicking on child component

I'm uncertain if my current approach is the most effective solution to my issue, so I am open to alternative methods. My goal is to access the properties of the parent component when clicking on a child component (Image). Below is the code I have imp ...

javascriptreactjsreact-reduxjsx

What is the best way to ensure that a specific number of XHR callbacks have successfully completed before proceeding with further actions?

I have four requests that each have their own callback and can fire in any order. However, I need all the callbacks to finish successfully before executing mergeData. The issue with my current approach is that the initial parameter values do not refresh ...

javascriptajaxcallback

Showing the value of a JavaScript variable within an HTML input field

Here is an interesting HTML structure that includes a list and input field: <li> <span>19</span> </li> <li> <span>20</span> </li> ...

javascripthtmljquery

Having Trouble Displaying Material UI Icons in Your React App? Here's Why: "Invalid Objects as React Children"

I have been working on a basic app that showcases information about a patient. In this specific component, I am only displaying the name, occupation, and a symbol from Material UI to indicate whether the patient is male or female. However, when I attempt ...

reactjstypescriptmaterial-ui

Using Ruby on Rails to incorporate AJAX for posting and commenting functionality

Could use some assistance with implementing AJAX into my project. It seems like it should be a simple task, but I've been struggling with it for days. My goal is to have new comments appear without the need to reload the page. Below are references to ...

javascriptruby-on-railsrubyajax

Guidelines on how to retrieve information from an AJAX request in PHP

I am in the process of developing an application that involves calling a JS function in PHP like this: $data = "<script>JSFunction();</script>"; The JSFunction is defined as follows: function JSFunction(){ $.ajax({ type: 'POST' ...

javascriptphpjqueryajax

Tips for gathering all links from a JSON object

When dealing with a JSON object of any structure, simple or complex, what would be the most efficient way to extract all URLs from the data and store them in an array for iteration in JavaScript? { "url": "https://example.com:443/-/m ...

javascriptjsonregex

Using both Ajax and a standard submit can be applied to a single form in jQuery

I need to implement a confirm step on one of my pages. Here's what I want to achieve: When the user clicks 'submit', an AJAX request is triggered, which performs the necessary action and then displays a confirmation dialog If the user ...

javascriptjqueryajaxformsjquery-forms-plugin

A step-by-step guide on accessing an expressjs endpoint from a static html file using Vercel

I am working on a basic app that consists of one server named /api/index.js and one file called index.html located at the root. In the index.js file, there is a route defined as app.get("/api/mystuff", () => {...}) The index.html file makes a request ...

javascriptnode.jsexpressvercel

What could be causing the stores pinia to remain undefined?

I'm encountering an issue when trying to access the store as I receive an error stating that useUsersStore is not defined. The pi nia store has been correctly stored and exported to the component. https://stackblitz.com/edit/vitejs-vite-wg4uyx?file=s ...

vue.jsvuejs2frontendstorepinia