Fix `onLoadingComplete()` callback when image src is Data URL #29367

styfle · 2021-09-24T19:19:55Z

Fixes #29363

Bug

Related issues linked using fixes #number
Integration tests added

test/integration/image-component/default/pages/on-loading-complete.js

ijjk · 2021-09-26T12:26:32Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
buildDuration	12.8s	12.9s	⚠️ +72ms
buildDurationCached	3.4s	3.4s	-59ms
nodeModulesSize	182 MB	182 MB	⚠️ +68 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.919	2.922	0
/ avg req/sec	856.58	855.46	⚠️ -1.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.407	1.39	-0.02
/error-in-render avg req/sec	1776.67	1798.47	+21.8

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27 kB	27 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.8 kB	70.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.15 kB	⚠️ +5 B
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	⚠️ +5 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
_buildManifest.js gzip	493 B	494 B	⚠️ +1 B
Overall change	493 B	494 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
index.html gzip	538 B	538 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-b247d7d93b59ee105030.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-a44f9781a95a9ce41ff2.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-ac34fa70dbc1572d05a7.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-6c203ee999e47493e19d.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -110,6 +110,8 @@
       }
 
       var loadedImageURLs = new Set();
+      var emptyDataURL =
+        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 
       if (false) {
       }
@@ -328,7 +330,7 @@
         }
 
         var handleLoad = function handleLoad() {
-          if (!img.src.startsWith("data:")) {
+          if (img.src !== emptyDataURL) {
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p["catch"](function() {}).then(function() {
               if (placeholder === "blur") {
@@ -591,8 +593,7 @@
         }
 
         var imgAttributes = {
-          src:
-            "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+          src: emptyDataURL,
           srcSet: undefined,
           sizes: undefined
         };

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
buildDuration	6.7s	6.8s	⚠️ +98ms
buildDurationCached	3.4s	3.3s	-91ms
nodeModulesSize	182 MB	182 MB	⚠️ +68 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.865	2.991	⚠️ +0.13
/ avg req/sec	872.68	835.87	⚠️ -36.81
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.333	1.454	⚠️ +0.12
/error-in-render avg req/sec	1875.19	1719.5	⚠️ -155.69

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
675-HASH.js gzip	13.8 kB	13.8 kB	⚠️ +4 B
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	34.9 kB	34.9 kB	✓
webpack-HASH.js gzip	1.65 kB	1.65 kB	✓
Overall change	101 kB	101 kB	⚠️ +4 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
_app-HASH.js gzip	1.32 kB	1.32 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.8 kB	2.8 kB	✓
head-HASH.js gzip	356 B	356 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	573 B	573 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	2.2 kB	2.2 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix-onload-for-data-url	Change
index.html gzip	539 B	539 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-57657d9807f56726f7b7.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002F675-3a2a4d3823c95ac202d4.js",
+    "static\u002Fchunks\u002F675-e36478c6435f19ec761d.js",
     "static\u002Fchunks\u002Fpages\u002Fimage-ffd5f0bef0d7723148e9.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-7f8f722ace4fedf0a7aa.js"],

Diff for 675-HASH.js

@@ -2452,6 +2452,8 @@
         return target;
       }
       var loadedImageURLs = new Set();
+      var emptyDataURL =
+        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
       if (typeof window === "undefined") {
         __webpack_require__.g.__NEXT_IMAGE_IMPORTED = true;
       }
@@ -2645,7 +2647,7 @@
           return;
         }
         var handleLoad = function() {
-          if (!img.src.startsWith("data:")) {
+          if (img.src !== emptyDataURL) {
             var p = "decode" in img ? img.decode() : Promise.resolve();
             p.catch(function() {}).then(function() {
               if (placeholder === "blur") {
@@ -2884,8 +2886,7 @@
           }
         }
         var imgAttributes = {
-          src:
-            "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+          src: emptyDataURL,
           srcSet: undefined,
           sizes: undefined
         };

Commit: 53126ae

ijjk · 2021-09-26T12:31:16Z

Failing test suites

Commit: 53126ae

test/development/basic/hmr.test.ts

basic HMR > Error Recovery > should recover after undefined exported as default
basic HMR > Error Recovery > should recover from errors in getInitialProps in client
basic HMR > Error Recovery > should recover after an error reported via SSR

Expand output

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  600 |         await next.patchFile(aboutPage, aboutContent)
  601 |
> 602 |         if (browser) {
      |                       ^
  603 |           await check(
  604 |             () => getBrowserBodyText(browser),
  605 |             /This is the about page/

  at Object.<anonymous> (development/basic/hmr.test.ts:602:23)

● basic HMR › Error Recovery › should recover from errors in getInitialProps in client

TIMED OUT: /Hello/

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (development/basic/hmr.test.ts:659:8)

● basic HMR › Error Recovery › should recover after an error reported via SSR

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  701 |
  702 |         throw err
> 703 |       } finally {
      |                  ^
  704 |         if (browser) {
  705 |           await browser.close()
  706 |         }

  at Object.<anonymous> (development/basic/hmr.test.ts:703:18)

Fix onLoadingComplete() callback when image src is Data URL

742526e

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Sep 24, 2021

styfle mentioned this pull request Sep 24, 2021

OnLoadingComplete not working when passing function, but works when console log #29363

Closed

This comment has been minimized.

Sign in to view

Add test

8b6bff8

styfle marked this pull request as ready for review September 24, 2021 19:57

styfle requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners September 24, 2021 19:57

ijjk reviewed Sep 24, 2021

View reviewed changes

test/integration/image-component/default/pages/on-loading-complete.js Show resolved Hide resolved

This comment has been minimized.

Sign in to view

ijjk approved these changes Sep 24, 2021

View reviewed changes

Merge branch 'canary' into fix-onload-for-data-url

bb5a198

This comment has been minimized.

Sign in to view

Merge branch 'canary' into fix-onload-for-data-url

53126ae

kodiakhq bot merged commit 2271cd8 into canary Sep 26, 2021

kodiakhq bot deleted the fix-onload-for-data-url branch September 26, 2021 15:03

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix `onLoadingComplete()` callback when image src is Data URL #29367

Fix `onLoadingComplete()` callback when image src is Data URL #29367

styfle commented Sep 24, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 26, 2021

Diffs

Diffs

ijjk commented Sep 26, 2021

Fix onLoadingComplete() callback when image src is Data URL #29367

Fix onLoadingComplete() callback when image src is Data URL #29367

Conversation

styfle commented Sep 24, 2021 • edited

Bug

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 26, 2021

Stats from current PR

Diffs

Diffs

ijjk commented Sep 26, 2021

Failing test suites

Fix `onLoadingComplete()` callback when image src is Data URL #29367

Fix `onLoadingComplete()` callback when image src is Data URL #29367

styfle commented Sep 24, 2021 •

edited