Experiencing Sporadic HTTP 502 Bad Gateway Issues Upon Launching Vue3 + Vite + TypeScript Application on Nginx Server

I am currently developing a web application using Vue3, Vite, and TypeScript. Once I run npm run build, the application is successfully packaged into the 'dist' folder. I then proceed to upload this folder to a Linux server and host it using Nginx. However, there have been instances of encountering failures when attempting to access the website in the browser. A simple page refresh sometimes resolves the issue, particularly during the initial page load. It seems that once an initial successful access is made, subsequent page loads utilize the browser's cache.

There are two main types of issues that arise when the page fails to load:

One scenario involves a quick display of 'This page isn't working - www.MyDomain.com is currently unable to handle this request. HTTP ERROR 502'. Looking at the 'Network' tab, only one entry for 'www.MyDomain.com' with a status of 502 Bad Gateway is shown.

The other issue occurs when the page remains blank, but multiple entries appear in the 'Network' tab.

This second type of issue manifests when errors occur while accessing xxx.js or xxx.css files, each displaying the same 502 Bad Gateway status. For example, if my page includes a component called 'index.vue', post-building with 'npm run build', it might generate 'Index-_8-g66I0.css' or 'index-eurAr4hJ.js'. During the initial page load, these files may show up in red on the browser screen alongside a 502 Bad Gateway error.

I am eager to pinpoint the root cause of this problem and figure out how to troubleshoot it effectively.

My current environment setup: Linux CentOS 7, nginx version: nginx/1.20.1 enter image description here

Being relatively new to programming, I haven't tried many solutions yet. However, I'm beginning to suspect that network bandwidth could be a contributing factor, considering my server configuration: 2 cores, 2GB RAM, and 4Mbps bandwidth.

For reference, attached is a screenshot of F12 Network Requests in Normal Conditions "The provided screenshot showcases the F12 Developer Tools' Network tab, captured during a typical and successful page load. This visual aid is meant to illustrate the expected behavior of network requests under optimal circumstances. My hope is that it will help identify any anomalies or issues observed amidst the intermittent HTTP 502 errors. Your insights and recommendations based on this reference would be incredibly valuable. Thank you." enter image description here

I am seeking guidance on where to begin troubleshooting and whether my suspicion regarding network bandwidth holds merit. Any assistance or suggestions would be highly appreciated.

typescriptvue.jsnginxvitehttp-status-code-502

Answer №1

If you're encountering a similar issue, the fix may seem simple yet somewhat foolish.

What you need to do is ensure that the proxying HTTP server (such as NGINX, Apache, or Caddy) automatically retries a failed 502 request. It appears that the Vite server struggles with handling high traffic or connections.

For example, in NGINX:

location / {
            proxy_pass http://service:5173;

            # Define retry conditions
            proxy_next_upstream error timeout http_500 http_502 http_503 http_504;

            # Set maximum number of retry attempts
            proxy_next_upstream_tries 10;

            # Backend server response timeouts
            proxy_connect_timeout 5s;
            proxy_read_timeout 10s;
            proxy_send_timeout 10s;

            # Optionally enable caching for unsuccessful responses
            proxy_cache_revalidate on;
        }

And in Caddy (what I used):

domain.local {
    reverse_proxy {
        to service:5173
        header_up Host {labels.1}.{labels.0}
        header_up X-Forwarded-Host {labels.1}.{labels.0}

        # Retry settings
        lb_try_duration 30s
        lb_try_interval 1s
    }
}

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

Encountering dual TypeErrors while attempting to implement a login form with ReactiveFormsModule

Using Angular 11, I am facing an issue while creating a login form with ReactiveFormsModule. Upon loading the login page, a TypeError is displayed in the browser console. Additionally, after typing something in the input field, another TypeError appears. h ...

angulartypescript

Vue v-for is not displaying any items

This is my initial foray into Vue.Js. I am facing difficulties in displaying my nested object with the v-for directive. Whenever I use {{element.fist_name}} within the v-for, it just shows an empty list. Feel free to check out my code on jsfiddle. https: ...

arraysvue.jsv-for

Using Typescript to define the type for React's useState() setter function whenever

I'm working on setting up a React Context to handle parameters mode and setMode, which act as getter and setter for a React state. This is necessary in order to update the CSS mode (light / dark) from child components. I'm encountering a Typescr ...

javascriptreactjstypescripttypesreact-hooks

VueJS: Obtaining parent prop in child component when accessing the child component directly via vue-router without utilizing a centralized store like vuex or eventBus

In this codesandbox demo, the main component called home has a subcomponent called addItem. The parent component passes an array (as a prop) to the child component, allowing the child to add items to the parent's list. This is the typical way of passi ...

