Add errors for invalid `placeholder=blur` usage #25953

styfle · 2021-06-09T21:51:08Z

There are strict conditions for using placeholder=blur documented in #25949 but this will give the user a better understanding during next dev and links to the error.

Error when placeholder=blur and no blurDataURL
The Error for small images with placeholder=blur has been changed to a warning
Added support for blurring a webp image
Added error page linking to relevant docs

atcastle

Left a few comments about error message wording but this looks good.

packages/next/client/image.tsx

errors/placeholder-blur-data-url.md

ijjk · 2021-06-10T18:13:56Z

errors/placeholder-blur-data-url.md

+
+The `blurDataURL` might be missing because your using a string for `src` instead of a static import.
+
+Or `blurDataURL` might be missing because the static import is an unsupported image format.


Suggested change

Or `blurDataURL` might be missing because the static import is an unsupported image format.

Or `blurDataURL` might be missing because the static import is not one of the automatic blur supported types.

Is there another PR we are adding the supported image types for automatic blur in the docs we could point to here?

@ijjk I don't think so. We need to add additional codecs to squoosh to get wider support.

See original PR here: #22253

ijjk · 2021-06-10T18:33:19Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
buildDuration	15.6s	15.1s	-499ms
buildDurationCached	3.6s	3.6s	-29ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +2.02 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.047	3.125	⚠️ +0.08
/ avg req/sec	820.6	799.9	⚠️ -20.7
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.828	1.771	-0.06
/error-in-render avg req/sec	1367.75	1411.59	+43.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
index.html gzip	573 B	573 B	✓
link.html gzip	581 B	581 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
buildDuration	17.5s	17.4s	-18ms
buildDurationCached	4.9s	5s	⚠️ +64ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +2.02 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_error.js	16.9 kB	16.9 kB	-2 B
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	-4 B
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	-6 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
buildDuration	13.5s	13.3s	-184ms
buildDurationCached	5.5s	5.4s	-124ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +2.02 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.151	3.079	-0.07
/ avg req/sec	793.47	811.88	+18.41
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.813	1.787	-0.03
/error-in-render avg req/sec	1379.14	1398.86	+19.72

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.17 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js warn-placeholder-blur	Change
index.html gzip	627 B	627 B	✓
link.html gzip	633 B	633 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: c13d0d0

There are strict conditions for using `placeholder=blur` documented in vercel#25949 but this will give the user a better understanding during `next dev` and links to the error. - Error when `placeholder=blur` and no `blurDataURL` - The Error for small images with `placeholder=blur` has been changed to a warning - Added support for blurring a webp image - Added error page linking to relevant docs

styfle added 2 commits June 9, 2021 17:08

Add errors for invalid placeholder=blur usage

441e054

Add tests

2dbb454

styfle requested review from Joonpark13 and atcastle June 9, 2021 21:51

styfle requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners June 9, 2021 21:51

ijjk added the type: next label Jun 9, 2021

This comment has been minimized.

Sign in to view

atcastle previously approved these changes Jun 9, 2021

View reviewed changes

packages/next/client/image.tsx Show resolved Hide resolved

packages/next/client/image.tsx Outdated Show resolved Hide resolved

Add better error message, add webp

f77b70d

styfle dismissed atcastle’s stale review via f77b70d June 10, 2021 18:00

ijjk added the type: documentation label Jun 10, 2021

styfle requested a review from atcastle June 10, 2021 18:02

styfle added 2 commits June 10, 2021 14:06

Merge branch 'canary' into warn-placeholder-blur

239cf8c

Clarify error docs why it could happen

a07da7d

timneutkens reviewed Jun 10, 2021

View reviewed changes

errors/placeholder-blur-data-url.md Outdated Show resolved Hide resolved

styfle added 2 commits June 10, 2021 14:12

Add supported types

3d1ca47

Fix grammar

c5f6825

styfle requested a review from timneutkens June 10, 2021 18:13

timneutkens previously approved these changes Jun 10, 2021

View reviewed changes

ijjk reviewed Jun 10, 2021

View reviewed changes

Update test name

c13d0d0

styfle dismissed timneutkens’s stale review via c13d0d0 June 10, 2021 18:20

styfle requested review from timneutkens and ijjk June 10, 2021 18:20

ijjk approved these changes Jun 10, 2021

View reviewed changes

kodiakhq bot merged commit d8b59f3 into canary Jun 10, 2021

kodiakhq bot deleted the warn-placeholder-blur branch June 10, 2021 18:51

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add errors for invalid `placeholder=blur` usage #25953

Add errors for invalid `placeholder=blur` usage #25953

styfle commented Jun 9, 2021 •

edited

This comment has been minimized.

atcastle left a comment

ijjk Jun 10, 2021

styfle Jun 10, 2021 •

edited

ijjk commented Jun 10, 2021


		The `blurDataURL` might be missing because your using a string for `src` instead of a static import.

		Or `blurDataURL` might be missing because the static import is an unsupported image format.

Add errors for invalid placeholder=blur usage #25953

Add errors for invalid placeholder=blur usage #25953

Conversation

styfle commented Jun 9, 2021 • edited

This comment has been minimized.

atcastle left a comment

Choose a reason for hiding this comment

ijjk Jun 10, 2021

Choose a reason for hiding this comment

styfle Jun 10, 2021 • edited

Choose a reason for hiding this comment

ijjk commented Jun 10, 2021

Stats from current PR

Add errors for invalid `placeholder=blur` usage #25953

Add errors for invalid `placeholder=blur` usage #25953

styfle commented Jun 9, 2021 •

edited

styfle Jun 10, 2021 •

edited