Fix next/script unhandled promise rejection (#27903)

## Bug - [x] fixes #27747 - [x] Integration tests added
vercel · Aug 10, 2021 · 43393d5 · 43393d5
1 parent eb871d3
commit 43393d5
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/packages/next/client/script.tsx b/packages/next/client/script.tsx
@@ -10,8 +10,8 @@ const LoadCache = new Set()
 export interface ScriptProps extends ScriptHTMLAttributes<HTMLScriptElement> {
   strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
   id?: string
-  onLoad?: () => void
-  onError?: () => void
+  onLoad?: (e: any) => void
+  onError?: (e: any) => void
   children?: React.ReactNode
 }
 
@@ -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) {

diff --git a/test/integration/script-loader/pages/page3.js b/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://example.com/doesntexist"
+        strategy="lazyOnload"
+        onError={(e) => {
+          console.log('error')
+          console.log(e)
+        }}
+      />
       <div>page3</div>
     </div>
   )

diff --git a/test/integration/script-loader/test/index.test.js b/test/integration/script-loader/test/index.test.js
@@ -69,6 +69,12 @@ 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(