vue.jsvuejs2vue-router

The compiler encounters an issue when attempting to import a type from the global.d.ts

You can find the complete NPM package on GitHub here. tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs" } } global.d.ts interface Foo { } index.ts const x: Foo = {}; When we try to build, we encounter this error: ...

typescript

What is the reason for an optional object property being assigned the 'never' type?

I'm having trouble understanding the code snippet below: interface Example { first?: number, second?: { num: number } } const example: Example = { first: 1, second: { num: 2 } } function retrieveValue<Object, Key exte ...

typescripttypescript-generics

Using custom directives in Vue 3 does not allow passing data to a method

Within my HTML, I make a reference to the directive: v-init:url="myurlhere" data() { return { currentPage: 1, url: '', news: '', } }, directives: { init: { mo ...

vue.jsvuejs3

Dynamic style binding with the ability to choose from four unique colors

I am looking to customize my table design similar to the image here: https://i.sstatic.net/ylMCN.png I have tried using the code below, but it only works for 2 colors. <table *ngFor="let item of notif"> <tr class="cell" [style.border-color]= ...

htmlangulartypescriptdata-binding

Unit testing Angular components can often uncover errors that would otherwise go unnoticed in production. One common

I need assistance writing a simple test in Angular using Shallow render. In my HTML template, I am utilizing the Async pipe to display an observable. However, I keep encountering the following error: Error: InvalidPipeArgument: '() => this.referenc ...

typescriptjasmineangular11

What is the best way to remove "node_modules" from my code coverage analysis?

Developing a web application in TypeScript involves using gulp with various plugins like browserify, tsify, babel, and istanbul to convert TypeScript code into JavaScript, instrument it for coverage analysis, and create sourcemaps. Testing this instrumente ...

javascripttypescriptgulpbabeljscypress

In TypeScript, what is the method to specifically retrieve only resolved Promises while disregarding errors?

I have come up with a function that is supposed to take an array of Promises and only return the resolved ones while ignoring any errors. It's similar to Promise.all but without considering errors. The challenge is implementing this function correctly ...

javascripttypescriptpromisetypescript-generics

What is the best way to display multiple levels of content within a v-for loop?

I am looking to create 20 expansion panels using a v-for loop to display the categories fetched from my JSON in each panel header. Additionally, I want to populate each expansion panel's content with the corresponding names retrieved from allItems dat ...

vue.jsnestednuxt.jsvuetify.jspopulate

The use of custom loaders alongside ts-node allows for more flexibility

Is it possible to utilize ts-node with a custom loader? The documentation only mentions enabling esm compatibility. ts-node --esm my-file.ts I am attempting to implement a custom loader for testing an ESM module, but I prefer not to rely on node for compi ...

javascriptnode.jstypescriptes6-modules

Steps for invoking the next() function within the beforeRouterEnter guard

I've been grappling with this issue for countless hours now. I'm currently using Vue3 My goal is to implement a beforeRouterEnter guard in order to check the user's role upon login and direct them to the appropriate route accordingly. Once ...

javascriptvue.jsvuexrouter

Navigating the syntax of React with Typescript - Feeling lost

As I embark on my journey with Typescript/React, I find myself trying to decode the meanings behind it all. Coming from a C# background, this new environment presents a unique challenge for me. Despite going through several tutorials, I still find myself p ...

reactjstypescript

Is there a way for me to dynamically retrieve the properties of an object in TypeScript?

My form has multiple fields for data input: <input type="text" placeholder={`title`} onChange={(e) => updateField(`title`, e)} /> <input type="text" placeholder={`description`} onChange={(e) => upd ...

javascriptreactjstypescript

Unable to utilize Angular object due to the JSON format of the data

I'm facing an issue in my Angular 4 application with TypeScript. I am using a get() method and a subscribe() method to receive a remote object in JSON format and deserialize it to match a class structure. When all the class data fields are mirrored in ...

jsonangularclasstypescriptobject

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

javascripthtmlcsstypescriptvue.js

What is the best way to access and manipulate a component's data from within the component itself?

When working with a Vue.js script, it is possible to combine functions and Vue data in a standalone setup: var vm = new Vue ({ (...) data: { number: 0 } (...) }) function return100 () { return 100 } vm.number = return100() This creates a ...

vue.jsvue-component

Error: Unable to locate the module: Vue-Picture-BD-Marker

After successfully building my Vue project on my personal MacBook and running npm build without any issues, I encountered a problem when trying to deploy it on my CentOS server using Jenkins. The build failed with the following log: ERROR in ./node_modules ...

vue.jsnpmwebpackvuejs2module