nodemon app crashed after submitting form data

Question

I am developing a registration form using react and storing the data in a mysql database. Every time I start running the server and the client app, I can only click submit on the form once. After the click, the data gets stored in the database, but the following error appears on the server side:

[nodemon] starting `node server.js --port 3001`
running on port 3001
null
events.js:377
      throw er; // Unhandled 'error' event
      ^

Error: Connection lost: The server closed the connection.
    at Protocol.end (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:112:13)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:526:10)
    at Socket.emit (events.js:412:35)
    at endReadableNT (internal/streams/readable.js:1317:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21)
Emitted 'error' event on Connection instance at:
    at Connection._handleProtocolError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:423:8)   
    at Protocol.emit (events.js:400:28)
    at Protocol._delegateError (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\protocol\Protocol.js:398:10)   
    at Protocol.end (C:\Users\user\OneDrive\Documents\websiteserver\node_modules\mysql\lib\protocol\Protocol.js:116:8)
    at Socket.<anonymous> (C:\Users\user\OneDrive\Documents\website\server\node_modules\mysql\lib\Connection.js:94:28)
    [... lines matching original stack trace ...]
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  fatal: true,
  code: 'PROTOCOL_CONNECTION_LOST'
}
[nodemon] app crashed - waiting for file changes before starting...

So I can't submit another form unless I restart the server. Does anyone know how to solve it?

My client side code:

import React, {useState} from 'react'
import { 
    FormWrap,
    Container, 
    Icon, 
    FormContent, 
    Form,
    FormH1,
    FormLabel, 
    FormInput,
    Text, 
    FormButton, 
    TextLeft,
    Heading,
    Subtitle,
    TextWrapper,
    LogoPage} 
from './SignInElements'
import Axios from 'axios'




const SignIn = ({}) => {
    const[name, setname] = useState("")
    const[cpf, setcpf] = useState("")
    const[tel, settel] = useState("")
    const[email, setemail] = useState("")

    const register = () => {
        Axios.post('http://localhost:3001/register/',  {
            name: name,
            cpf: cpf,
            tel: tel,
            email: email,
        }).then((response) => {console.log(response)});
    };
    

    return (
        <>
            <Container>
                <FormWrap>
                    <FormContent>
                        <TextLeft  action="#">
                            <Icon to="/"> <LogoPage src={require('../../images/Brand.svg').default} /> </Icon>
                            <TextWrapper>
                                <Heading>Test</Heading>
                                <Subtitle>Test</Subtitle>
                            </TextWrapper>
                        </TextLeft>
                        <Form action="#">
                            <FormLabel htmlFor="for">name</FormLabel>
                            <FormInput placeholder="Nome Sobrenome" type="text" required onChange={(e) => setname(e.target.value) }/>
                            <FormLabel htmlFor="for">cpf</FormLabel>
                            <FormInput placeholder="000.000.000-00" type="number" required  onChange={(e) => setcpf(e.target.value) }/>
                            <FormLabel htmlFor="for">tel</FormLabel>
                            <FormInput placeholder="(DDD) 90000-0000" type="text" required onChange={(e) => settel(e.target.value) } />
                            <FormLabel htmlFor="for">email</FormLabel>
                            <FormInput placeholder="[email protected]" type="email" required onChange={(e) => setemail(e.target.value) } />
                            <FormButton type="submit" onClick={register}>Register</FormButton>
                        </Form>
                    </FormContent>
                </FormWrap>
            </Container>
        </>
    )
}

export default SignIn

My server side code:

const express = require("express");
const mysql = require("mysql");

const app = express();
const cors = require("cors");

app.use(express.json());

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header("Access-Control-Allow-Headers", "x-access-token, Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

const db = mysql.createConnection({
    user: "--",
    host: "--",
    password: "--",
    database: "--"

});

app.post('/register', (req, res) => {
    const name = req.body.name;
    const cpf = req.body.cpf;
    const tel = req.body.tel;
    const email = req.body.email;
    db.query("INSERT INTO table (name, cpf, tel, email) VALUES (?,?,?,?)", 
    [name,cpf,tel,email],
    (err,result)=> {console.log(err);
    }
    )
});



app.listen(3001, () => {
    console.log("running on port 3001")
});

Answer 1

try to force mysql to keep the connection alive. This code should do it

setInterval(function () {
  db.query('SELECT 1');
  }, 5000);