Fix #27747

Author: janicklas-ralph

packages/next/client/script.tsx

@@ -56,18 +56,19 @@ const loadScript = (props: ScriptProps): void => {
   const el = document.createElement('script')
 
   const loadPromise = new Promise<void>((resolve, reject) => {
-    el.addEventListener('load', function () {
+    el.addEventListener('load', function (e) {
       resolve()
       if (onLoad) {
-        onLoad.call(this)
+        onLoad.call(this, e)
       }
     })
-    el.addEventListener('error', function () {
-      reject()
-      if (onError) {
-        onError()
-      }
+    el.addEventListener('error', function (e) {
+      reject(e)
     })
+  }).catch(function (e) {
+    if (onError) {
+      onError(e)
+    }
   })
 
   if (src) {

test/integration/script-loader/pages/page3.js

@@ -15,6 +15,14 @@ const Page = () => {
         src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptLazyOnload"
         strategy="lazyOnload"
       ></Script>
+      <Script
+        src="https://somebrokenlink.doesntexist"
+        strategy="lazyOnload"
+        onError={(e) => {
+          console.log('error');
+          console.log(e);
+        }}
+      />
       <div>page3</div>
     </div>
   )

test/integration/script-loader/test/index.test.js

@@ -69,6 +69,10 @@ describe('Script Loader', () => {
       await browser.waitForElementByCss('#onload-div')
       await waitFor(1000)
 
+      const logs = await browser.log('browser')
+      const filteredLogs = logs.filter((log) => !log.message.includes('Failed to load resource'))
+      expect(filteredLogs.length).toBe(0)
+
       async function test(id) {
         const script = await browser.elementById(id)
         const endScripts = await browser.elementsByCss(