Skip to content

Commit 639ae08

Browse files
committed
fix(gatsby-plugin-sharp): Pass failOn to all pipelines (#37177)
Co-authored By: Jeff Tian <[email protected]>
1 parent b7d7b07 commit 639ae08

File tree

4 files changed

+25
-99
lines changed

4 files changed

+25
-99
lines changed

packages/gatsby-plugin-sharp/README.md

Lines changed: 19 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,28 @@ npm install gatsby-plugin-sharp
2626

2727
## How to use
2828

29-
```javascript
30-
// In your gatsby-config.js
31-
plugins: [
32-
{
33-
resolve: `gatsby-plugin-sharp`,
34-
options: {
35-
// Defaults used for gatsbyImageData and StaticImage
36-
defaults: {},
37-
// Set to none to allow builds to continue on image errors
38-
failOn: `none`,
39-
// deprecated options and their defaults:
40-
base64Width: 20,
41-
forceBase64Format: ``, // valid formats: png,jpg,webp
42-
useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
43-
stripMetadata: true,
44-
defaultQuality: 50,
29+
```js:title=gatsby-config.js
30+
module.exports = {
31+
plugins: [
32+
{
33+
resolve: `gatsby-plugin-sharp`,
34+
options: {
35+
// Defaults used for gatsbyImageData and StaticImage
36+
defaults: {},
37+
// Relates to "options.failOn" in https://sharp.pixelplumbing.com/api-constructor#parameters
38+
failOn: `warning`,
39+
},
4540
},
46-
},
47-
]
41+
]
42+
}
4843
```
4944

5045
## Options
5146

52-
- `defaults`: default values used for `gatsbyImageData` and `StaticImage` from [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image).
47+
- `defaults`: Default values used for `gatsbyImageData` and `StaticImage` from [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image).
5348
Available options are: `formats`,`placeholder`,`quality`,`breakpoints`,`backgroundColor`,`tracedSVGOptions`,`blurredOptions`,`jpgOptions`,`pngOptions`,`webpOptions`,`avifOptions`.
5449
For details of these, see [the reference guide](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image).
55-
- `failOn`: default = `warning`. By default builds will fail if there is a corrupted image. Set to `none` to continue the build on error. The image will return `undefined`. You can customize this option, see [`options.failOn`](https://sharp.pixelplumbing.com/api-constructor#parameters).
56-
57-
Other options are deprecated, and should only be used for the legacy `fixed` and `fluid` functions.
50+
- `failOn`: default = `warning`. By default, builds will fail if sharp finds an image with corrupted pixel values. When setting `failOn` to `none` the image will return `undefined` instead. You can customize this option, see [`options.failOn`](https://sharp.pixelplumbing.com/api-constructor#parameters). Images with corrupt image headers/metadata will always fail, regardless of this setting.
5851

5952
## Methods
6053

@@ -215,8 +208,8 @@ Rotate the image (after cropping). See Sharp's [rotate][7].
215208

216209
#### grayscale
217210

218-
Uses Sharp's [greyscale][8] to convert the source image to 8-bit greyscale, 256
219-
shades of grey, e.g.
211+
Uses Sharp's [grayscale][8] to convert the source image to 8-bit grayscale, 256
212+
shades of gray, e.g.
220213

221214
```graphql
222215
allImageSharp {
@@ -287,67 +280,9 @@ quoting the Sharp documentation:
287280
> <a href="https://en.wikipedia.org/wiki/Alpha_compositing">premultiplication</a>
288281
> will occur.
289282
290-
#### tracedSVG
291-
292-
Generates a traced SVG of the image (see [the original GitHub issue][9]) and
293-
returns the SVG as "[optimized URL-encoded][10]" `data:` URI. It used in
294-
[gatsby-image](/plugins/gatsby-image/) to provide an
295-
alternative to the default inline base64 placeholder image.
296-
297-
Uses [node-potrace][11] and [SVGO][12] under the hood. Default settings for
298-
node-potrace:
299-
300-
```javascript
301-
{
302-
color: `lightgray`,
303-
optTolerance: 0.4,
304-
turdSize: 100,
305-
turnPolicy: TURNPOLICY_MAJORITY,
306-
}
307-
```
308-
309-
All [node-potrace `Potrace` parameters][13] are exposed and can be set via the
310-
`traceSVG` argument:
311-
312-
```javascript
313-
fixed(
314-
traceSVG: {
315-
color: "#f00e2e"
316-
turnPolicy: TURNPOLICY_MINORITY
317-
blackOnWhite: false
318-
}
319-
) {
320-
src
321-
srcSet
322-
tracedSVG
323-
}
324-
```
325-
326-
### Setting a default quality
327-
328-
You can pass a default image quality to `sharp` by setting the `defaultQuality` option.
329-
330-
### Using MozJPEG
331-
332-
You can opt-in to use [MozJPEG][16] for jpeg-encoding. MozJPEG provides even
333-
better image compression than the default encoder used in `gatsby-plugin-sharp`.
334-
However, when using MozJPEG the build time of your Gatsby project will increase
335-
significantly.
336-
337-
To enable MozJPEG, you can set the `useMozJpeg` plugin option to `true` in
338-
`gatsby-config.js`.
339-
340-
For backwards compatible reasons, if `useMozJpeg` is not defined in the plugin
341-
options, the [environment variable](/docs/environment-variables/#environment-variables)
342-
`GATSBY_JPEG_ENCODER` acts as a fallback if set to `MOZJPEG`:
343-
344-
```shell
345-
GATSBY_JPEG_ENCODER=MOZJPEG
346-
```
347-
348-
### Allow build to continue on image processing error
283+
### Setting sharp's level of sensitivity to invalid images
349284

350-
By default, the build will fail when it encounters an error while processing an image. You can change this so that it continues the build process by setting the plugin option `failOnError` to `false`. Sharp will still throw an error and display it in the console as a GraphQL error, but it will not exit the process. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed.
285+
By default, the build will fail when sharp encounters an error while processing an image. You can change parts of this behavior by changing the `failOn` setting to `none`. In that case sharp will then ignore any errors relating to the pixel values/file structure of your file. However, if your image has corrupt image headers/metadata the build will still fail. It is important to note that any images that would have otherwise failed will not be accessible via `childImageSharp` until the underlying issue with the image is addressed.
351286

352287
### EXIF and ICC metadata
353288

packages/gatsby-plugin-sharp/src/gatsby-node.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ exports.pluginOptionsSchema = ({ Joi }) =>
208208
),
209209
stripMetadata: Joi.boolean().default(true),
210210
defaultQuality: Joi.number().default(50),
211-
// TODO(v5): Remove deprecated failOnError option
211+
// TODO(v6): Remove deprecated failOnError option
212212
failOnError: Joi.boolean().default(true),
213213
failOn: Joi.any()
214214
.valid(`none`, `truncated`, `error`, `warning`)

packages/gatsby-plugin-sharp/src/image-data.ts

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -396,17 +396,6 @@ export async function generateImageData({
396396
imageProps.placeholder = {
397397
fallback,
398398
}
399-
} else if (placeholder === `tracedSVG`) {
400-
const fallback: string = await traceSVG({
401-
file,
402-
args: tracedSVGOptions,
403-
fileArgs: args,
404-
cache,
405-
reporter,
406-
})
407-
imageProps.placeholder = {
408-
fallback,
409-
}
410399
} else if (metadata?.dominantColor) {
411400
imageProps.backgroundColor = metadata.dominantColor
412401
}

packages/gatsby-plugin-sharp/src/index.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -395,9 +395,10 @@ async function traceSVG(args) {
395395
}
396396

397397
async function stats({ file, reporter }) {
398+
const pluginOptions = getPluginOptions()
398399
let imgStats
399400
try {
400-
const pipeline = sharp()
401+
const pipeline = sharp({ failOn: pluginOptions.failOn })
401402
fs.createReadStream(file.absolutePath).pipe(pipeline)
402403

403404
imgStats = await pipeline.stats()
@@ -417,11 +418,12 @@ async function stats({ file, reporter }) {
417418

418419
let didShowTraceSVGRemovalWarningFluid = false
419420
async function fluid({ file, args = {}, reporter, cache }) {
420-
const options = healOptions(getPluginOptions(), args, file.extension)
421+
const pluginOptions = getPluginOptions()
422+
const options = healOptions(pluginOptions, args, file.extension)
421423

422424
let metadata
423425
try {
424-
const pipeline = sharp()
426+
const pipeline = sharp({ failOn: pluginOptions.failOn })
425427
fs.createReadStream(file.absolutePath).pipe(pipeline)
426428

427429
metadata = await pipeline.metadata()

0 commit comments

Comments
 (0)