Vite custom build for a React app to place 'onerror' in the script file load tags #15940

mrajaei76 · 2024-02-17T10:20:58Z

mrajaei76
Feb 17, 2024

I have a react app and a function named 'handleScriptLoadErrors' in index.html file in the head tag.

function handleScriptLoadErrors() { console.error("script load error"); }

my index.html file content:

<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
        <title>test</title>
        <link rel="icon" href="/favicon.ico" sizes="any">
        <script>
            function handleScriptLoadErrors() {
                  console.error("script load error"); 
            }
        </script>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.jsx"></script>
    </body>
</html>

I want, when I build my app with Vite, for it to place 'onerror' in the script file load (onerror="handleScriptLoadErrors()"). The expected output after build:

<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
        <title>test</title>
        <script>
            function handleScriptLoadErrors() {
                console.error("script load error");
            }
        </script>
        <script type="module" crossorigin src="/assets/index-CxkFGHTY.js" onerror="handleScriptLoadErrors()"></script>
        <link rel="stylesheet" crossorigin href="/assets/index-DplaqiRA.css">
        <link rel="manifest" href="/manifest.webmanifest">
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

how can i do this?

digitalacorn · 2024-06-14T09:01:26Z

digitalacorn
Jun 14, 2024

I haven't found an ideal solution to this but have gone with a script at the end of the body like the one below which adds an onerror attribute retrospectively. My vite scripts are loaded async. Without an async attribute on earlier scripts in the dom this almost certainly won't work.

function handleScriptLoadErrors() {
	console.error("script load error");
}
const scripts  = document.getElementsByTagName("script");
for (let i=0; i<scripts.length; i++) {
	let script = scripts[i];
	if (script.src && script.async) {
		script.setAttribute('onerror', 'handleScriptLoadErrors();');
	}
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vite custom build for a React app to place 'onerror' in the script file load tags #15940

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Vite custom build for a React app to place 'onerror' in the script file load tags #15940

mrajaei76 Feb 17, 2024

Replies: 1 comment

digitalacorn Jun 14, 2024

mrajaei76
Feb 17, 2024

digitalacorn
Jun 14, 2024