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.

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

What is the importance of utilizing clearInterval to restart the timer in ReactJS?

Consider the code snippet provided below: useEffect(() => { const interval = setInterval(() => { setSeconds(seconds => seconds + 1); }, 1000); return () => clearInterval(interval); }, []); What is the purpose of returning ...

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

Error: Unused variable: '_' has been declared but not utilized

While working on my Next.JS project with TypeScript, I encountered an issue when trying to run the build. The error message stated: Type error: '_' is declared but its value is never read. I attempted to resolve this by setting "noUnusedLocals" ...

Retrieve text excluding a specific class or id using jQuery

I need help with extracting text from an HTML div. <div id="example"> I am writing a <span class='outer'>query for help <span class='inner'>on a coding forum</span></span> </div> const te ...

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

Something seems off with the color of the getImageData when using Fabric JS getContext('2d')

Website: Currently, I am working on adding an eye dropper feature to my website. It functions perfectly at a resolution of 1080p, but when tested on higher or lower resolutions, it malfunctions. Here is the basic code snippet: var ctx = canvas.getContex ...

Issues with Vercel's JavaScript Environment Variables Accessibility

I am encountering an issue trying to access environment variables on Vercel using JavaScript (TypeScript). Despite setting them under /settings/environment-variables, I receive undefined when attempting to access them with process.env.TURSO_DATABASE_URL du ...

Unable to use addEventListener on media queries exceeding 768px

When testing the site on Firefox 49 and Chrome 63, I encountered the same issue. Clicking on each card worked fine on iPhone4, Galaxy 5, and iPhone 8 using Chrome. However, after switching orientations from 640px to 320px portrait view, the top card would ...

VueJS Router error: The variable $route is undefined

Check out my component: const Vue = require("vue/dist/vue.js"); const qs = require("querystring"); module.exports = Vue.component("Page",function(resolve){ console.log(pageRoute); let id = pageRoute.params.id; fetch("/getPage.json",{ ...

Connection to Mysql database terminated for Node.js

I'm currently working on integrating a basic form into my database to enhance my understanding of node.js. However, I keep encountering an intriguing error during the process... error when connecting to db: { [Error: Connection lost: The server close ...

Enhancing a json file on-the-fly with JavaScript/jQuery

I'm currently working with a student.json file that has this structure: { "nodes":[ {"name":"Anup"}, {"name":"Panwar"} ], "links":[ {"source":0,"target":1} ] } My objective is to receive user i ...

Tips for repairing a button using a JavaScript function in an HTML document

I am currently working on extracting titles from body text. To achieve this, I have created a button and linked my function to it. The issue I am facing is that when I click on the button, it disappears from its original position. I intend to keep it in pl ...

Navigating intricate data structures within React

As a newcomer to React, I could use some assistance with a project I am working on. The application is similar to Slack, where users can create new teams and channels. However, I am encountering difficulties in managing the state of the data input throug ...

Creating a custom AngularJS HTTP interceptor that targets specific URLs

Is there a way to configure an $http interceptor to only respond to specific URL patterns? For example, I want the interceptor to only intercept requests that match "/api/*" and ignore any other requests. ...

What is the best way to determine the total number of rows in a JSON file?

Here is the JSON data I have: [0:{name:"jason",height:"150cm"}, 1:{name:"henry",height:"178cm"}] In my function, I am attempting to create a for loop like this: function DrawTable(output) { var ...

A URL that quickly updates live content from a backend script

As a beginner, I am seeking guidance as to where to start on my journey of learning. I need assistance in creating a script that can efficiently fit within a small URI space and constantly updates itself with information from a server script. My target bro ...

Switch between parent elements in Angular JS Templates while preserving children elements

It seems like I'm overlooking a rather basic feature in a templating engine. Consider the following template: <a ng-if="icon.link" href="icon.link"> <i ng-class="['fa',icon.icon_class]"></i> </a> <span ng-if= ...

Locate all buttons on the page that have an onclick function attached to them, and

I seem to have run into an issue. I am currently working with Java and WebDriver. My goal is to navigate to , locate the item "ipod", receive 4 results, and then compare them by clicking on the "compare" button beneath each item. However, I am encounteri ...

When attempting to call a recursive method in Vue with a changing `this` object, an error is thrown: "RangeError: Maximum call stack size exceeded"

Update integrate codePen into the project. https://codepen.io/jiaxi0331/pen/xxVZBMz Description encountered an issue while trying to call the parent method recursively Code export default { methods: { dispatch(componentName, event, value) { ...

Utilizing Angular 2 for transforming JSON data into Angular classes

I have been working through the Angular2 getting started guide to kickstart my own application development. So far, I have managed to retrieve JSON objects from a local file and display them in angular2 templates. However, the challenge arises when the str ...