Home

Awesome

npm version downloads build status coverage status Node.JS version

<img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/logo.svg" width="100%" />

awesome-ajv-errors pretty-prints ajv errors

It has a gorgeous human-understandable output, predicts human errors and suggests fixes.

Contents

Versions

Examples

<!-- BEGIN EXAMPLES -->

Similar property name

Suggest similar properties

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Second-level two similar properties",
  "type": "object",
  "properties": {
    "foo": {
      "type": "object",
      "properties": {
        "bar": {},
        "bak": {}
      },
      "additionalProperties": false
    }
  }
}

data.json

{
  "foo": {
    "bar": "42",
    "baz": "33"
  }
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/similar-property-name.svg" />

Multiple similar property names

Suggests multiple valid property names

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Second-level three similar properties",
  "type": "object",
  "properties": {
    "foo": {
      "type": "object",
      "properties": {
        "bar": {},
        "bak": {},
        "bam": {}
      },
      "additionalProperties": false
    }
  }
}

data.json

{
  "foo": {
    "bar": "42",
    "baz": "33"
  }
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/multiple-similar-property-names.svg" />

Type typo

Suggests the valid value type when mistaken

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "One option (number to string)",
  "type": "object",
  "properties": {
    "foo": {
      "anyOf": [
        {
          "type": "string"
        }
      ]
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo.svg" />

Type typo (reverse)

Suggests the valid value type when mistaken

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "One option (string to number)",
  "type": "object",
  "properties": {
    "foo": {
      "anyOf": [
        {
          "type": "number"
        }
      ]
    }
  }
}

data.json

{
  "foo": "42"
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--reverse-.svg" />

Type typo (one much better option)

When the type mismatch, and one type is much "better" than the rest (as in probably the right solution), it will be suggested for conversion

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Two options",
  "type": "object",
  "properties": {
    "foo": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "boolean"
        }
      ]
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--one-much-better-option-.svg" />

Type typo (one much better option out of multiple)

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Three options",
  "type": "object",
  "properties": {
    "foo": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "boolean"
        },
        {
          "type": "null"
        }
      ]
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/type-typo--one-much-better-option-out-of-multiple-.svg" />

Array too small

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "2 too few",
  "type": "object",
  "properties": {
    "foo": {
      "type": "array",
      "minItems": 3
    }
  }
}

data.json

{
  "foo": [
    1
  ]
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/array-too-small.svg" />

Number too big

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Less than or equal to",
  "type": "object",
  "properties": {
    "foo": {
      "type": "number",
      "maximum": 17
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/number-too-big.svg" />

Not in enum set

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "One value of same type",
  "type": "object",
  "properties": {
    "foo": {
      "enum": [
        41
      ]
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/not-in-enum-set.svg" />

Almost in enum set (wrong convertible type)

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Two options (one of different type)",
  "type": "object",
  "properties": {
    "foo": {
      "enum": [
        41,
        "42"
      ]
    }
  }
}

data.json

{
  "foo": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/almost-in-enum-set--wrong-convertible-type-.svg" />

Almost in enum set (wrong convertible type), multiple options

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Four options (one of different type)",
  "type": "object",
  "properties": {
    "foo": {
      "enum": [
        "falso",
        "other",
        "False",
        false
      ]
    }
  }
}

data.json

{
  "foo": "false"
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/almost-in-enum-set--wrong-convertible-type---multiple-options.svg" />

Invalid format (time)

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "time invalid",
  "type": "object",
  "properties": {
    "foo": {
      "type": "string",
      "format": "time"
    }
  }
}

data.json

{
  "foo": "11:22:334"
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/invalid-format--time-.svg" />

Invalid format (e-mail)

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "email invalid",
  "type": "object",
  "properties": {
    "foo": {
      "type": "string",
      "format": "email"
    }
  }
}

data.json

{
  "foo": "quite@invalid@email.com"
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/invalid-format--e-mail-.svg" />

if-then not satisfied

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "if-then on first-level object",
  "properties": {
    "foo": {
      "if": {
        "properties": {
          "firstName": {
            "const": true
          }
        }
      },
      "then": {
        "required": [
          "lastName"
        ]
      }
    }
  }
}

data.json

{
  "foo": {
    "firstName": true
  }
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/if-then-not-satisfied.svg" />

Multiple of

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Multiple of",
  "type": "object",
  "properties": {
    "foo": {
      "type": "number",
      "multipleOf": 4
    }
  }
}

data.json

{
  "foo": 17
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/multiple-of.svg" />

Required property

<details style="padding-left: 32px;border-left: 4px solid gray;"> <summary>JSON Schema and data</summary> <p>

schema.json

{
  "title": "Root-level required",
  "type": "object",
  "properties": {
    "foo": {}
  },
  "required": [
    "foo"
  ]
}

data.json

{
  "bar": 42
}
</p> </details> <img src="https://raw.githubusercontent.com/grantila/awesome-ajv-errors/master/assets/examples/required-property.svg" /> <!-- END EXAMPLES -->

Usage

Import the ajv package, and prettify from awesome-ajv-errors:

import * as Ajv from 'ajv'
import { prettify } from 'awesome-ajv-errors'

Create an ajv instance and validate objects:

const ajv = new Ajv( { allErrors: true } ); // allErrors is optional

let data, schema; // Get the JSON schema and the JSON data from somewhere

const validate = ajv.compile( schema );
validate( data );

Now, the validation error is stored on the validate function. Use prettify to pretty-print the errors, and provide the data so that awesome-ajv-errors can suggest fixes:

console.log( prettify( validate, { data } ) );

Configure styling

Instead of auto-detecting based on the platform (Node.js or a browser), you can turn on/off colors, location printing (the json-snippet of the error) and whether to print big ascii numbers to the left of each error, if there are more than one error.

With the options object containing data provided to prettify you can include colors, location and bigNumbers as booleans, to override the defaults.

Turning colors explicitly on will only enable colors if it's detected to be supported by the platform, but turning them off will always output non-colored text.

Turning location on will also only enable the location printing if colors are detected to be supported by the underlying platform (this is a limitation in the current @babel/code-frame and will likely be resolved in Babel 8).

bigNumbers will only be enabled if location printing is enabled, but can be explicitly turned off.

Example:

const colors = false;
const location = false;
const explanation = prettify( validate, { data, colors, location } );