How to Make A Header in Angular 12

In this angular 12 version video, we learn how to make a header in angular 12. This video is made by anil Sidhu in the English language.

#angular 

What is GEEK

Buddha Community

Build a Single Page App with Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS and Docker

In this tutorial, you will learn how to build a single page application. I'll take you through the process step by step, using cutting edge technologies like Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS, and Docker.

Let's get started.

What you need to follow this guide:

To follow along you will need:

• a computer
• to know how to install software
• a basic understanding of HTML, CSS, JavaScript, and PHP
• knowledge of at least one JavaScript framework and an understanding of the MVC design pattern.

This guide is organized into 10 chapters and is based off a live coding series that I record. The live coding series is completely unscripted, so there will be bugs and gotchas there that you won't find in this guide.

You can find the complete playlist at the end of this article.

Everything here should just work, but if it doesn't feel free to ask for help by joining my community on Slack. There you can share code snippets and chat with me directly.

Table of Contents

• What Tech Are We Using?
• How to Setup Your Machine
• How to build the app with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3
• How to Refactor the Admin Dashboard and Create New Admin Pages
• How to Submit Forms with Files
• How to Add the Form to the Component
• How to Store Data
• How to Update Operations
• How to Delete a Resourse
• Wrap up and what's next
• Conclusion

Original article source at https://www.freecodecamp.org

What Tech Are We Using?

First, let's go over the different tools we'll be using in this project.

Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

To simplify this concept, Docker lets you package applications and dependencies in a container.

A containerized application allows you to have a flexible development environment so that you can run different applications without worrying about dependencies, their requirements, and conflicts between different versions. You can easily run applications that, for instance, require two different versions of PHP and MySQL.

Each team member can quickly reproduce the same environment of your application by simply running the same container's configuration.

If you want to learn more about Docker, its Documentation is a great place to start.

Here's a Handbook on Docker essentials, as well, so you can practice your skills.

Mysql

MySQL is an open-source relational database management system. You can use it to organize data into one or more tables with data that may be related to each other.

We need to store data somewhere and here is where MySQL comes into play.

Here are the Docs if you want to read up more. Here's a full free course on MySQL if you want to dive deeper.

Laravel

Laravel is a free, open-source PHP web framework that helps you develop web applications following the model–view–controller architectural pattern.

Laravel is an amazing PHP framework that you can use to create bespoke web applications.

Here's the Laravel Documentation for more info, and here's a full project-based course to help you learn Laravel.

Laravel Sail

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker development environment.

Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Usually, creating a development environment to build such applications means you have to install software, languages, and frameworks on your local machine – and that is time-consuming. Thanks to Docker and Laravel Sail we will be up and running in no time!

Laravel Sail is supported on macOS, Linux, and Windows via WSL2.

Here's the Documentation if you want to read up on it.

Laravel Jetstream

When building web applications, you likely want to let users register and log in to use your app. That is why we will use Jetstream.

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application.

It uses Laravel Fortify to implement all the back end authentication logic.
Here are the Docs.

Vuejs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

Vue is a fantastic framework that you can use as a stand-alone to build single-page applications, but you can also use it with Laravel to build something amazing.

Here's the Vue Documentation if you want to read up. And here's a great Vue course to get you started.

Inertia JS

Inertia is the glue between Laravel and Vuejs that we will use to build modern single-page applications using classic server-side routing.

You can learn more about it in the Documentation here.

Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that you can use to build any design, directly in your markup

We'll use it in this project to build our design. Here's a quick guide to get you up and running if you aren't familiar with Tailwind.

How to Set Up Your Machine

To follow along with my live coding (and this tutorial), you will need to install Docker desktop on your machine. If you are using Windows, you will also need to enable WSL in your system settings.

Visit the Docker getting started page to install Docker Desktop.

If you are on Windows, enable WSL2 by following the steps here.

If you have any trouble, feel free to reach out or join my community on Slack to get help.

Laravel Installation with Sail

If you have successfully installed Docker Desktop on your machine, we can open the terminal and install Laravel 9.

Open a terminal window and browse to a folder where you want to keep your project. Then run the command below to download the latest Laravel files. The command will put all files inside a folder called my-example-app, which you can tweak as you like.

# Download laravel
curl -s "https://laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app

Deploy Laravel on Docker using the sail up command

With Docker Desktop up and running, the next step is to start Laravel sail to build all the containers required to run our application locally.

Run the following command from the folder where all Laravel files have been downloaded:

vendor/bin/sail up

It will take a minute. Then visit http://localhost and you should see your Laravel application.

If you run sail up and you get the following error, it is likely that you need to update Docker Desktop:

ERROR: Service 'laravel.test' failed to build:

How to Build the App with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3

In this section, we will define a basic roadmap, install Laravel 9 with Laravel Sail, Run sail, and build the containers.

I will also take you on a tour of Laravel Sail and the sail commands.

Then we will install Jetstream and scaffold Vue and Inertia files and have a look at the files and available features.

Next, we will populate our database and add the front end provided by Jetstream to register an account and log into a fresh Laravel application.

Finally, we will have a look at the Jetstream dashboard, and the Inertia/Vue Components and then start playing around.

Along the way, we'll disable the registration, enable the Jetstream user profile picture feature, and then add our first Inertia page where we'll render some data taken from the database.

Here's the live coding video if you want to follow along that way:

 

And if you prefer following along in this written tutorial, here are all the steps.

Just a reminder – you should have Laravel installed with Sail and have Docker set up on your machine. You can follow the steps above to do so if you haven't already.

Laravel Sail Overview – Sail Commands

With Laravel Sail installed, our usual Laravel commands have sligtly changed.

For instance, instead of running the Laravel artisan command using PHP like php artisan, we now have to use Sail, like so: sail artisan.

The sail artisan command will return a list of all available Laravel commands.

Usually, when we work with Laravel, we also have to run the npm and composer commands.

Again, we need to prefix our commands with sail to make them run inside the container.

Below you'll find a list of some commands you will likely have to run:

# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require <packageName> # it was: composer require <packageName>
# Use npm commands
sail npm run dev # it was: npm run dev

You can read more in the Sail documentation.

Install Jetstream and Scaffold Vue and Inertia

Let's now install the Laravel Jetstream authentication package and use the Inertia scaffolding with Vue3.

cd my-example-app
sail composer require laravel/jetstream 

Remember to prefix the composer command with sail.

The command above has added a new command to Laravel. Now we need to run it to install all the Jetstream components:

sail artisan jetstream:install inertia

Next we need to compile all static assets with npm:

sail npm install
sail npm run dev

Before we can actually see our application, we will need to run the database migrations so that the session table, required by Jetstream, is present.

sail artisan migrate

Done! Jetstream is now installed in our application. If you visit http://localhost in your browser you should see the Laravel application with two links at the top to register and log in.

Populate the Database and Create a User Account

Before creating a new user, let's have a quick look at the database configuration that Laravel Sail has created for us in the .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password

As you can see, Laravel Sail configures everything we need to access the database container that is running on Docker. The DB_DATABASE is the name of the database and it is the same as the project folder. This is why in the previous step we were able to run the migrate command without issues.

Since we already migrated all database tables, we can now use the Laravel built-in user factory to create a new user then use its details to log in our user dashboard.

Let's open artisan tinker to interact with our application.

sail artisan tinker

The command above will open a command line interface that we can use to interact with our application. Let's create a new user.

User::factory()->create()

The command above will create a new user and save its data in our database. Then it will render the user data onto the screen. Make sure to copy the user email so we can use it later to log in. Then exit by typing exit;.

The default password for every user created with a factory is password.

Let's visit the login page and access our application dashboard.

Jetstream Dashboard

After login you are redirected to the Jetstream dashboard, which looks amazing by default. We can customize it as we like, but it is just a starting point.

Jetstream/Vue Components and Inertia Overview

The first thing you may notice after installing Jetstram is that there are a number of Vue components registered in our application. Not only that, also Inertia brings in Vue components.

To use Inertia, we need to get familiar with it when defining routes.

When we installed Jetstream, it created inside the resources/js directory a number of subfolders where all our Vue components live. There are not just simple components but also Pages components rendered by inertia as our Views.

The Jetstream inertia scaffolding created:

• resources/js/Jetstream Here we have 27 components used by Jetstream, but we can use them in our application too if we want.
• resources/js/Layouts In this folder there is the layout component used by inertia to render the dashboard page
• resources/js/Pages This is where we will place all our Pages (views) components. You will find the Dashboard page as well as the Laravel Welcome page components here.

The power of Inertia mostly comes from how it connects Vue and Laravel, letting us pass data (Database Models and more) as props to our Vue Pages components.

When you open the routes/web.php file you will notice that we no longer return a view but instead we use Inertia to render a Page component.

Let's examine the / homepage route that renders the Welcome component.

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

It looks like our usual Route definition, exept that in the closure we are returning an \Inertia\Response by calling the render method of the Inertia class Inertia::render().

This method accepts two parameters. The first is a component name. Here we passed the Welcome Page component, while the second parameter is an associative array that will turn into a list of props to pass to the component. Here is where the magic happens.

Looking inside the Welcome component, you will notice that in its script section, we simply define four props matching with the keys of our associative array. Then inertia will do the rest.

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },
        // 👇 Define the props 
        props: {
            canLogin: Boolean, 
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>

We can then just call the props inside the template. If you look at the template section you will notice that laravelVersion and phpVersion are referenced in the code as you normally would do with props in Vuejs.

<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
  Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
</div>

The dashboard component is a little different. In fact it uses the Layout defined under Layouts/AppLayout.vue and uses the Welcome component to render the Dashboard page content, which is the same as the laravel Welcome page.

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome /> 
                </div>
            </div>
        </div>
    </app-layout>
</template>

Inside the layout component you will notice the two inertia components Head and Link.

We can use the Head component to add head elements to our page, like meta tags, page title, and so on. The Link component is a wrapper aroud a standard anchor tag that incercepts click events and prevents full page reload as you can read in the Inertia documentation.

Link Component
Head Component

Disable the Registration Feature

If you are following along, the next step I'll take is to disable one on the features Jetstream provides – register an account.

To do that, we can navigate to config/fortify.php and comment out line 135 Features::registration() from the features array.

'features' => [
        //Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

If we visit the welcome page we will notice that the register link is gone. Also, the route is no longer listed when we run sail artisan route:list.

Enable Jetstream User Profile Picture

Now let's try to enable the Jetstream feature called ProfilePhotos. As you can guess, this will allow the user to add a profile picture.

To do that we need to visit config/jetstream.php and uncomment line 59 Features::profilePhoto.

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(), // 👈
        // Features::api(),
        // Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

If you log in you will see that in the user profile, a new section is available to upload a profile picture.

But before doing anything else we need to run sail artisan storage:link so that Laravel creates a symlink to the storage/app/public folder where we will save all user profile images.

Now try to visit the user profile and update the profile picture. If you get a 404 on the image this is because by default Laravel sail assumes we are using Laravel valet and sets the app URL like so APP_URL=http://my-example-app.test in the .env file. Let's change it and use localhost instead.

APP_URL=http://localhost

Now we should be good to go and be able to see and change our profile image!🥳

How to Add our First Inertia Page and Render Records from the DB

Since we are rendering Vue components instead of blade views, it is wise to start sail npm run watch to watch and recompile our Vue components as we create or edit them. Next let's add a new Photos page.

I will start by creating a new Route inside web.php:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos');
});

In the code above I defined a new GET route and then rendered a component that I will place inside the resources/js/Pages/Guest and call Photos. Let's create it.

Create a Guest folder:

cd resources/js/Pages
mkdir Guest
cd Guest
touch Photos.vue

Then let's define a basic component:

<template>
  <h1>Photos Page</h1>
</template>

If we visit http://localhost/photos/ we will see our new page, cool! Let's copy over the page structure from the Welcome page so that we get the login and dashboard links as well.

The component will change to this:

<template>
    <Head title="Phots" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.user" :href="route('admin.dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <h1>Photos</h1>
            
        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,
          
        }
    })
</script>

The next step is to render a bunch of data onto this new page. For that we will build a Model and add some records to the database.

saild artisan make:model Photo -mfcr

This command creates a Model called Photo, plus a database migration table class, a factory, and a resource controller.

Now let's define the database table inside the migration we just creted. Visit the database/migrations folder and you should see a file with a name similar to this: 2022_02_13_215119_create_photos_table (yours will be sligly different).

Inside the migration file we can define a basic table like the following:

 public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->text('description');
            $table->timestamps();
        });
    }

For our table we defined just two new columns, path and description, plus the id, created_at and updated_at that will be created by the $table->id() and by the $table->timestamps() methods.

After the migration we will define a seeder and then run the migrations and seed the database.

At the top of the database/seeders/PhotoSeeder.php file we will import our Model and Faker:

use App\Models\Photo;
use Faker\Generator as Faker;

Next we will implement the run method using a for loop to create 10 records in the database.

    public function run(Faker $faker)
    {
        for ($i = 0; $i < 10; $i++) {
            $photo = new Photo();
            $photo->path = $faker->imageUrl();
            $photo->description = $faker->paragraphs(2, true);
            $photo->save();
        }
    }

We are ready to run the migrations and seed the database.

sail artisan migrate
sail artisan db:seed --class PhotoSeeder

We are now ready to show the data on the Guest/Photos page component.
First update the route and pass a collection of Photos as props to the rendered component:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos', [
        'photos' => Photo::all(), ## 👈 Pass a collection of photos, the key will become our prop in the component
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
});

Second, pass the prop to the props in the script section of the Guest/Photos component:

props: {
    canLogin: Boolean,
    canRegister: Boolean,
    photos: Array // 👈 Here
}

Finally loop over the array and render all photos in the template section, just under the h1:

<section class="photos">
    <div v-for="photo in photos" :key="photo.id" class="card" >
        <img :src="photo.path" alt="">
    </div>
</section>

Done! if you visit the /photos page you should see ten photos. 🥳

How to Refactor the Admin Dashboard and Create New Admin Pages

In this chapter we will Re-route the Jetstream dashboard and make a route group for all admin pages.

Then we will see how to add a new link to the dashboard and add a new admin page.

Finally we will take a collection of data from the db and render them in a basic table. The default table isn't cool enough, so for those reading this article, I decided to add a Tailwind table component.

Re-route the Jetstream Dashboard

If we look at the config/fortify.php file we can see that around line 64 there is a key called home. It is calling the Home constant of the Route service provider.

This means that we can tweek the constant and redirect the authenticated user to a different route.

Lets go through it step-by-step:

• update the HOME Constant
• make a route group and redirect logged in users to admin/ instead of '/dashboard'

Our application will have only a single user, so once they're logged in it is clearly the site admin – so makes sense to redirect to an admin URI.

Change the HOME constant in app/Providers/RouteServiceProvider.php around line 20 to match the following:

public const HOME = '/admin';

How to Add an Admin Pages Route Group

Next let's update our route inside web.php. We will change the route registered by Jetstream from this:

Route::middleware(['auth:sanctum', 'verified'])->get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

To this:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // other admin routes here
});

The route above is a route group that uses the auth:sanctum middleware for all routes within the group, a prefix of admin, and adds a admin suffix to each route name.

The end result is that we will be able to refer to the dashboard route by name, which now will be admin.dashboard. When we log in, we will be redirected to the admin route. Our dashboard route will respond since it's URI is just / but the goup prefix will prefix every route in the group and make their URI start with admin.

If you now run sail artisan route:list you will notice that the dashboard route has changed as we expected.

Before moving to the next step we need to update both the /layouts/AppLayout.vue and /Pages/Welcome.vue components.

Do you remeber that the dashboard route name is now admin.dashboard and not just dashboard?

Let's inspect the two components and update every reference of route('dahsboard') to this:

route('admin.dahsboard')

and also every reference of route().current('dashboard') to this:

route().current('admin.dashboard')

After all the changes, make sure to recompile the Vue components and watch changes by running sail npm run watch. Then visit the home page to check if everything is working.

How to Add a New Link to the Dashboard

Now, to add a new admin page where we can list all photos stored in the database, we need to add a new route to the group we created earlier. Let's hit the web.php file and make our changes.

In the Route group we will add a new route:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // 👇 other admin routes here 👇

    Route::get('/photos', function () {
        return inertia('Admin/Photos');
    })->name('photos'); // This will respond to requests for admin/photos and have a name of admin.photos

});

In the new route above we used the inertia() helper function that does the same exact thing – returns an Inertia/Response and renders our Page component. We placed the component under an Admin folder inside Pages and we will call it Photos.vue.

Before we create the component, let's add a new link to the dashboard that points to our new route.

Inside AppLayout.vue, find the Navigation Links comment and copy/paste the jet-nav-link component that is actually displaing a link to the dashboard and make it point to our new route.

You will end up having something like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('admin.dashboard')" :active="route().current('admin.dashboard')">
        Dashboard
    </jet-nav-link>
    <!-- 👇 here it is our new link -->
      <jet-nav-link :href="route('admin.photos')" :active="route().current('admin.photos')">
        Photos
    </jet-nav-link>
</div>

Our link above uses route('admin.photos') to point to the correct route in the admin group.

If you visit localhost/dashboard and open the inspector, you should see an error:

Error: Cannot find module `./Photos.vue`

It is fine – we haven't created the Photos page component yet. So let's do it now!

How to Add a New Admin Page Component

Make a file named Photos.vue inside the Pages/Admin folder. Below are the bash commands to create the folder and the file via terminal, but you can do the same using your IDE's graphical interface.

cd resources/js/Pages
mkdir Admin
touch Admin/Photos.vue

To make this new page look like the Dashboard page, we will copy over its content. You should end up having something like this:

<template>
  <app-layout title="Dashboard"> <!-- 👈 if you want you can update the page title -->
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <!-- 👇  All photos for the Admin page down here -->
          <h1 class="text-2xl">Photos</h1>
           
        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
});
</script>

I removed a few pieces from the Dashboard template so make sure to double check the code above. The welcome component was removed from the template as it is not required in this page, and also its reference in the script section. The rest is identical.

Feel free to update the page title referenced as prop on the <app-layout title="Dashboard">.

Now when you visit localhost/admin you can click on the Photos menu item and see our Photos page component content. It's not much for now, just an h1.

How to Render Records in the Admin Page as a Table

Now it's time to render the data onto a table. To make things work let's first add our markup and fake that we already have access to as an array of objects and loop over them inside our table. Than we will figure out how to make things work for real.

 <table class="table-auto w-full text-left">
  <thead>
    <tr>
      <th>ID</th>
      <th>Photo</th>
      <th>Desciption</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="photo in photos">
      <td>{{ photo.id }}</td>
      <td><img width="60" :src="photo.path" alt="" /></td>
      <td>{{photo.description}}</td>
      <td>View - Edit - Delete</td>

    </tr>
  </tbody>
</table>

Ok, since we assumed that our component has access to a list of Photos, let's pass a new prop to the component from the Route.

Update the route in web.php and pass to the inertia() function a second argument that will be an associative array. It will have its keys passed as props to the Vue Page component.

In it we will call Photo::all() to have a collection to assign to a photos key, but you can use other eloquent methods if you want to paginate the results, for example.

Route::get('/photos', function () {
    return inertia('Admin/Photos', [
        'photos' => Photo::all()
    ]);
})->name('photos');

To connect the prop to our Page component we need to define the prop also inside the component.

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
  /* 👇 Pass the photos array as a props 👇 */
  props: {
    photos: Array,
  },
});
</script>

Extra: How to use a Tailwind table component

Tailwind is a CSS framework similar to Bootstrap. There are a number of free to use components that we can grab from the documentation, tweak, and use.

This table component is free and looks nice:https://tailwindui.com/components/application-ui/lists/tables.

We can tweek the Photos page template and use the Tailwind table component to get a nice looking table like so:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                              <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                              View - Edit - Delete
                                              </a>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

How to Submit Forms with Files

For the next section we will look into how to submit a form so that we can add a new photo to the database.

• Add a create button
• Add a create route
• Define the PhotosCreate component
• Add a form
• Validate data
• Show validation errors
• Save the file to the filesystem
• Save the model

How to Create a New Photo

Add a link that points to a create route:

<a class="px-4 bg-sky-900 text-white rounded-md" :href="route('admin.photos.create')">Create</a>

Create the route within the admin group:

Route::get('/photos/create', function () {
    return inertia('Admin/PhotosCreate');
})->name('photos.create');

Let's add also the route that will handle the form submission for later:

Route::post('/photos', function () {
    dd('I will handle the form submission')   
})->name('photos.store');

Create the Admin/PhotosCreate.vue component:

    <template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h1 class="text-2xl">Add a new Photo</h1>
                <!-- 👇 Photo creation form goes here -->

            </div>
        </div>
    </app-layout>
</template>


<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },

});
</script>

How to Add the Form to the Component

The next step is to add the form to the page and figure out how to submit it.

If you hit the Inertia documentation you will find out that there is a useForm class that we can use to simplify the process.

First, import the module inside the script tag of the Admin/PhotosCreate.vue component:

import { useForm } from '@inertiajs/inertia-vue3';

Next we can use it in the setup function (Vue 3 composition API):

setup () {
    const form = useForm({
      path: null,
      description: null,
    })

    return { form }
  }

In the code above we defined the function called setup() then a constant called form to have the useForm() class assigned to it.

Inside its parentheses we defined two properties, path and description which are the column names of our photos model.

Finally we returned the form variable for the setup function. This is to make the variable available inside our template.

Next we can add the form markup:

<form @submit.prevent="form.post(route('admin.photos.store'))">

<div>
    <label for="description" class="block text-sm font-medium text-gray-700"> Description </label>
    <div class="mt-1">
        <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="lorem ipsum" v-model="form.description"/>
    </div>
    <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
        <div class="text-red-500" v-if="form.errors.description">{{form.errors.description}}</div>
</div>
<div>
    <label class="block text-sm font-medium text-gray-700"> Photo </label>
    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600">
        <label for="path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
            <span>Upload a file</span>
            <input id="path" name="path" type="file" class="sr-only" @input="form.path = $event.target.files[0]" />
        </label>
        <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </div>
    </div>
</div>
<div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div>

<button type="submit" :disabled="form.processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</form>

The code above uses the Vue v-on directive short end syntax @submit.prevent="form.post(route('admin.photos.store'))" on the form tag, and the dom event submit with the prevent modifier.

Then it uses the form variable that we created earlier and a post method. This is available because we are using the useForm class.

Next we point the form to the route named admin.photos.store that we created earlier.

Inside the form we have two groups of inputs. First, we have the textarea that uses the v-model to bind it to the property form.description that we declared before.

The second group uses the form.path in a Tailwind component (showing the markup for a drop file area).

Right now we are allowing users to upload only a single photo using the v-on directive on the input DOM event @input="form.path = $event.target.files[0]".

The last two things to notice are the error handling done via <div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div> for the path and also for the description.

Finally we use form.processing to disable the submit button while the form is processing.

The next step is to define the logic to save the data inside the database.

How to Store Data

To store the data, we can edit the route we defined earlier like so:

Route::post('/photos', function (Request $request) {
    //dd('I will handle the form submission')  
    
    //dd(Request::all());
    $validated_data = $request->validate([
        'path' => ['required', 'image', 'max:2500'],
        'description' => ['required']
    ]);
    //dd($validated_data);
    $path = Storage::disk('public')->put('photos', $request->file('path'));
    $validated_data['path'] = $path;
    //dd($validated_data);
    Photo::create($validated_data);
    return to_route('admin.photos');
})->name('photos.store');

The code above uses dependency injection to allow us to use the parameter $request inside the callback function.

We first validate the request and save the resulting array inside the variable $validated_data. Then we use the Storage facades to save the file in the filesystem and obtain the file path that we store inside the $path variable.

Finally we add a path key to the associative array and pass to it the $path variable. Next we create the resource in the database using the Photo::create method and redirect the user to the admin.photos page using the new to_route() helper function.

Make sure to import the Request class and the Storage facades at the top of the web.php file like so:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Now we can add a new photo in the database and show a list of photos for both the admin and standard visitors.

Next we need to complete the CRUD operations and allow the user to edit/update a photo and delete it.

How to Update Operations

Let's start by adding the routes responsible for showing the forms used to edit the resource and update its values onto the database.

Just under the other routes in the Admin group, let's add the following code:

Route::get('/photos/{photo}/edit', function(Photo $photo){
     return inertia('Admin/PhotosEdit', [
            'photo' => $photo
        ]);
})->name('photos.edit');

The route above uses dependency injection to inject inside the function the current post, selected by the URI /photos/{photo}/edit.

Next it returns the Inertia response via the inertia() function that accepts the Component name 'Admin/PhotosEdit' as its first parameter and an associative array as its second.

Doing ['photo' => $photo] will allow us to pass the $photo model as a prop to the component later.

Next let's add the new Page component under resources/js/Pages/Admin/PhotosEdit.vue

This will be its template:

<template>
    <app-layout title="Edit Photo">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Photo</h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">
                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700"
                        >Description</label>
                        <div class="mt-1">
                            <textarea
                                id="description"
                                name="description"
                                rows="3"
                                class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                placeholder="lorem ipsum"
                                v-model="form.description"
                            />
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
                        <div
                            class="text-red-500"
                            v-if="form.errors.description"
                        >{{ form.errors.description }}</div>
                    </div>

                    <div class="grid grid-cols-2">
                        <div class="preview p-4">
                            <img :src="'/storage/' + photo.path" alt />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            <div
                                class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
                            >
                                <div class="space-y-1 text-center">
                                    <svg
                                        class="mx-auto h-12 w-12 text-gray-400"
                                        stroke="currentColor"
                                        fill="none"
                                        viewBox="0 0 48 48"
                                        aria-hidden="true"
                                    >
                                        <path
                                            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label
                                            for="path"
                                            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                                        >
                                            <span>Upload a file</span>
                                            <input
                                                id="path"
                                                name="path"
                                                type="file"
                                                class="sr-only"
                                                @input="form.path = $event.target.files[0]"
                                            />
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </div>
                            <div class="text-red-500" v-if="form.errors.path">{{ form.errors.path }}</div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >Update</button>
                </form>
            </div>
        </div>
    </app-layout>
</template>

The template is actually identical to the Create component, except for a few things. The form points to a route that expects a paramenter that we pass as the second argument to the funtion route. It looks like this: <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">.

There is a section where we can see the original photo next to the upload form group:

 <div class="preview p-4">
    <img :src="'/storage/' + photo.path" alt />
</div>

The rest is identical, and here we have the script section:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from '@inertiajs/inertia-vue3';

export default defineComponent({
    components: {
        AppLayout,
    },
    props: {
        photo: Object
    },
    setup(props) {
        const form = useForm({
            _method: "PUT",
            path: null,
            description: props.photo.description,
        })

        return { form }
    },

});

Notice that we are passing a props object with the photo key, which allows us to reference the model in the template.

Next, this _method: "PUT", line of code is required to be able to submit a PUT request instead of the POST request called on the form tag.

Now let's implement the logic to handle the form submission inside the Route below.

In web.php just under the previous route, let's add one that responds to the PUT request submitted by our form.

Route::put('/photos/{photo}', function (Request $request, Photo $photo)
    {
        //dd(Request::all());

        $validated_data = $request->validate([
            'description' => ['required']
        ]);

        if ($request->hasFile('path')) {
            $validated_data['path'] = $request->validate([
                'path' => ['required', 'image', 'max:1500'],

            ]);

            // Grab the old image and delete it
            // dd($validated_data, $photo->path);
            $oldImage = $photo->path;
            Storage::delete($oldImage);

            $path = Storage::disk('public')->put('photos', $request->file('path'));
            $validated_data['path'] = $path;
        }

        //dd($validated_data);

        $photo->update($validated_data);
        return to_route('admin.photos');
    })->name('photos.update');

The route logic is straigthforward. First we validate the description, next we check if a file was uploaded and if so we validate it.

Then we delete the previously uploaded image Storage::delete($oldImage); before storing the new image onto the datadabse and update the resource using $photo->update($validated_data);.

As before with the store route, we redirect to the admin.photos route using return to_route('admin.photos');.

How to Delete a Resource

The last step we need to take is to write the logic to delete the photo. Let's start by adding the route.

Right below the previous route we can write:

Route::delete('/photos/{photo}', function (Photo $photo)
{
    Storage::delete($photo->path);
    $photo->delete();
    return to_route('admin.photos');
})->name('photos.delete');

This route is also using a wildcard in its URI to identify the resource. Next, its second paramenter is the callback that uses the dependency injection as before. Inside the callback we first delete the image from the filesystem using Storage::delete($photo->path);.

Then we remove the resource from the database $photo->delete(); and redirect the user back return to_route('admin.photos'); like we did in the previous reoute.

Now we need to add a delete button to the table we created in one of the previous steps to show all photos.

Inside the template section of the component Admin/Photos.vue within the v-for, we can add this Jetstream button:

<jet-danger-button @click="delete_photo(photo)">
    Delete
</jet-danger-button>

Find the table cell that has the ACTIONS comment and replace the DELETE text with the button above.

So the final code will be:

<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

As you can see there is a @click event listener on the button. It calls a method delete_photo(photo) that we need to define along with a bunch of other methods to have a nice modal opening to ask for confirmation from the user.

First import the Inertia helper function useForm:

// 0. Import the useForm class at the top of the script section along with all required components
import { useForm } from '@inertiajs/inertia-vue3';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";

Remember to register the component JetDangerButton inside the components object before moving forward.

Next add the setup() function in the script section and implement the logic required to submit the form and show a modal. The comments in the code will guide you thorought all the steps.

// 1. add the setup function
setup() {
    // 2. declare a form variable and assign to it the Inertia useForm() helper function 
    const form = useForm({
        // 3. override the form method to make a DELETE request
        _method: "DELETE",
    });
    // 4. define a reactive object with show_modal and photo property
    // this will be used to figure out when to show the modal and the selected post values
    const data = ref({
        show_modal: false,
        photo: {
            id: null,
            path: null,
            description: null,
        }
    })

    // 5. define the delete_photo function and update the values of the show_modal and photo properties
    // of the reactive object defined above. This method is called by the delete button and will record the details 
    // of the selected post
    const delete_photo = (photo) => {
        //console.log(photo);
        //console.log(photo.id, photo.path, photo.description);
        data.value = {
            photo: {
                id: photo.id,
                path: photo.path,
                description: photo.description
            },
            show_modal: true
        };
    }
    // 6. define the method that will be called when our delete form is submitted
    // the form will be created next
    const deleting_photo = (id) => {
        form.post(route('admin.photos.delete', id))
        closeModal();
    }
    // 7. delare a method to close the modal by setting the show_modal to false
    const closeModal = () => {
        data.value.show_modal = false;
    }
    // 8. remember to return from the setup function the all variables and methods that you want to expose 
    // to the template.
    return { form, data, closeModal, delete_photo, deleting_photo }

}

Finally outside the v-for loop add the modal using the following code. You can place this where you want but not inside the loop.

 <JetDialogModal :show="data.show_modal">
    <template #title>
        Photo {{ data.photo.description.slice(0, 20) + '...' }}
    </template>
    <template #content>
        Are you sure you want to delete this photo?

    </template>
    <template #footer>
        <button @click="closeModal" class="px-4 py-2">Close</button>
        <form @submit.prevent="deleting_photo(data.photo.id)">
            <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
        </form>
    </template>
</JetDialogModal>

This is our final JavaScript code:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import TableComponent from "@/Components/TableComponent.vue";
import { Link } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3';
import JetDialogModal from '@/Jetstream/DialogModal.vue';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";
export default defineComponent({
    components: {
        AppLayout,
        Link,
        TableComponent,
        JetDialogModal,
        JetDangerButton
    },
    props: {
        photos: Array,
    },

    setup() {

        const form = useForm({
            _method: "DELETE",
        });
        const data = ref({
            show_modal: false,
            photo: {
                id: null,
                path: null,
                description: null,
            }

        })


        const delete_photo = (photo) => {
            //console.log(photo);
            console.log(photo.id, photo.path, photo.description);
            data.value = {
                photo: {
                    id: photo.id,
                    path: photo.path,
                    description: photo.description
                },
                show_modal: true
            };
        }
        const deleting_photo = (id) => {
            form.post(route('admin.photos.delete', id))
            closeModal();
        }

        const closeModal = () => {
            data.value.show_modal = false;


        }

        return { form, data, closeModal, delete_photo, deleting_photo }

    }
});
</script>

And here we have the HTML:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            View - Edit - 

                                            <jet-danger-button @click="delete_photo(photo)">
                                                Delete
                                            </jet-danger-button>
                                            </a>
                                        </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
         <JetDialogModal :show="data.show_modal">
            <template #title>
                Photo {{ data.photo.description.slice(0, 20) + '...' }}
            </template>
            <template #content>
                Are you sure you want to delete this photo?

            </template>
            <template #footer>
                <button @click="closeModal" class="px-4 py-2">Close</button>
                <form @submit.prevent="deleting_photo(data.photo.id)">
                    <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
                </form>
            </template>
        </JetDialogModal>
    </app-layout>
</template>

That's it. If you did everything correctly you should be able to see all photos, create new photos as well as edit and delete them.

I will leave you some home work. Can you figure out how to implement the view and edit links before the delete button in the section below?

<!-- ACTIONS -->
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

Wrapup and What's next

During this guide we took our first steps and learned how to build a single page application using Laravel as our backend framework and Vue3 for the front end. We glued them together with Inertia js and built a simple photo application that lets a user manage photos.

We are just at the beginning of a fantastic journey. Learning new technologies isn't easy, but thanks to their exaustive documentations we can keep up and build awesome applications.

Your next step to master Laravel, Vue3, Inertia and all the tech we have been using so far is to hit their documentation and keep learning. Use the app we have build if you want, and improve it or start over from scratch.

Conclusion

This is just an overview of how I'd build a single page application using these technologies.

If you are familiar with server-side routing and Vuejs then you will enjoy bulding a single page application with Laravel, Inertia, and Vuejs. The learning curve isn't that steep plus you have great documentation to help you out.

You can find the source code for this guide here.

#laravel #laravel9 #jetstream #vuejs #inertiajs #mysql #tailwindcss #docker
 

Understanding CSS's !important declaration

!important in CSS is a special notation that we can apply to a CSS declaration to override other conflicting rules for the matching selector.

When we work on web projects, it is natural that we have some style declarations that other styles overrule.

This is not an issue for an experienced developer who understands the core mechanism of CSS. However, it can be difficult for beginners to understand why the style declarations they expect are not applied by the browser.

So, instead of them focusing on resolving the issue naturally, they tend to go for the quick fix by adding the !important declaration to enforce the style they expect. While this approach might work for that moment, it can also initiate another complex problem.

In this guide, we will review the following, including how to use !important and when we should use it:

• The CSS core mechanism
• Understanding the !important declaration before we use it
• :is() and other related pseudo-class functions
• When exactly can we use !importantdeclaration?
  • Utility classes
  • The style rules we cannot override

Enough said, let’s dive in.

The CSS core mechanism

Understanding the core principles of CSS will naturally enable us to know when it’s obvious to use the !important declaration. In this section, we will walk through some of these mechanisms.

Consider the HTML and CSS code below, what color do you think the heading text will be?

First, the HTML:

<h2 class="mytitle">This is heading text</h2>

Then, the CSS:

h2 {
  color: blue;
}
h2 {
  color: green;
}

The text will render green! This is basic CSS fundamental. With the CSS cascade algorithm, the ordering of CSS rules matters. In this case, the declaration that comes last in the source code wins.

Normally, this is logical. In the first place, we should not repeat the same selector as we did above. CSS does not want repetition, so it uses the last declaration rule.

However, there are cases whereby we create generic styles for the root elements, like the h2, and then add classes to style specific elements. Let’s consider the following example as well, starting with the HTML:

<h2>This is heading text</h2>
<h2 class="mytitle">This is heading text</h2>

Then, let’s see the CSS:

.mytitle {
  color: blue;
}
h2 {
  color: green;
}

In the above code, the first h2 element has no class applied, so it is obvious that it gets the green color of the h2 selector.

However, the second h2 element uses the rule for the class selector, .mytitle, even when the element selector rule comes last in the CSS code. The reason for that is that the class selector has a higher specificity when compared to the element selector.

In other words, the weight applied to the declaration in a class selector is more than element selector’s weight.

Similarly, the declaration in an ID selector is more than that of the class selector. In this case, the red color in the code below takes precedence:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

Followed by the CSS:

.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

Furthermore, an inline style attribute takes precedence over the ID selector, starting with the HTML:

<h2 id="maintitle" style="color: black;" class="mytitle">This is heading text</h2> 

 

Then followed by the CSS:

.mytitle {/*...*/}

#maintitle {/*...*/}

h2 {/*...*/}

This is the ideal priority flow in CSS and must be maintained to avoid anomalies. The !important declaration most of the time comes when we are oblivious of these basic rules.

The inline style attribute and each of the selectors have values that browsers assign to them. That way, it knows which one has higher or lower priority. Think of this value as a number of four single digits with the style attribute assigned the strongest weight value of 1000.

This follows the ID with a value of 0100, then class with 0010, and finally the element selector with 0001.

Sometimes we can combine selectors targeting specific elements, as seen in the example below:

<h2 id="maintitle" class="mytitle">This is heading text</h2> 

 

Followed by the CSS:

h2.mytitle {
  color: blue;
}
#maintitle {
  color: red;
}
h2 {
  color: green;
}

The specificity of the h2.mytitle selector in the CSS above is the addition of h2 and .mytitle. That is, 0001 + 0010 = 0011. This total value, however, is less than that of the #maintitle ID that is 0100.

So, the browser uses the declaration in the ID selector to override other conflicting rules. In a case of equal weight, the last rule declaration wins.

Now that we know which rules are most relevant and why the browser applies them, it will become naturally obvious whether or not to use this !important declaration.

Understanding the !important declaration before we use it

Before we consider using the !important notation, we must ensure that we follow the specificity rule and use the CSS cascade.

In the code below, we have the h2 and h3 elements styled to be a red color:

<h2 class="mytitle">This is heading II text</h2>
<h3 class="mytitle">This is heading III text</h3>

Then, .mytitle in CSS:

.mytitle {
  color: red;
}

But, let’s say at some point, we want to give the h3 element a blue color. Adding a style rule like the one below would not change the color because the class has more weight and it’s more specific than the element selector, as we’ve learned:

.mytitle {...}
h3 {
  color: blue;
}

However, using the !important on the lesser weight makes the browser enforce that declaration over other conflicting rules:

.mytitle {...}
h3 {
  color: blue !important;
}

This is because the !important notation increases the weight of the declaration in the cascade order of precedence. What this means is that we’ve disrupted the normal priority flow. Hence, bad practice, and can lead to difficulties in code maintenance and debugging.

If at some other point, we want to override the above important rule, we can apply another !important notation on a declaration with higher specificity (or the same if it is lower down in the source). It can then lead to something like this:

h3 {
  color: blue !important;
}

/* several lines of rules */

.mytitle {
  color: green !important;
}

This is bad and should be avoided. Instead, we should check if:

1. Rearranging the rule or rewriting the selectors can solve the cascading issue
2. Increasing the specificity of the target element can solve the issue

Well, let’s find out. Back to our style rules, we can enforce a blue color on the h3 element by increasing the specificity score.

As seen below, we can combine selectors until their specificity score supersedes the conflicting rule. The h3.mytitle selector gives a specificity score of 0011, which is more than the .mytitle of 0010 score:

.mytitle {...}
h3.mytitle {
  color: blue;
}

As we can see, instead of using the !important declaration to enforce a rule, we focus on increasing the specificity score.

:is() and other related pseudo-class functions

Sometimes, we may trace issues to a pseudo-class function. So, knowing how it works can save us a lot of stress. Let’s see another example.

Imagine we are working on a project and see the following code:

<h1 id="header">
  heading <span>span it</span>
  <a href="#">link it</a>
</h1>
<p class="paragraph">
  paragraph <span>span it</span>
  <a href="">link it</a>
</p>

Using the following CSS rules gives us the output after:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Now, let’s say we want to give the span and the link text in the paragraph another color of blue. We can do this by adding the following rule:

.paragraph span,
.paragraph a {
  color: blue;
}

The earlier rule will override the blue color despite being further down the line:

As a quick fix, we can enforce our blue color by using the !important notation like so:

:is(#header, p) span,
:is(#header, p) a {...}

.paragraph span,
.paragraph a {
  color: blue !important;
}

But, as you may guess, that is bad practice, so we must not be quick to use the !important notation. Instead, we can start by analyzing how every selector works. The :is() is used in the code is a pseudo-class function for writing mega selectors in a more compressed form.

So, here is the following rule in the above code:

:is(#header, p) span,
:is(#header, p) a {
  color: red;
}

Which is equivalent to the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

So, why is .paragraph span and .paragraph a not overriding the color despite having a specificity score of 0011, which is higher than 0002 of the p span and p a.

Well, every selector in the :is() uses the highest specificity in the list of arguments. In that case, both the #header and the p in the :is(#header, p) uses the specificity score of the #header, which is 0100. Thus, the browser sticks to its value because it has a higher specificity.

Thus, anytime we see this type of conflict, we are better off not using the pseudo-class function and sticking to its equivalent like the following:

#header span,
p span,
#header a,
p a {
  color: red;
}

Now, we should be able to see the expected result without using the !important notation that disrupts cascade order.

You can see for yourself on CodeSandbox.

When exactly can we use !important declaration?

Below are a few occasions where using the !important notation is recommended.

Utility classes

Assuming we want to style all buttons on a page to look the same, we can write a CSS rule that can be reused across a page. Let’s take a look at the following markup and style below:

<p>Subscribe button : <a class="btn" href="#">Subscribe</a></p>

<section class="content">
  <p>
    This <a href="#" class="btn">button</a> style is affected by a higher
    specificity value .
  </p>
  A link here: <a href="#">Dont click</a>
</section>

Followed by the CSS:

.btn {
  display: inline-block;
  background: #99f2f5;
  padding: 8px 10px;
  border: 1px solid #99f2f5;
  border-radius: 4px;
  color: black;
  font-weight: normal;
  text-decoration: none;
}

.content a {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

In the above code, we can see that the button link within the section element is targeted by both selectors in the CSS. And, we learned that for conflicting rules, the browser will use the most specific rule. As we expect, .content a has a score of 0011 while .btn has a score of 0010.

The page will look like this:

In this case, we can enforce the .btn rule by adding the !important notation to the conflicting declarations like this:

.btn {
  /* ... */
  color: black !important;
  font-weight: normal !important;
  text-decoration: none !important;
}

The page now looks as we expect:

See for yourself on CodeSandbox.

The style rules we cannot override

This mostly happens when we don’t have total control over the working code. Sometimes, when we work with a content management system like WordPress, we may find that an inline CSS style in our WordPress theme is overruling our custom style.

In this case, the !important declaration is handy to override the theme inline style.

Conclusion

The !important declaration is never meant to be used as we desire. We must only use it if absolutely necessary, such as a situation where we have less control over the code or very extreme cases in our own code.

Whether or not we use it depends on how we understand the core CSS mechanism, and in this tutorial, we covered that as well.

I hope you enjoyed reading this post. If you have questions or contributions, share your thought in the comment section and remember to share this tutorial around the web.

Source: https://blog.logrocket.com/understanding-css-important-declaration/

#css 

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

1. Installing Node.js and npm
2. Installing Angular CLI
3. Creating workspace
4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

• Node.js
• npm Package Manager

Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

1. npm -v

Installing Angular CLI

• Open Terminal/Command Prompt
• To install Angular CLI, run the below command:

1. npm install -g @angular/cli

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

• Using CLI
• Using Visual Studio Code

1. Using CLI

To create a workspace:

• Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
• Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:

1. Ng new YourAppName

• After running this command, it will prompt you to select from various options about the CSS and other functionalities.

• To leave everything to default, simply press the Enter or the Return key.

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Angular Material 12 File Upload Example with Progress Bar

In this tutorial, I will show you way to build an Angular Material 12 File upload to Rest API example using HttpClient, FormData and Progress Bar.

More Practice:

–  Angular Material 12 Image upload with Preview example

–  Angular 12 + Spring Boot: File upload example

–  Angular 12 + Node.js: File Upload example

–  Angular 12 Login and Registration example with JWT & Web Api

–  Angular 12 CRUD Application example with Web API

–  Angular 12 Form Validation example (Reactive Forms)

– Bootstrap instead:  Angular 12 File upload example with progress bar & Bootstrap

#angular #angular #angular 12 #angular material #file

Chromium-net-errors: Chromium Network Errors for Node.js

Chromium Network Errors

Provides Chromium network errors found in net_error_list.h as custom error classes that can be conveniently used in Node.js, Electron apps and browsers.

The errors correspond to the error codes that are provided in Electron's did-fail-load events of the WebContents class and the webview tag.

Features

• No dependencies.
• 100% test coverage.
• ES6 build with import and export, and a CommonJS build. Your bundler can use the ES6 modules if it supports the "module" or "jsnext:main" directives in the package.json.
• Daily cron-triggered checks for updates on net_error_list.h on Travis CI to always get the most up-to-date list of errors.

Installation

npm install chromium-net-errors --save

import * as chromiumNetErrors from 'chromium-net-errors';
// or
const chromiumNetErrors = require('chromium-net-errors');

Example Use in Electron

import { app, BrowserWindow } from 'electron';
import * as chromiumNetErrors from 'chromium-net-errors';

app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.webContents.on('did-fail-load', (event) => {
    try {
      const Err = chromiumNetErrors.getErrorByCode(event.errorCode);
      throw new Err();
    } catch (err) {
      if (err instanceof chromiumNetErrors.NameNotResolvedError) {
        console.error(`The name '${event.validatedURL}' could not be resolved:\n  ${err.message}`);
      } else {
        console.error(`Something went wrong while loading ${event.validatedURL}`);
      }
    }
  });

  win.loadURL('http://blablanotexist.com');
});

Usage

import * as chromiumNetErrors from 'chromium-net-errors';

Create New Errors

const err = new chromiumNetErrors.ConnectionTimedOutError();

console.log(err instanceof Error);
// true
console.log(err instanceof chromiumNetErrors.ChromiumNetError);
// true
console.log(err instanceof chromiumNetErrors.ConnectionTimedOutError);
// true

function thrower() {
  throw new chromiumNetErrors.ConnectionTimedOutError();
}

try {
  thrower();
} catch (err) {
  console.log(err instanceof Error);
  // true
  console.log(err instanceof chromiumNetErrors.ChromiumNetError);
  // true
  console.log(err instanceof chromiumNetErrors.ConnectionTimedOutError);
  // true
}

Get Error by errorCode

Get the class of an error by its errorCode.

const Err = chromiumNetErrors.getErrorByCode(-201);
const err = new Err();

console.log(err instanceof chromiumNetErrors.CertDateInvalidError);
// true

console.log(err.isCertificateError());
// true

console.log(err.type); 
// 'certificate'

console.log(err.message);
// The server responded with a certificate that, by our clock, appears to
// either not yet be valid or to have expired. This could mean:
// 
// 1. An attacker is presenting an old certificate for which they have
// managed to obtain the private key.
// 
// 2. The server is misconfigured and is not presenting a valid cert.
// 
// 3. Our clock is wrong.

Get Error by errorDescription

Get the class of an error by its errorDescription.

const Err = chromiumNetErrors.getErrorByDescription('CERT_DATE_INVALID');
const err = new Err();

console.log(err instanceof chromiumNetErrors.CertDateInvalidError);
// true

console.log(err.isCertificateError());
// true

console.log(err.type); 
// 'certificate'

console.log(err.message);
// The server responded with a certificate that, by our clock, appears to
// either not yet be valid or to have expired. This could mean:
// 
// 1. An attacker is presenting an old certificate for which they have
// managed to obtain the private key.
// 
// 2. The server is misconfigured and is not presenting a valid cert.
// 
// 3. Our clock is wrong.

Get All Errors

Get an array of all possible errors.

console.log(chromiumNetErrors.getErrors());

// [ { name: 'IoPendingError',
//     code: -1,
//     description: 'IO_PENDING',
//     type: 'system',
//     message: 'An asynchronous IO operation is not yet complete.  This usually does not\nindicate a fatal error.  Typically this error will be generated as a\nnotification to wait for some external notification that the IO operation\nfinally completed.' },
//   { name: 'FailedError',
//     code: -2,
//     description: 'FAILED',
//     type: 'system',
//     message: 'A generic failure occurred.' },
//   { name: 'AbortedError',
//     code: -3,
//     description: 'ABORTED',
//     type: 'system',
//     message: 'An operation was aborted (due to user action).' },
//   { name: 'InvalidArgumentError',
//     code: -4,
//     description: 'INVALID_ARGUMENT',
//     type: 'system',
//     message: 'An argument to the function is incorrect.' },
//   { name: 'InvalidHandleError',
//     code: -5,
//     description: 'INVALID_HANDLE',
//     type: 'system',
//     message: 'The handle or file descriptor is invalid.' },
//   ...
// ]

List of Errors

IoPendingError

An asynchronous IO operation is not yet complete. This usually does not indicate a fatal error. Typically this error will be generated as a notification to wait for some external notification that the IO operation finally completed.

• Name: IoPendingError
• Code: -1
• Description: IO_PENDING
• Type: system

const err = new chromiumNetErrors.IoPendingError();
// or
const Err = chromiumNetErrors.getErrorByCode(-1);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('IO_PENDING');
const err = new Err();

FailedError

A generic failure occurred.

• Name: FailedError
• Code: -2
• Description: FAILED
• Type: system

const err = new chromiumNetErrors.FailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-2);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FAILED');
const err = new Err();

AbortedError

An operation was aborted (due to user action).

• Name: AbortedError
• Code: -3
• Description: ABORTED
• Type: system

const err = new chromiumNetErrors.AbortedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-3);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ABORTED');
const err = new Err();

InvalidArgumentError

An argument to the function is incorrect.

• Name: InvalidArgumentError
• Code: -4
• Description: INVALID_ARGUMENT
• Type: system

const err = new chromiumNetErrors.InvalidArgumentError();
// or
const Err = chromiumNetErrors.getErrorByCode(-4);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_ARGUMENT');
const err = new Err();

InvalidHandleError

The handle or file descriptor is invalid.

• Name: InvalidHandleError
• Code: -5
• Description: INVALID_HANDLE
• Type: system

const err = new chromiumNetErrors.InvalidHandleError();
// or
const Err = chromiumNetErrors.getErrorByCode(-5);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_HANDLE');
const err = new Err();

FileNotFoundError

The file or directory cannot be found.

• Name: FileNotFoundError
• Code: -6
• Description: FILE_NOT_FOUND
• Type: system

const err = new chromiumNetErrors.FileNotFoundError();
// or
const Err = chromiumNetErrors.getErrorByCode(-6);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_NOT_FOUND');
const err = new Err();

TimedOutError

An operation timed out.

• Name: TimedOutError
• Code: -7
• Description: TIMED_OUT
• Type: system

const err = new chromiumNetErrors.TimedOutError();
// or
const Err = chromiumNetErrors.getErrorByCode(-7);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TIMED_OUT');
const err = new Err();

FileTooBigError

The file is too large.

• Name: FileTooBigError
• Code: -8
• Description: FILE_TOO_BIG
• Type: system

const err = new chromiumNetErrors.FileTooBigError();
// or
const Err = chromiumNetErrors.getErrorByCode(-8);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_TOO_BIG');
const err = new Err();

UnexpectedError

An unexpected error. This may be caused by a programming mistake or an invalid assumption.

• Name: UnexpectedError
• Code: -9
• Description: UNEXPECTED
• Type: system

const err = new chromiumNetErrors.UnexpectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-9);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNEXPECTED');
const err = new Err();

AccessDeniedError

Permission to access a resource, other than the network, was denied.

• Name: AccessDeniedError
• Code: -10
• Description: ACCESS_DENIED
• Type: system

const err = new chromiumNetErrors.AccessDeniedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-10);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ACCESS_DENIED');
const err = new Err();

NotImplementedError

The operation failed because of unimplemented functionality.

• Name: NotImplementedError
• Code: -11
• Description: NOT_IMPLEMENTED
• Type: system

const err = new chromiumNetErrors.NotImplementedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-11);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NOT_IMPLEMENTED');
const err = new Err();

InsufficientResourcesError

There were not enough resources to complete the operation.

• Name: InsufficientResourcesError
• Code: -12
• Description: INSUFFICIENT_RESOURCES
• Type: system

const err = new chromiumNetErrors.InsufficientResourcesError();
// or
const Err = chromiumNetErrors.getErrorByCode(-12);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INSUFFICIENT_RESOURCES');
const err = new Err();

OutOfMemoryError

Memory allocation failed.

• Name: OutOfMemoryError
• Code: -13
• Description: OUT_OF_MEMORY
• Type: system

const err = new chromiumNetErrors.OutOfMemoryError();
// or
const Err = chromiumNetErrors.getErrorByCode(-13);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('OUT_OF_MEMORY');
const err = new Err();

UploadFileChangedError

The file upload failed because the file's modification time was different from the expectation.

• Name: UploadFileChangedError
• Code: -14
• Description: UPLOAD_FILE_CHANGED
• Type: system

const err = new chromiumNetErrors.UploadFileChangedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-14);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UPLOAD_FILE_CHANGED');
const err = new Err();

SocketNotConnectedError

The socket is not connected.

• Name: SocketNotConnectedError
• Code: -15
• Description: SOCKET_NOT_CONNECTED
• Type: system

const err = new chromiumNetErrors.SocketNotConnectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-15);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_NOT_CONNECTED');
const err = new Err();

FileExistsError

The file already exists.

• Name: FileExistsError
• Code: -16
• Description: FILE_EXISTS
• Type: system

const err = new chromiumNetErrors.FileExistsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-16);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_EXISTS');
const err = new Err();

FilePathTooLongError

The path or file name is too long.

• Name: FilePathTooLongError
• Code: -17
• Description: FILE_PATH_TOO_LONG
• Type: system

const err = new chromiumNetErrors.FilePathTooLongError();
// or
const Err = chromiumNetErrors.getErrorByCode(-17);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_PATH_TOO_LONG');
const err = new Err();

FileNoSpaceError

Not enough room left on the disk.

• Name: FileNoSpaceError
• Code: -18
• Description: FILE_NO_SPACE
• Type: system

const err = new chromiumNetErrors.FileNoSpaceError();
// or
const Err = chromiumNetErrors.getErrorByCode(-18);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_NO_SPACE');
const err = new Err();

FileVirusInfectedError

The file has a virus.

• Name: FileVirusInfectedError
• Code: -19
• Description: FILE_VIRUS_INFECTED
• Type: system

const err = new chromiumNetErrors.FileVirusInfectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-19);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FILE_VIRUS_INFECTED');
const err = new Err();

BlockedByClientError

The client chose to block the request.

• Name: BlockedByClientError
• Code: -20
• Description: BLOCKED_BY_CLIENT
• Type: system

const err = new chromiumNetErrors.BlockedByClientError();
// or
const Err = chromiumNetErrors.getErrorByCode(-20);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BLOCKED_BY_CLIENT');
const err = new Err();

NetworkChangedError

The network changed.

• Name: NetworkChangedError
• Code: -21
• Description: NETWORK_CHANGED
• Type: system

const err = new chromiumNetErrors.NetworkChangedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-21);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NETWORK_CHANGED');
const err = new Err();

BlockedByAdministratorError

The request was blocked by the URL block list configured by the domain administrator.

• Name: BlockedByAdministratorError
• Code: -22
• Description: BLOCKED_BY_ADMINISTRATOR
• Type: system

const err = new chromiumNetErrors.BlockedByAdministratorError();
// or
const Err = chromiumNetErrors.getErrorByCode(-22);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BLOCKED_BY_ADMINISTRATOR');
const err = new Err();

SocketIsConnectedError

The socket is already connected.

• Name: SocketIsConnectedError
• Code: -23
• Description: SOCKET_IS_CONNECTED
• Type: system

const err = new chromiumNetErrors.SocketIsConnectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-23);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_IS_CONNECTED');
const err = new Err();

BlockedEnrollmentCheckPendingError

The request was blocked because the forced reenrollment check is still pending. This error can only occur on ChromeOS. The error can be emitted by code in chrome/browser/policy/policy_helpers.cc.

• Name: BlockedEnrollmentCheckPendingError
• Code: -24
• Description: BLOCKED_ENROLLMENT_CHECK_PENDING
• Type: system

const err = new chromiumNetErrors.BlockedEnrollmentCheckPendingError();
// or
const Err = chromiumNetErrors.getErrorByCode(-24);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BLOCKED_ENROLLMENT_CHECK_PENDING');
const err = new Err();

UploadStreamRewindNotSupportedError

The upload failed because the upload stream needed to be re-read, due to a retry or a redirect, but the upload stream doesn't support that operation.

• Name: UploadStreamRewindNotSupportedError
• Code: -25
• Description: UPLOAD_STREAM_REWIND_NOT_SUPPORTED
• Type: system

const err = new chromiumNetErrors.UploadStreamRewindNotSupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-25);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UPLOAD_STREAM_REWIND_NOT_SUPPORTED');
const err = new Err();

ContextShutDownError

The request failed because the URLRequestContext is shutting down, or has been shut down.

• Name: ContextShutDownError
• Code: -26
• Description: CONTEXT_SHUT_DOWN
• Type: system

const err = new chromiumNetErrors.ContextShutDownError();
// or
const Err = chromiumNetErrors.getErrorByCode(-26);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONTEXT_SHUT_DOWN');
const err = new Err();

BlockedByResponseError

The request failed because the response was delivered along with requirements which are not met ('X-Frame-Options' and 'Content-Security-Policy' ancestor checks and 'Cross-Origin-Resource-Policy', for instance).

• Name: BlockedByResponseError
• Code: -27
• Description: BLOCKED_BY_RESPONSE
• Type: system

const err = new chromiumNetErrors.BlockedByResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-27);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BLOCKED_BY_RESPONSE');
const err = new Err();

CleartextNotPermittedError

The request was blocked by system policy disallowing some or all cleartext requests. Used for NetworkSecurityPolicy on Android.

• Name: CleartextNotPermittedError
• Code: -29
• Description: CLEARTEXT_NOT_PERMITTED
• Type: system

const err = new chromiumNetErrors.CleartextNotPermittedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-29);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CLEARTEXT_NOT_PERMITTED');
const err = new Err();

BlockedByCspError

The request was blocked by a Content Security Policy

• Name: BlockedByCspError
• Code: -30
• Description: BLOCKED_BY_CSP
• Type: system

const err = new chromiumNetErrors.BlockedByCspError();
// or
const Err = chromiumNetErrors.getErrorByCode(-30);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BLOCKED_BY_CSP');
const err = new Err();

H2OrQuicRequiredError

The request was blocked because of no H/2 or QUIC session.

• Name: H2OrQuicRequiredError
• Code: -31
• Description: H2_OR_QUIC_REQUIRED
• Type: system

const err = new chromiumNetErrors.H2OrQuicRequiredError();
// or
const Err = chromiumNetErrors.getErrorByCode(-31);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('H2_OR_QUIC_REQUIRED');
const err = new Err();

ConnectionClosedError

A connection was closed (corresponding to a TCP FIN).

• Name: ConnectionClosedError
• Code: -100
• Description: CONNECTION_CLOSED
• Type: connection

const err = new chromiumNetErrors.ConnectionClosedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-100);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_CLOSED');
const err = new Err();

ConnectionResetError

A connection was reset (corresponding to a TCP RST).

• Name: ConnectionResetError
• Code: -101
• Description: CONNECTION_RESET
• Type: connection

const err = new chromiumNetErrors.ConnectionResetError();
// or
const Err = chromiumNetErrors.getErrorByCode(-101);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_RESET');
const err = new Err();

ConnectionRefusedError

A connection attempt was refused.

• Name: ConnectionRefusedError
• Code: -102
• Description: CONNECTION_REFUSED
• Type: connection

const err = new chromiumNetErrors.ConnectionRefusedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-102);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_REFUSED');
const err = new Err();

ConnectionAbortedError

A connection timed out as a result of not receiving an ACK for data sent. This can include a FIN packet that did not get ACK'd.

• Name: ConnectionAbortedError
• Code: -103
• Description: CONNECTION_ABORTED
• Type: connection

const err = new chromiumNetErrors.ConnectionAbortedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-103);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_ABORTED');
const err = new Err();

ConnectionFailedError

A connection attempt failed.

• Name: ConnectionFailedError
• Code: -104
• Description: CONNECTION_FAILED
• Type: connection

const err = new chromiumNetErrors.ConnectionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-104);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_FAILED');
const err = new Err();

NameNotResolvedError

The host name could not be resolved.

• Name: NameNotResolvedError
• Code: -105
• Description: NAME_NOT_RESOLVED
• Type: connection

const err = new chromiumNetErrors.NameNotResolvedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-105);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NAME_NOT_RESOLVED');
const err = new Err();

InternetDisconnectedError

The Internet connection has been lost.

• Name: InternetDisconnectedError
• Code: -106
• Description: INTERNET_DISCONNECTED
• Type: connection

const err = new chromiumNetErrors.InternetDisconnectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-106);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INTERNET_DISCONNECTED');
const err = new Err();

SslProtocolError

An SSL protocol error occurred.

• Name: SslProtocolError
• Code: -107
• Description: SSL_PROTOCOL_ERROR
• Type: connection

const err = new chromiumNetErrors.SslProtocolError();
// or
const Err = chromiumNetErrors.getErrorByCode(-107);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_PROTOCOL_ERROR');
const err = new Err();

AddressInvalidError

The IP address or port number is invalid (e.g., cannot connect to the IP address 0 or the port 0).

• Name: AddressInvalidError
• Code: -108
• Description: ADDRESS_INVALID
• Type: connection

const err = new chromiumNetErrors.AddressInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-108);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ADDRESS_INVALID');
const err = new Err();

AddressUnreachableError

The IP address is unreachable. This usually means that there is no route to the specified host or network.

• Name: AddressUnreachableError
• Code: -109
• Description: ADDRESS_UNREACHABLE
• Type: connection

const err = new chromiumNetErrors.AddressUnreachableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-109);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ADDRESS_UNREACHABLE');
const err = new Err();

SslClientAuthCertNeededError

The server requested a client certificate for SSL client authentication.

• Name: SslClientAuthCertNeededError
• Code: -110
• Description: SSL_CLIENT_AUTH_CERT_NEEDED
• Type: connection

const err = new chromiumNetErrors.SslClientAuthCertNeededError();
// or
const Err = chromiumNetErrors.getErrorByCode(-110);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_CERT_NEEDED');
const err = new Err();

TunnelConnectionFailedError

A tunnel connection through the proxy could not be established.

• Name: TunnelConnectionFailedError
• Code: -111
• Description: TUNNEL_CONNECTION_FAILED
• Type: connection

const err = new chromiumNetErrors.TunnelConnectionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-111);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TUNNEL_CONNECTION_FAILED');
const err = new Err();

NoSslVersionsEnabledError

No SSL protocol versions are enabled.

• Name: NoSslVersionsEnabledError
• Code: -112
• Description: NO_SSL_VERSIONS_ENABLED
• Type: connection

const err = new chromiumNetErrors.NoSslVersionsEnabledError();
// or
const Err = chromiumNetErrors.getErrorByCode(-112);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NO_SSL_VERSIONS_ENABLED');
const err = new Err();

SslVersionOrCipherMismatchError

The client and server don't support a common SSL protocol version or cipher suite.

• Name: SslVersionOrCipherMismatchError
• Code: -113
• Description: SSL_VERSION_OR_CIPHER_MISMATCH
• Type: connection

const err = new chromiumNetErrors.SslVersionOrCipherMismatchError();
// or
const Err = chromiumNetErrors.getErrorByCode(-113);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_VERSION_OR_CIPHER_MISMATCH');
const err = new Err();

SslRenegotiationRequestedError

The server requested a renegotiation (rehandshake).

• Name: SslRenegotiationRequestedError
• Code: -114
• Description: SSL_RENEGOTIATION_REQUESTED
• Type: connection

const err = new chromiumNetErrors.SslRenegotiationRequestedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-114);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_RENEGOTIATION_REQUESTED');
const err = new Err();

ProxyAuthUnsupportedError

The proxy requested authentication (for tunnel establishment) with an unsupported method.

• Name: ProxyAuthUnsupportedError
• Code: -115
• Description: PROXY_AUTH_UNSUPPORTED
• Type: connection

const err = new chromiumNetErrors.ProxyAuthUnsupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-115);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_AUTH_UNSUPPORTED');
const err = new Err();

CertErrorInSslRenegotiationError

During SSL renegotiation (rehandshake), the server sent a certificate with an error.

Note: this error is not in the -2xx range so that it won't be handled as a certificate error.

• Name: CertErrorInSslRenegotiationError
• Code: -116
• Description: CERT_ERROR_IN_SSL_RENEGOTIATION
• Type: connection

const err = new chromiumNetErrors.CertErrorInSslRenegotiationError();
// or
const Err = chromiumNetErrors.getErrorByCode(-116);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_ERROR_IN_SSL_RENEGOTIATION');
const err = new Err();

BadSslClientAuthCertError

The SSL handshake failed because of a bad or missing client certificate.

• Name: BadSslClientAuthCertError
• Code: -117
• Description: BAD_SSL_CLIENT_AUTH_CERT
• Type: connection

const err = new chromiumNetErrors.BadSslClientAuthCertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-117);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('BAD_SSL_CLIENT_AUTH_CERT');
const err = new Err();

ConnectionTimedOutError

A connection attempt timed out.

• Name: ConnectionTimedOutError
• Code: -118
• Description: CONNECTION_TIMED_OUT
• Type: connection

const err = new chromiumNetErrors.ConnectionTimedOutError();
// or
const Err = chromiumNetErrors.getErrorByCode(-118);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONNECTION_TIMED_OUT');
const err = new Err();

HostResolverQueueTooLargeError

There are too many pending DNS resolves, so a request in the queue was aborted.

• Name: HostResolverQueueTooLargeError
• Code: -119
• Description: HOST_RESOLVER_QUEUE_TOO_LARGE
• Type: connection

const err = new chromiumNetErrors.HostResolverQueueTooLargeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-119);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HOST_RESOLVER_QUEUE_TOO_LARGE');
const err = new Err();

SocksConnectionFailedError

Failed establishing a connection to the SOCKS proxy server for a target host.

• Name: SocksConnectionFailedError
• Code: -120
• Description: SOCKS_CONNECTION_FAILED
• Type: connection

const err = new chromiumNetErrors.SocksConnectionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-120);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKS_CONNECTION_FAILED');
const err = new Err();

SocksConnectionHostUnreachableError

The SOCKS proxy server failed establishing connection to the target host because that host is unreachable.

• Name: SocksConnectionHostUnreachableError
• Code: -121
• Description: SOCKS_CONNECTION_HOST_UNREACHABLE
• Type: connection

const err = new chromiumNetErrors.SocksConnectionHostUnreachableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-121);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKS_CONNECTION_HOST_UNREACHABLE');
const err = new Err();

AlpnNegotiationFailedError

The request to negotiate an alternate protocol failed.

• Name: AlpnNegotiationFailedError
• Code: -122
• Description: ALPN_NEGOTIATION_FAILED
• Type: connection

const err = new chromiumNetErrors.AlpnNegotiationFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-122);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ALPN_NEGOTIATION_FAILED');
const err = new Err();

SslNoRenegotiationError

The peer sent an SSL no_renegotiation alert message.

• Name: SslNoRenegotiationError
• Code: -123
• Description: SSL_NO_RENEGOTIATION
• Type: connection

const err = new chromiumNetErrors.SslNoRenegotiationError();
// or
const Err = chromiumNetErrors.getErrorByCode(-123);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_NO_RENEGOTIATION');
const err = new Err();

WinsockUnexpectedWrittenBytesError

Winsock sometimes reports more data written than passed. This is probably due to a broken LSP.

• Name: WinsockUnexpectedWrittenBytesError
• Code: -124
• Description: WINSOCK_UNEXPECTED_WRITTEN_BYTES
• Type: connection

const err = new chromiumNetErrors.WinsockUnexpectedWrittenBytesError();
// or
const Err = chromiumNetErrors.getErrorByCode(-124);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('WINSOCK_UNEXPECTED_WRITTEN_BYTES');
const err = new Err();

SslDecompressionFailureAlertError

An SSL peer sent us a fatal decompression_failure alert. This typically occurs when a peer selects DEFLATE compression in the mistaken belief that it supports it.

• Name: SslDecompressionFailureAlertError
• Code: -125
• Description: SSL_DECOMPRESSION_FAILURE_ALERT
• Type: connection

const err = new chromiumNetErrors.SslDecompressionFailureAlertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-125);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_DECOMPRESSION_FAILURE_ALERT');
const err = new Err();

SslBadRecordMacAlertError

An SSL peer sent us a fatal bad_record_mac alert. This has been observed from servers with buggy DEFLATE support.

• Name: SslBadRecordMacAlertError
• Code: -126
• Description: SSL_BAD_RECORD_MAC_ALERT
• Type: connection

const err = new chromiumNetErrors.SslBadRecordMacAlertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-126);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_BAD_RECORD_MAC_ALERT');
const err = new Err();

ProxyAuthRequestedError

The proxy requested authentication (for tunnel establishment).

• Name: ProxyAuthRequestedError
• Code: -127
• Description: PROXY_AUTH_REQUESTED
• Type: connection

const err = new chromiumNetErrors.ProxyAuthRequestedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-127);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_AUTH_REQUESTED');
const err = new Err();

ProxyConnectionFailedError

Could not create a connection to the proxy server. An error occurred either in resolving its name, or in connecting a socket to it. Note that this does NOT include failures during the actual "CONNECT" method of an HTTP proxy.

• Name: ProxyConnectionFailedError
• Code: -130
• Description: PROXY_CONNECTION_FAILED
• Type: connection

const err = new chromiumNetErrors.ProxyConnectionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-130);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_CONNECTION_FAILED');
const err = new Err();

MandatoryProxyConfigurationFailedError

A mandatory proxy configuration could not be used. Currently this means that a mandatory PAC script could not be fetched, parsed or executed.

• Name: MandatoryProxyConfigurationFailedError
• Code: -131
• Description: MANDATORY_PROXY_CONFIGURATION_FAILED
• Type: connection

const err = new chromiumNetErrors.MandatoryProxyConfigurationFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-131);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('MANDATORY_PROXY_CONFIGURATION_FAILED');
const err = new Err();

PreconnectMaxSocketLimitError

We've hit the max socket limit for the socket pool while preconnecting. We don't bother trying to preconnect more sockets.

• Name: PreconnectMaxSocketLimitError
• Code: -133
• Description: PRECONNECT_MAX_SOCKET_LIMIT
• Type: connection

const err = new chromiumNetErrors.PreconnectMaxSocketLimitError();
// or
const Err = chromiumNetErrors.getErrorByCode(-133);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PRECONNECT_MAX_SOCKET_LIMIT');
const err = new Err();

SslClientAuthPrivateKeyAccessDeniedError

The permission to use the SSL client certificate's private key was denied.

• Name: SslClientAuthPrivateKeyAccessDeniedError
• Code: -134
• Description: SSL_CLIENT_AUTH_PRIVATE_KEY_ACCESS_DENIED
• Type: connection

const err = new chromiumNetErrors.SslClientAuthPrivateKeyAccessDeniedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-134);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_PRIVATE_KEY_ACCESS_DENIED');
const err = new Err();

SslClientAuthCertNoPrivateKeyError

The SSL client certificate has no private key.

• Name: SslClientAuthCertNoPrivateKeyError
• Code: -135
• Description: SSL_CLIENT_AUTH_CERT_NO_PRIVATE_KEY
• Type: connection

const err = new chromiumNetErrors.SslClientAuthCertNoPrivateKeyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-135);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_CERT_NO_PRIVATE_KEY');
const err = new Err();

ProxyCertificateInvalidError

The certificate presented by the HTTPS Proxy was invalid.

• Name: ProxyCertificateInvalidError
• Code: -136
• Description: PROXY_CERTIFICATE_INVALID
• Type: connection

const err = new chromiumNetErrors.ProxyCertificateInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-136);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_CERTIFICATE_INVALID');
const err = new Err();

NameResolutionFailedError

An error occurred when trying to do a name resolution (DNS).

• Name: NameResolutionFailedError
• Code: -137
• Description: NAME_RESOLUTION_FAILED
• Type: connection

const err = new chromiumNetErrors.NameResolutionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-137);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NAME_RESOLUTION_FAILED');
const err = new Err();

NetworkAccessDeniedError

Permission to access the network was denied. This is used to distinguish errors that were most likely caused by a firewall from other access denied errors. See also ERR_ACCESS_DENIED.

• Name: NetworkAccessDeniedError
• Code: -138
• Description: NETWORK_ACCESS_DENIED
• Type: connection

const err = new chromiumNetErrors.NetworkAccessDeniedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-138);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NETWORK_ACCESS_DENIED');
const err = new Err();

TemporarilyThrottledError

The request throttler module cancelled this request to avoid DDOS.

• Name: TemporarilyThrottledError
• Code: -139
• Description: TEMPORARILY_THROTTLED
• Type: connection

const err = new chromiumNetErrors.TemporarilyThrottledError();
// or
const Err = chromiumNetErrors.getErrorByCode(-139);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TEMPORARILY_THROTTLED');
const err = new Err();

HttpsProxyTunnelResponseRedirectError

A request to create an SSL tunnel connection through the HTTPS proxy received a 302 (temporary redirect) response. The response body might include a description of why the request failed.

TODO(https://crbug.com/928551): This is deprecated and should not be used by new code.

• Name: HttpsProxyTunnelResponseRedirectError
• Code: -140
• Description: HTTPS_PROXY_TUNNEL_RESPONSE_REDIRECT
• Type: connection

const err = new chromiumNetErrors.HttpsProxyTunnelResponseRedirectError();
// or
const Err = chromiumNetErrors.getErrorByCode(-140);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTPS_PROXY_TUNNEL_RESPONSE_REDIRECT');
const err = new Err();

SslClientAuthSignatureFailedError

We were unable to sign the CertificateVerify data of an SSL client auth handshake with the client certificate's private key.

Possible causes for this include the user implicitly or explicitly denying access to the private key, the private key may not be valid for signing, the key may be relying on a cached handle which is no longer valid, or the CSP won't allow arbitrary data to be signed.

• Name: SslClientAuthSignatureFailedError
• Code: -141
• Description: SSL_CLIENT_AUTH_SIGNATURE_FAILED
• Type: connection

const err = new chromiumNetErrors.SslClientAuthSignatureFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-141);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_SIGNATURE_FAILED');
const err = new Err();

MsgTooBigError

The message was too large for the transport. (for example a UDP message which exceeds size threshold).

• Name: MsgTooBigError
• Code: -142
• Description: MSG_TOO_BIG
• Type: connection

const err = new chromiumNetErrors.MsgTooBigError();
// or
const Err = chromiumNetErrors.getErrorByCode(-142);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('MSG_TOO_BIG');
const err = new Err();

WsProtocolError

Websocket protocol error. Indicates that we are terminating the connection due to a malformed frame or other protocol violation.

• Name: WsProtocolError
• Code: -145
• Description: WS_PROTOCOL_ERROR
• Type: connection

const err = new chromiumNetErrors.WsProtocolError();
// or
const Err = chromiumNetErrors.getErrorByCode(-145);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('WS_PROTOCOL_ERROR');
const err = new Err();

AddressInUseError

Returned when attempting to bind an address that is already in use.

• Name: AddressInUseError
• Code: -147
• Description: ADDRESS_IN_USE
• Type: connection

const err = new chromiumNetErrors.AddressInUseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-147);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ADDRESS_IN_USE');
const err = new Err();

SslHandshakeNotCompletedError

An operation failed because the SSL handshake has not completed.

• Name: SslHandshakeNotCompletedError
• Code: -148
• Description: SSL_HANDSHAKE_NOT_COMPLETED
• Type: connection

const err = new chromiumNetErrors.SslHandshakeNotCompletedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-148);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_HANDSHAKE_NOT_COMPLETED');
const err = new Err();

SslBadPeerPublicKeyError

SSL peer's public key is invalid.

• Name: SslBadPeerPublicKeyError
• Code: -149
• Description: SSL_BAD_PEER_PUBLIC_KEY
• Type: connection

const err = new chromiumNetErrors.SslBadPeerPublicKeyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-149);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_BAD_PEER_PUBLIC_KEY');
const err = new Err();

SslPinnedKeyNotInCertChainError

The certificate didn't match the built-in public key pins for the host name. The pins are set in net/http/transport_security_state.cc and require that one of a set of public keys exist on the path from the leaf to the root.

• Name: SslPinnedKeyNotInCertChainError
• Code: -150
• Description: SSL_PINNED_KEY_NOT_IN_CERT_CHAIN
• Type: connection

const err = new chromiumNetErrors.SslPinnedKeyNotInCertChainError();
// or
const Err = chromiumNetErrors.getErrorByCode(-150);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_PINNED_KEY_NOT_IN_CERT_CHAIN');
const err = new Err();

ClientAuthCertTypeUnsupportedError

Server request for client certificate did not contain any types we support.

• Name: ClientAuthCertTypeUnsupportedError
• Code: -151
• Description: CLIENT_AUTH_CERT_TYPE_UNSUPPORTED
• Type: connection

const err = new chromiumNetErrors.ClientAuthCertTypeUnsupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-151);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CLIENT_AUTH_CERT_TYPE_UNSUPPORTED');
const err = new Err();

SslDecryptErrorAlertError

An SSL peer sent us a fatal decrypt_error alert. This typically occurs when a peer could not correctly verify a signature (in CertificateVerify or ServerKeyExchange) or validate a Finished message.

• Name: SslDecryptErrorAlertError
• Code: -153
• Description: SSL_DECRYPT_ERROR_ALERT
• Type: connection

const err = new chromiumNetErrors.SslDecryptErrorAlertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-153);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_DECRYPT_ERROR_ALERT');
const err = new Err();

WsThrottleQueueTooLargeError

There are too many pending WebSocketJob instances, so the new job was not pushed to the queue.

• Name: WsThrottleQueueTooLargeError
• Code: -154
• Description: WS_THROTTLE_QUEUE_TOO_LARGE
• Type: connection

const err = new chromiumNetErrors.WsThrottleQueueTooLargeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-154);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('WS_THROTTLE_QUEUE_TOO_LARGE');
const err = new Err();

SslServerCertChangedError

The SSL server certificate changed in a renegotiation.

• Name: SslServerCertChangedError
• Code: -156
• Description: SSL_SERVER_CERT_CHANGED
• Type: connection

const err = new chromiumNetErrors.SslServerCertChangedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-156);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_SERVER_CERT_CHANGED');
const err = new Err();

SslUnrecognizedNameAlertError

The SSL server sent us a fatal unrecognized_name alert.

• Name: SslUnrecognizedNameAlertError
• Code: -159
• Description: SSL_UNRECOGNIZED_NAME_ALERT
• Type: connection

const err = new chromiumNetErrors.SslUnrecognizedNameAlertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-159);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_UNRECOGNIZED_NAME_ALERT');
const err = new Err();

SocketSetReceiveBufferSizeError

Failed to set the socket's receive buffer size as requested.

• Name: SocketSetReceiveBufferSizeError
• Code: -160
• Description: SOCKET_SET_RECEIVE_BUFFER_SIZE_ERROR
• Type: connection

const err = new chromiumNetErrors.SocketSetReceiveBufferSizeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-160);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_SET_RECEIVE_BUFFER_SIZE_ERROR');
const err = new Err();

SocketSetSendBufferSizeError

Failed to set the socket's send buffer size as requested.

• Name: SocketSetSendBufferSizeError
• Code: -161
• Description: SOCKET_SET_SEND_BUFFER_SIZE_ERROR
• Type: connection

const err = new chromiumNetErrors.SocketSetSendBufferSizeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-161);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_SET_SEND_BUFFER_SIZE_ERROR');
const err = new Err();

SocketReceiveBufferSizeUnchangeableError

Failed to set the socket's receive buffer size as requested, despite success return code from setsockopt.

• Name: SocketReceiveBufferSizeUnchangeableError
• Code: -162
• Description: SOCKET_RECEIVE_BUFFER_SIZE_UNCHANGEABLE
• Type: connection

const err = new chromiumNetErrors.SocketReceiveBufferSizeUnchangeableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-162);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_RECEIVE_BUFFER_SIZE_UNCHANGEABLE');
const err = new Err();

SocketSendBufferSizeUnchangeableError

Failed to set the socket's send buffer size as requested, despite success return code from setsockopt.

• Name: SocketSendBufferSizeUnchangeableError
• Code: -163
• Description: SOCKET_SEND_BUFFER_SIZE_UNCHANGEABLE
• Type: connection

const err = new chromiumNetErrors.SocketSendBufferSizeUnchangeableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-163);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SOCKET_SEND_BUFFER_SIZE_UNCHANGEABLE');
const err = new Err();

SslClientAuthCertBadFormatError

Failed to import a client certificate from the platform store into the SSL library.

• Name: SslClientAuthCertBadFormatError
• Code: -164
• Description: SSL_CLIENT_AUTH_CERT_BAD_FORMAT
• Type: connection

const err = new chromiumNetErrors.SslClientAuthCertBadFormatError();
// or
const Err = chromiumNetErrors.getErrorByCode(-164);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_CERT_BAD_FORMAT');
const err = new Err();

IcannNameCollisionError

Resolving a hostname to an IP address list included the IPv4 address "127.0.53.53". This is a special IP address which ICANN has recommended to indicate there was a name collision, and alert admins to a potential problem.

• Name: IcannNameCollisionError
• Code: -166
• Description: ICANN_NAME_COLLISION
• Type: connection

const err = new chromiumNetErrors.IcannNameCollisionError();
// or
const Err = chromiumNetErrors.getErrorByCode(-166);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ICANN_NAME_COLLISION');
const err = new Err();

SslServerCertBadFormatError

The SSL server presented a certificate which could not be decoded. This is not a certificate error code as no X509Certificate object is available. This error is fatal.

• Name: SslServerCertBadFormatError
• Code: -167
• Description: SSL_SERVER_CERT_BAD_FORMAT
• Type: connection

const err = new chromiumNetErrors.SslServerCertBadFormatError();
// or
const Err = chromiumNetErrors.getErrorByCode(-167);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_SERVER_CERT_BAD_FORMAT');
const err = new Err();

CtSthParsingFailedError

Certificate Transparency: Received a signed tree head that failed to parse.

• Name: CtSthParsingFailedError
• Code: -168
• Description: CT_STH_PARSING_FAILED
• Type: connection

const err = new chromiumNetErrors.CtSthParsingFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-168);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CT_STH_PARSING_FAILED');
const err = new Err();

CtSthIncompleteError

Certificate Transparency: Received a signed tree head whose JSON parsing was OK but was missing some of the fields.

• Name: CtSthIncompleteError
• Code: -169
• Description: CT_STH_INCOMPLETE
• Type: connection

const err = new chromiumNetErrors.CtSthIncompleteError();
// or
const Err = chromiumNetErrors.getErrorByCode(-169);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CT_STH_INCOMPLETE');
const err = new Err();

UnableToReuseConnectionForProxyAuthError

The attempt to reuse a connection to send proxy auth credentials failed before the AuthController was used to generate credentials. The caller should reuse the controller with a new connection. This error is only used internally by the network stack.

• Name: UnableToReuseConnectionForProxyAuthError
• Code: -170
• Description: UNABLE_TO_REUSE_CONNECTION_FOR_PROXY_AUTH
• Type: connection

const err = new chromiumNetErrors.UnableToReuseConnectionForProxyAuthError();
// or
const Err = chromiumNetErrors.getErrorByCode(-170);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNABLE_TO_REUSE_CONNECTION_FOR_PROXY_AUTH');
const err = new Err();

CtConsistencyProofParsingFailedError

Certificate Transparency: Failed to parse the received consistency proof.

• Name: CtConsistencyProofParsingFailedError
• Code: -171
• Description: CT_CONSISTENCY_PROOF_PARSING_FAILED
• Type: connection

const err = new chromiumNetErrors.CtConsistencyProofParsingFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-171);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CT_CONSISTENCY_PROOF_PARSING_FAILED');
const err = new Err();

SslObsoleteCipherError

The SSL server required an unsupported cipher suite that has since been removed. This error will temporarily be signaled on a fallback for one or two releases immediately following a cipher suite's removal, after which the fallback will be removed.

• Name: SslObsoleteCipherError
• Code: -172
• Description: SSL_OBSOLETE_CIPHER
• Type: connection

const err = new chromiumNetErrors.SslObsoleteCipherError();
// or
const Err = chromiumNetErrors.getErrorByCode(-172);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_OBSOLETE_CIPHER');
const err = new Err();

WsUpgradeError

When a WebSocket handshake is done successfully and the connection has been upgraded, the URLRequest is cancelled with this error code.

• Name: WsUpgradeError
• Code: -173
• Description: WS_UPGRADE
• Type: connection

const err = new chromiumNetErrors.WsUpgradeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-173);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('WS_UPGRADE');
const err = new Err();

ReadIfReadyNotImplementedError

Socket ReadIfReady support is not implemented. This error should not be user visible, because the normal Read() method is used as a fallback.

• Name: ReadIfReadyNotImplementedError
• Code: -174
• Description: READ_IF_READY_NOT_IMPLEMENTED
• Type: connection

const err = new chromiumNetErrors.ReadIfReadyNotImplementedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-174);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('READ_IF_READY_NOT_IMPLEMENTED');
const err = new Err();

NoBufferSpaceError

No socket buffer space is available.

• Name: NoBufferSpaceError
• Code: -176
• Description: NO_BUFFER_SPACE
• Type: connection

const err = new chromiumNetErrors.NoBufferSpaceError();
// or
const Err = chromiumNetErrors.getErrorByCode(-176);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NO_BUFFER_SPACE');
const err = new Err();

SslClientAuthNoCommonAlgorithmsError

There were no common signature algorithms between our client certificate private key and the server's preferences.

• Name: SslClientAuthNoCommonAlgorithmsError
• Code: -177
• Description: SSL_CLIENT_AUTH_NO_COMMON_ALGORITHMS
• Type: connection

const err = new chromiumNetErrors.SslClientAuthNoCommonAlgorithmsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-177);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_CLIENT_AUTH_NO_COMMON_ALGORITHMS');
const err = new Err();

EarlyDataRejectedError

TLS 1.3 early data was rejected by the server. This will be received before any data is returned from the socket. The request should be retried with early data disabled.

• Name: EarlyDataRejectedError
• Code: -178
• Description: EARLY_DATA_REJECTED
• Type: connection

const err = new chromiumNetErrors.EarlyDataRejectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-178);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('EARLY_DATA_REJECTED');
const err = new Err();

WrongVersionOnEarlyDataError

TLS 1.3 early data was offered, but the server responded with TLS 1.2 or earlier. This is an internal error code to account for a backwards-compatibility issue with early data and TLS 1.2. It will be received before any data is returned from the socket. The request should be retried with early data disabled.

See https://tools.ietf.org/html/rfc8446#appendix-D.3 for details.

• Name: WrongVersionOnEarlyDataError
• Code: -179
• Description: WRONG_VERSION_ON_EARLY_DATA
• Type: connection

const err = new chromiumNetErrors.WrongVersionOnEarlyDataError();
// or
const Err = chromiumNetErrors.getErrorByCode(-179);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('WRONG_VERSION_ON_EARLY_DATA');
const err = new Err();

Tls13DowngradeDetectedError

TLS 1.3 was enabled, but a lower version was negotiated and the server returned a value indicating it supported TLS 1.3. This is part of a security check in TLS 1.3, but it may also indicate the user is behind a buggy TLS-terminating proxy which implemented TLS 1.2 incorrectly. (See https://crbug.com/boringssl/226.)

• Name: Tls13DowngradeDetectedError
• Code: -180
• Description: TLS13_DOWNGRADE_DETECTED
• Type: connection

const err = new chromiumNetErrors.Tls13DowngradeDetectedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-180);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TLS13_DOWNGRADE_DETECTED');
const err = new Err();

SslKeyUsageIncompatibleError

The server's certificate has a keyUsage extension incompatible with the negotiated TLS key exchange method.

• Name: SslKeyUsageIncompatibleError
• Code: -181
• Description: SSL_KEY_USAGE_INCOMPATIBLE
• Type: connection

const err = new chromiumNetErrors.SslKeyUsageIncompatibleError();
// or
const Err = chromiumNetErrors.getErrorByCode(-181);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_KEY_USAGE_INCOMPATIBLE');
const err = new Err();

CertCommonNameInvalidError

The server responded with a certificate whose common name did not match the host name. This could mean:

An attacker has redirected our traffic to their server and is presenting a certificate for which they know the private key.

The server is misconfigured and responding with the wrong cert.

The user is on a wireless network and is being redirected to the network's login page.

The OS has used a DNS search suffix and the server doesn't have a certificate for the abbreviated name in the address bar.

• Name: CertCommonNameInvalidError
• Code: -200
• Description: CERT_COMMON_NAME_INVALID
• Type: certificate

const err = new chromiumNetErrors.CertCommonNameInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-200);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_COMMON_NAME_INVALID');
const err = new Err();

CertDateInvalidError

The server responded with a certificate that, by our clock, appears to either not yet be valid or to have expired. This could mean:

An attacker is presenting an old certificate for which they have managed to obtain the private key.

The server is misconfigured and is not presenting a valid cert.

Our clock is wrong.

• Name: CertDateInvalidError
• Code: -201
• Description: CERT_DATE_INVALID
• Type: certificate

const err = new chromiumNetErrors.CertDateInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-201);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_DATE_INVALID');
const err = new Err();

CertAuthorityInvalidError

The server responded with a certificate that is signed by an authority we don't trust. The could mean:

An attacker has substituted the real certificate for a cert that contains their public key and is signed by their cousin.

The server operator has a legitimate certificate from a CA we don't know about, but should trust.

The server is presenting a self-signed certificate, providing no defense against active attackers (but foiling passive attackers).

• Name: CertAuthorityInvalidError
• Code: -202
• Description: CERT_AUTHORITY_INVALID
• Type: certificate

const err = new chromiumNetErrors.CertAuthorityInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-202);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_AUTHORITY_INVALID');
const err = new Err();

CertContainsErrorsError

The server responded with a certificate that contains errors. This error is not recoverable.

MSDN describes this error as follows: "The SSL certificate contains errors." NOTE: It's unclear how this differs from ERR_CERT_INVALID. For consistency, use that code instead of this one from now on.

• Name: CertContainsErrorsError
• Code: -203
• Description: CERT_CONTAINS_ERRORS
• Type: certificate

const err = new chromiumNetErrors.CertContainsErrorsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-203);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_CONTAINS_ERRORS');
const err = new Err();

CertNoRevocationMechanismError

The certificate has no mechanism for determining if it is revoked. In effect, this certificate cannot be revoked.

• Name: CertNoRevocationMechanismError
• Code: -204
• Description: CERT_NO_REVOCATION_MECHANISM
• Type: certificate

const err = new chromiumNetErrors.CertNoRevocationMechanismError();
// or
const Err = chromiumNetErrors.getErrorByCode(-204);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_NO_REVOCATION_MECHANISM');
const err = new Err();

CertUnableToCheckRevocationError

Revocation information for the security certificate for this site is not available. This could mean:

An attacker has compromised the private key in the certificate and is blocking our attempt to find out that the cert was revoked.

The certificate is unrevoked, but the revocation server is busy or unavailable.

• Name: CertUnableToCheckRevocationError
• Code: -205
• Description: CERT_UNABLE_TO_CHECK_REVOCATION
• Type: certificate

const err = new chromiumNetErrors.CertUnableToCheckRevocationError();
// or
const Err = chromiumNetErrors.getErrorByCode(-205);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_UNABLE_TO_CHECK_REVOCATION');
const err = new Err();

CertRevokedError

The server responded with a certificate has been revoked. We have the capability to ignore this error, but it is probably not the thing to do.

• Name: CertRevokedError
• Code: -206
• Description: CERT_REVOKED
• Type: certificate

const err = new chromiumNetErrors.CertRevokedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-206);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_REVOKED');
const err = new Err();

CertInvalidError

The server responded with a certificate that is invalid. This error is not recoverable.

MSDN describes this error as follows: "The SSL certificate is invalid."

• Name: CertInvalidError
• Code: -207
• Description: CERT_INVALID
• Type: certificate

const err = new chromiumNetErrors.CertInvalidError();
// or
const Err = chromiumNetErrors.getErrorByCode(-207);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_INVALID');
const err = new Err();

CertWeakSignatureAlgorithmError

The server responded with a certificate that is signed using a weak signature algorithm.

• Name: CertWeakSignatureAlgorithmError
• Code: -208
• Description: CERT_WEAK_SIGNATURE_ALGORITHM
• Type: certificate

const err = new chromiumNetErrors.CertWeakSignatureAlgorithmError();
// or
const Err = chromiumNetErrors.getErrorByCode(-208);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_WEAK_SIGNATURE_ALGORITHM');
const err = new Err();

CertNonUniqueNameError

The host name specified in the certificate is not unique.

• Name: CertNonUniqueNameError
• Code: -210
• Description: CERT_NON_UNIQUE_NAME
• Type: certificate

const err = new chromiumNetErrors.CertNonUniqueNameError();
// or
const Err = chromiumNetErrors.getErrorByCode(-210);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_NON_UNIQUE_NAME');
const err = new Err();

CertWeakKeyError

The server responded with a certificate that contains a weak key (e.g. a too-small RSA key).

• Name: CertWeakKeyError
• Code: -211
• Description: CERT_WEAK_KEY
• Type: certificate

const err = new chromiumNetErrors.CertWeakKeyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-211);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_WEAK_KEY');
const err = new Err();

CertNameConstraintViolationError

The certificate claimed DNS names that are in violation of name constraints.

• Name: CertNameConstraintViolationError
• Code: -212
• Description: CERT_NAME_CONSTRAINT_VIOLATION
• Type: certificate

const err = new chromiumNetErrors.CertNameConstraintViolationError();
// or
const Err = chromiumNetErrors.getErrorByCode(-212);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_NAME_CONSTRAINT_VIOLATION');
const err = new Err();

CertValidityTooLongError

The certificate's validity period is too long.

• Name: CertValidityTooLongError
• Code: -213
• Description: CERT_VALIDITY_TOO_LONG
• Type: certificate

const err = new chromiumNetErrors.CertValidityTooLongError();
// or
const Err = chromiumNetErrors.getErrorByCode(-213);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_VALIDITY_TOO_LONG');
const err = new Err();

CertificateTransparencyRequiredError

Certificate Transparency was required for this connection, but the server did not provide CT information that complied with the policy.

• Name: CertificateTransparencyRequiredError
• Code: -214
• Description: CERTIFICATE_TRANSPARENCY_REQUIRED
• Type: certificate

const err = new chromiumNetErrors.CertificateTransparencyRequiredError();
// or
const Err = chromiumNetErrors.getErrorByCode(-214);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERTIFICATE_TRANSPARENCY_REQUIRED');
const err = new Err();

CertSymantecLegacyError

The certificate chained to a legacy Symantec root that is no longer trusted. https://g.co/chrome/symantecpkicerts

• Name: CertSymantecLegacyError
• Code: -215
• Description: CERT_SYMANTEC_LEGACY
• Type: certificate

const err = new chromiumNetErrors.CertSymantecLegacyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-215);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_SYMANTEC_LEGACY');
const err = new Err();

CertKnownInterceptionBlockedError

The certificate is known to be used for interception by an entity other the device owner.

• Name: CertKnownInterceptionBlockedError
• Code: -217
• Description: CERT_KNOWN_INTERCEPTION_BLOCKED
• Type: certificate

const err = new chromiumNetErrors.CertKnownInterceptionBlockedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-217);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_KNOWN_INTERCEPTION_BLOCKED');
const err = new Err();

SslObsoleteVersionError

The connection uses an obsolete version of SSL/TLS.

• Name: SslObsoleteVersionError
• Code: -218
• Description: SSL_OBSOLETE_VERSION
• Type: certificate

const err = new chromiumNetErrors.SslObsoleteVersionError();
// or
const Err = chromiumNetErrors.getErrorByCode(-218);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SSL_OBSOLETE_VERSION');
const err = new Err();

CertEndError

The value immediately past the last certificate error code.

• Name: CertEndError
• Code: -219
• Description: CERT_END
• Type: certificate

const err = new chromiumNetErrors.CertEndError();
// or
const Err = chromiumNetErrors.getErrorByCode(-219);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_END');
const err = new Err();

InvalidUrlError

The URL is invalid.

• Name: InvalidUrlError
• Code: -300
• Description: INVALID_URL
• Type: http

const err = new chromiumNetErrors.InvalidUrlError();
// or
const Err = chromiumNetErrors.getErrorByCode(-300);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_URL');
const err = new Err();

DisallowedUrlSchemeError

The scheme of the URL is disallowed.

• Name: DisallowedUrlSchemeError
• Code: -301
• Description: DISALLOWED_URL_SCHEME
• Type: http

const err = new chromiumNetErrors.DisallowedUrlSchemeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-301);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DISALLOWED_URL_SCHEME');
const err = new Err();

UnknownUrlSchemeError

The scheme of the URL is unknown.

• Name: UnknownUrlSchemeError
• Code: -302
• Description: UNKNOWN_URL_SCHEME
• Type: http

const err = new chromiumNetErrors.UnknownUrlSchemeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-302);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNKNOWN_URL_SCHEME');
const err = new Err();

InvalidRedirectError

Attempting to load an URL resulted in a redirect to an invalid URL.

• Name: InvalidRedirectError
• Code: -303
• Description: INVALID_REDIRECT
• Type: http

const err = new chromiumNetErrors.InvalidRedirectError();
// or
const Err = chromiumNetErrors.getErrorByCode(-303);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_REDIRECT');
const err = new Err();

TooManyRedirectsError

Attempting to load an URL resulted in too many redirects.

• Name: TooManyRedirectsError
• Code: -310
• Description: TOO_MANY_REDIRECTS
• Type: http

const err = new chromiumNetErrors.TooManyRedirectsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-310);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TOO_MANY_REDIRECTS');
const err = new Err();

UnsafeRedirectError

Attempting to load an URL resulted in an unsafe redirect (e.g., a redirect to file:// is considered unsafe).

• Name: UnsafeRedirectError
• Code: -311
• Description: UNSAFE_REDIRECT
• Type: http

const err = new chromiumNetErrors.UnsafeRedirectError();
// or
const Err = chromiumNetErrors.getErrorByCode(-311);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNSAFE_REDIRECT');
const err = new Err();

UnsafePortError

Attempting to load an URL with an unsafe port number. These are port numbers that correspond to services, which are not robust to spurious input that may be constructed as a result of an allowed web construct (e.g., HTTP looks a lot like SMTP, so form submission to port 25 is denied).

• Name: UnsafePortError
• Code: -312
• Description: UNSAFE_PORT
• Type: http

const err = new chromiumNetErrors.UnsafePortError();
// or
const Err = chromiumNetErrors.getErrorByCode(-312);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNSAFE_PORT');
const err = new Err();

InvalidResponseError

The server's response was invalid.

• Name: InvalidResponseError
• Code: -320
• Description: INVALID_RESPONSE
• Type: http

const err = new chromiumNetErrors.InvalidResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-320);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_RESPONSE');
const err = new Err();

InvalidChunkedEncodingError

Error in chunked transfer encoding.

• Name: InvalidChunkedEncodingError
• Code: -321
• Description: INVALID_CHUNKED_ENCODING
• Type: http

const err = new chromiumNetErrors.InvalidChunkedEncodingError();
// or
const Err = chromiumNetErrors.getErrorByCode(-321);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_CHUNKED_ENCODING');
const err = new Err();

MethodNotSupportedError

The server did not support the request method.

• Name: MethodNotSupportedError
• Code: -322
• Description: METHOD_NOT_SUPPORTED
• Type: http

const err = new chromiumNetErrors.MethodNotSupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-322);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('METHOD_NOT_SUPPORTED');
const err = new Err();

UnexpectedProxyAuthError

The response was 407 (Proxy Authentication Required), yet we did not send the request to a proxy.

• Name: UnexpectedProxyAuthError
• Code: -323
• Description: UNEXPECTED_PROXY_AUTH
• Type: http

const err = new chromiumNetErrors.UnexpectedProxyAuthError();
// or
const Err = chromiumNetErrors.getErrorByCode(-323);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNEXPECTED_PROXY_AUTH');
const err = new Err();

EmptyResponseError

The server closed the connection without sending any data.

• Name: EmptyResponseError
• Code: -324
• Description: EMPTY_RESPONSE
• Type: http

const err = new chromiumNetErrors.EmptyResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-324);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('EMPTY_RESPONSE');
const err = new Err();

ResponseHeadersTooBigError

The headers section of the response is too large.

• Name: ResponseHeadersTooBigError
• Code: -325
• Description: RESPONSE_HEADERS_TOO_BIG
• Type: http

const err = new chromiumNetErrors.ResponseHeadersTooBigError();
// or
const Err = chromiumNetErrors.getErrorByCode(-325);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_HEADERS_TOO_BIG');
const err = new Err();

PacScriptFailedError

The evaluation of the PAC script failed.

• Name: PacScriptFailedError
• Code: -327
• Description: PAC_SCRIPT_FAILED
• Type: http

const err = new chromiumNetErrors.PacScriptFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-327);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PAC_SCRIPT_FAILED');
const err = new Err();

RequestRangeNotSatisfiableError

The response was 416 (Requested range not satisfiable) and the server cannot satisfy the range requested.

• Name: RequestRangeNotSatisfiableError
• Code: -328
• Description: REQUEST_RANGE_NOT_SATISFIABLE
• Type: http

const err = new chromiumNetErrors.RequestRangeNotSatisfiableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-328);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('REQUEST_RANGE_NOT_SATISFIABLE');
const err = new Err();

MalformedIdentityError

The identity used for authentication is invalid.

• Name: MalformedIdentityError
• Code: -329
• Description: MALFORMED_IDENTITY
• Type: http

const err = new chromiumNetErrors.MalformedIdentityError();
// or
const Err = chromiumNetErrors.getErrorByCode(-329);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('MALFORMED_IDENTITY');
const err = new Err();

ContentDecodingFailedError

Content decoding of the response body failed.

• Name: ContentDecodingFailedError
• Code: -330
• Description: CONTENT_DECODING_FAILED
• Type: http

const err = new chromiumNetErrors.ContentDecodingFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-330);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONTENT_DECODING_FAILED');
const err = new Err();

NetworkIoSuspendedError

An operation could not be completed because all network IO is suspended.

• Name: NetworkIoSuspendedError
• Code: -331
• Description: NETWORK_IO_SUSPENDED
• Type: http

const err = new chromiumNetErrors.NetworkIoSuspendedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-331);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NETWORK_IO_SUSPENDED');
const err = new Err();

SynReplyNotReceivedError

FLIP data received without receiving a SYN_REPLY on the stream.

• Name: SynReplyNotReceivedError
• Code: -332
• Description: SYN_REPLY_NOT_RECEIVED
• Type: http

const err = new chromiumNetErrors.SynReplyNotReceivedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-332);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SYN_REPLY_NOT_RECEIVED');
const err = new Err();

EncodingConversionFailedError

Converting the response to target encoding failed.

• Name: EncodingConversionFailedError
• Code: -333
• Description: ENCODING_CONVERSION_FAILED
• Type: http

const err = new chromiumNetErrors.EncodingConversionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-333);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ENCODING_CONVERSION_FAILED');
const err = new Err();

UnrecognizedFtpDirectoryListingFormatError

The server sent an FTP directory listing in a format we do not understand.

• Name: UnrecognizedFtpDirectoryListingFormatError
• Code: -334
• Description: UNRECOGNIZED_FTP_DIRECTORY_LISTING_FORMAT
• Type: http

const err = new chromiumNetErrors.UnrecognizedFtpDirectoryListingFormatError();
// or
const Err = chromiumNetErrors.getErrorByCode(-334);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNRECOGNIZED_FTP_DIRECTORY_LISTING_FORMAT');
const err = new Err();

NoSupportedProxiesError

There are no supported proxies in the provided list.

• Name: NoSupportedProxiesError
• Code: -336
• Description: NO_SUPPORTED_PROXIES
• Type: http

const err = new chromiumNetErrors.NoSupportedProxiesError();
// or
const Err = chromiumNetErrors.getErrorByCode(-336);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NO_SUPPORTED_PROXIES');
const err = new Err();

Http2ProtocolError

There is an HTTP/2 protocol error.

• Name: Http2ProtocolError
• Code: -337
• Description: HTTP2_PROTOCOL_ERROR
• Type: http

const err = new chromiumNetErrors.Http2ProtocolError();
// or
const Err = chromiumNetErrors.getErrorByCode(-337);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_PROTOCOL_ERROR');
const err = new Err();

InvalidAuthCredentialsError

Credentials could not be established during HTTP Authentication.

• Name: InvalidAuthCredentialsError
• Code: -338
• Description: INVALID_AUTH_CREDENTIALS
• Type: http

const err = new chromiumNetErrors.InvalidAuthCredentialsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-338);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_AUTH_CREDENTIALS');
const err = new Err();

UnsupportedAuthSchemeError

An HTTP Authentication scheme was tried which is not supported on this machine.

• Name: UnsupportedAuthSchemeError
• Code: -339
• Description: UNSUPPORTED_AUTH_SCHEME
• Type: http

const err = new chromiumNetErrors.UnsupportedAuthSchemeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-339);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNSUPPORTED_AUTH_SCHEME');
const err = new Err();

EncodingDetectionFailedError

Detecting the encoding of the response failed.

• Name: EncodingDetectionFailedError
• Code: -340
• Description: ENCODING_DETECTION_FAILED
• Type: http

const err = new chromiumNetErrors.EncodingDetectionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-340);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ENCODING_DETECTION_FAILED');
const err = new Err();

MissingAuthCredentialsError

(GSSAPI) No Kerberos credentials were available during HTTP Authentication.

• Name: MissingAuthCredentialsError
• Code: -341
• Description: MISSING_AUTH_CREDENTIALS
• Type: http

const err = new chromiumNetErrors.MissingAuthCredentialsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-341);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('MISSING_AUTH_CREDENTIALS');
const err = new Err();

UnexpectedSecurityLibraryStatusError

An unexpected, but documented, SSPI or GSSAPI status code was returned.

• Name: UnexpectedSecurityLibraryStatusError
• Code: -342
• Description: UNEXPECTED_SECURITY_LIBRARY_STATUS
• Type: http

const err = new chromiumNetErrors.UnexpectedSecurityLibraryStatusError();
// or
const Err = chromiumNetErrors.getErrorByCode(-342);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNEXPECTED_SECURITY_LIBRARY_STATUS');
const err = new Err();

MisconfiguredAuthEnvironmentError

The environment was not set up correctly for authentication (for example, no KDC could be found or the principal is unknown.

• Name: MisconfiguredAuthEnvironmentError
• Code: -343
• Description: MISCONFIGURED_AUTH_ENVIRONMENT
• Type: http

const err = new chromiumNetErrors.MisconfiguredAuthEnvironmentError();
// or
const Err = chromiumNetErrors.getErrorByCode(-343);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('MISCONFIGURED_AUTH_ENVIRONMENT');
const err = new Err();

UndocumentedSecurityLibraryStatusError

An undocumented SSPI or GSSAPI status code was returned.

• Name: UndocumentedSecurityLibraryStatusError
• Code: -344
• Description: UNDOCUMENTED_SECURITY_LIBRARY_STATUS
• Type: http

const err = new chromiumNetErrors.UndocumentedSecurityLibraryStatusError();
// or
const Err = chromiumNetErrors.getErrorByCode(-344);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('UNDOCUMENTED_SECURITY_LIBRARY_STATUS');
const err = new Err();

ResponseBodyTooBigToDrainError

The HTTP response was too big to drain.

• Name: ResponseBodyTooBigToDrainError
• Code: -345
• Description: RESPONSE_BODY_TOO_BIG_TO_DRAIN
• Type: http

const err = new chromiumNetErrors.ResponseBodyTooBigToDrainError();
// or
const Err = chromiumNetErrors.getErrorByCode(-345);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_BODY_TOO_BIG_TO_DRAIN');
const err = new Err();

ResponseHeadersMultipleContentLengthError

The HTTP response contained multiple distinct Content-Length headers.

• Name: ResponseHeadersMultipleContentLengthError
• Code: -346
• Description: RESPONSE_HEADERS_MULTIPLE_CONTENT_LENGTH
• Type: http

const err = new chromiumNetErrors.ResponseHeadersMultipleContentLengthError();
// or
const Err = chromiumNetErrors.getErrorByCode(-346);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_HEADERS_MULTIPLE_CONTENT_LENGTH');
const err = new Err();

IncompleteHttp2HeadersError

HTTP/2 headers have been received, but not all of them - status or version headers are missing, so we're expecting additional frames to complete them.

• Name: IncompleteHttp2HeadersError
• Code: -347
• Description: INCOMPLETE_HTTP2_HEADERS
• Type: http

const err = new chromiumNetErrors.IncompleteHttp2HeadersError();
// or
const Err = chromiumNetErrors.getErrorByCode(-347);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INCOMPLETE_HTTP2_HEADERS');
const err = new Err();

PacNotInDhcpError

No PAC URL configuration could be retrieved from DHCP. This can indicate either a failure to retrieve the DHCP configuration, or that there was no PAC URL configured in DHCP.

• Name: PacNotInDhcpError
• Code: -348
• Description: PAC_NOT_IN_DHCP
• Type: http

const err = new chromiumNetErrors.PacNotInDhcpError();
// or
const Err = chromiumNetErrors.getErrorByCode(-348);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PAC_NOT_IN_DHCP');
const err = new Err();

ResponseHeadersMultipleContentDispositionError

The HTTP response contained multiple Content-Disposition headers.

• Name: ResponseHeadersMultipleContentDispositionError
• Code: -349
• Description: RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION
• Type: http

const err = new chromiumNetErrors.ResponseHeadersMultipleContentDispositionError();
// or
const Err = chromiumNetErrors.getErrorByCode(-349);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION');
const err = new Err();

ResponseHeadersMultipleLocationError

The HTTP response contained multiple Location headers.

• Name: ResponseHeadersMultipleLocationError
• Code: -350
• Description: RESPONSE_HEADERS_MULTIPLE_LOCATION
• Type: http

const err = new chromiumNetErrors.ResponseHeadersMultipleLocationError();
// or
const Err = chromiumNetErrors.getErrorByCode(-350);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_HEADERS_MULTIPLE_LOCATION');
const err = new Err();

Http2ServerRefusedStreamError

HTTP/2 server refused the request without processing, and sent either a GOAWAY frame with error code NO_ERROR and Last-Stream-ID lower than the stream id corresponding to the request indicating that this request has not been processed yet, or a RST_STREAM frame with error code REFUSED_STREAM. Client MAY retry (on a different connection). See RFC7540 Section 8.1.4.

• Name: Http2ServerRefusedStreamError
• Code: -351
• Description: HTTP2_SERVER_REFUSED_STREAM
• Type: http

const err = new chromiumNetErrors.Http2ServerRefusedStreamError();
// or
const Err = chromiumNetErrors.getErrorByCode(-351);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_SERVER_REFUSED_STREAM');
const err = new Err();

Http2PingFailedError

HTTP/2 server didn't respond to the PING message.

• Name: Http2PingFailedError
• Code: -352
• Description: HTTP2_PING_FAILED
• Type: http

const err = new chromiumNetErrors.Http2PingFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-352);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_PING_FAILED');
const err = new Err();

ContentLengthMismatchError

The HTTP response body transferred fewer bytes than were advertised by the Content-Length header when the connection is closed.

• Name: ContentLengthMismatchError
• Code: -354
• Description: CONTENT_LENGTH_MISMATCH
• Type: http

const err = new chromiumNetErrors.ContentLengthMismatchError();
// or
const Err = chromiumNetErrors.getErrorByCode(-354);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONTENT_LENGTH_MISMATCH');
const err = new Err();

IncompleteChunkedEncodingError

The HTTP response body is transferred with Chunked-Encoding, but the terminating zero-length chunk was never sent when the connection is closed.

• Name: IncompleteChunkedEncodingError
• Code: -355
• Description: INCOMPLETE_CHUNKED_ENCODING
• Type: http

const err = new chromiumNetErrors.IncompleteChunkedEncodingError();
// or
const Err = chromiumNetErrors.getErrorByCode(-355);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INCOMPLETE_CHUNKED_ENCODING');
const err = new Err();

QuicProtocolError

There is a QUIC protocol error.

• Name: QuicProtocolError
• Code: -356
• Description: QUIC_PROTOCOL_ERROR
• Type: http

const err = new chromiumNetErrors.QuicProtocolError();
// or
const Err = chromiumNetErrors.getErrorByCode(-356);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('QUIC_PROTOCOL_ERROR');
const err = new Err();

ResponseHeadersTruncatedError

The HTTP headers were truncated by an EOF.

• Name: ResponseHeadersTruncatedError
• Code: -357
• Description: RESPONSE_HEADERS_TRUNCATED
• Type: http

const err = new chromiumNetErrors.ResponseHeadersTruncatedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-357);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('RESPONSE_HEADERS_TRUNCATED');
const err = new Err();

QuicHandshakeFailedError

The QUIC crytpo handshake failed. This means that the server was unable to read any requests sent, so they may be resent.

• Name: QuicHandshakeFailedError
• Code: -358
• Description: QUIC_HANDSHAKE_FAILED
• Type: http

const err = new chromiumNetErrors.QuicHandshakeFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-358);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('QUIC_HANDSHAKE_FAILED');
const err = new Err();

Http2InadequateTransportSecurityError

Transport security is inadequate for the HTTP/2 version.

• Name: Http2InadequateTransportSecurityError
• Code: -360
• Description: HTTP2_INADEQUATE_TRANSPORT_SECURITY
• Type: http

const err = new chromiumNetErrors.Http2InadequateTransportSecurityError();
// or
const Err = chromiumNetErrors.getErrorByCode(-360);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_INADEQUATE_TRANSPORT_SECURITY');
const err = new Err();

Http2FlowControlError

The peer violated HTTP/2 flow control.

• Name: Http2FlowControlError
• Code: -361
• Description: HTTP2_FLOW_CONTROL_ERROR
• Type: http

const err = new chromiumNetErrors.Http2FlowControlError();
// or
const Err = chromiumNetErrors.getErrorByCode(-361);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_FLOW_CONTROL_ERROR');
const err = new Err();

Http2FrameSizeError

The peer sent an improperly sized HTTP/2 frame.

• Name: Http2FrameSizeError
• Code: -362
• Description: HTTP2_FRAME_SIZE_ERROR
• Type: http

const err = new chromiumNetErrors.Http2FrameSizeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-362);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_FRAME_SIZE_ERROR');
const err = new Err();

Http2CompressionError

Decoding or encoding of compressed HTTP/2 headers failed.

• Name: Http2CompressionError
• Code: -363
• Description: HTTP2_COMPRESSION_ERROR
• Type: http

const err = new chromiumNetErrors.Http2CompressionError();
// or
const Err = chromiumNetErrors.getErrorByCode(-363);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_COMPRESSION_ERROR');
const err = new Err();

ProxyAuthRequestedWithNoConnectionError

Proxy Auth Requested without a valid Client Socket Handle.

• Name: ProxyAuthRequestedWithNoConnectionError
• Code: -364
• Description: PROXY_AUTH_REQUESTED_WITH_NO_CONNECTION
• Type: http

const err = new chromiumNetErrors.ProxyAuthRequestedWithNoConnectionError();
// or
const Err = chromiumNetErrors.getErrorByCode(-364);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_AUTH_REQUESTED_WITH_NO_CONNECTION');
const err = new Err();

Http_1_1RequiredError

HTTP_1_1_REQUIRED error code received on HTTP/2 session.

• Name: Http_1_1RequiredError
• Code: -365
• Description: HTTP_1_1_REQUIRED
• Type: http

const err = new chromiumNetErrors.Http_1_1RequiredError();
// or
const Err = chromiumNetErrors.getErrorByCode(-365);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP_1_1_REQUIRED');
const err = new Err();

ProxyHttp_1_1RequiredError

HTTP_1_1_REQUIRED error code received on HTTP/2 session to proxy.

• Name: ProxyHttp_1_1RequiredError
• Code: -366
• Description: PROXY_HTTP_1_1_REQUIRED
• Type: http

const err = new chromiumNetErrors.ProxyHttp_1_1RequiredError();
// or
const Err = chromiumNetErrors.getErrorByCode(-366);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PROXY_HTTP_1_1_REQUIRED');
const err = new Err();

PacScriptTerminatedError

The PAC script terminated fatally and must be reloaded.

• Name: PacScriptTerminatedError
• Code: -367
• Description: PAC_SCRIPT_TERMINATED
• Type: http

const err = new chromiumNetErrors.PacScriptTerminatedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-367);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PAC_SCRIPT_TERMINATED');
const err = new Err();

InvalidHttpResponseError

The server was expected to return an HTTP/1.x response, but did not. Rather than treat it as HTTP/0.9, this error is returned.

• Name: InvalidHttpResponseError
• Code: -370
• Description: INVALID_HTTP_RESPONSE
• Type: http

const err = new chromiumNetErrors.InvalidHttpResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-370);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_HTTP_RESPONSE');
const err = new Err();

ContentDecodingInitFailedError

Initializing content decoding failed.

• Name: ContentDecodingInitFailedError
• Code: -371
• Description: CONTENT_DECODING_INIT_FAILED
• Type: http

const err = new chromiumNetErrors.ContentDecodingInitFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-371);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CONTENT_DECODING_INIT_FAILED');
const err = new Err();

Http2RstStreamNoErrorReceivedError

Received HTTP/2 RST_STREAM frame with NO_ERROR error code. This error should be handled internally by HTTP/2 code, and should not make it above the SpdyStream layer.

• Name: Http2RstStreamNoErrorReceivedError
• Code: -372
• Description: HTTP2_RST_STREAM_NO_ERROR_RECEIVED
• Type: http

const err = new chromiumNetErrors.Http2RstStreamNoErrorReceivedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-372);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_RST_STREAM_NO_ERROR_RECEIVED');
const err = new Err();

Http2PushedStreamNotAvailableError

The pushed stream claimed by the request is no longer available.

• Name: Http2PushedStreamNotAvailableError
• Code: -373
• Description: HTTP2_PUSHED_STREAM_NOT_AVAILABLE
• Type: http

const err = new chromiumNetErrors.Http2PushedStreamNotAvailableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-373);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_PUSHED_STREAM_NOT_AVAILABLE');
const err = new Err();

Http2ClaimedPushedStreamResetByServerError

A pushed stream was claimed and later reset by the server. When this happens, the request should be retried.

• Name: Http2ClaimedPushedStreamResetByServerError
• Code: -374
• Description: HTTP2_CLAIMED_PUSHED_STREAM_RESET_BY_SERVER
• Type: http

const err = new chromiumNetErrors.Http2ClaimedPushedStreamResetByServerError();
// or
const Err = chromiumNetErrors.getErrorByCode(-374);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_CLAIMED_PUSHED_STREAM_RESET_BY_SERVER');
const err = new Err();

TooManyRetriesError

An HTTP transaction was retried too many times due for authentication or invalid certificates. This may be due to a bug in the net stack that would otherwise infinite loop, or if the server or proxy continually requests fresh credentials or presents a fresh invalid certificate.

• Name: TooManyRetriesError
• Code: -375
• Description: TOO_MANY_RETRIES
• Type: http

const err = new chromiumNetErrors.TooManyRetriesError();
// or
const Err = chromiumNetErrors.getErrorByCode(-375);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TOO_MANY_RETRIES');
const err = new Err();

Http2StreamClosedError

Received an HTTP/2 frame on a closed stream.

• Name: Http2StreamClosedError
• Code: -376
• Description: HTTP2_STREAM_CLOSED
• Type: http

const err = new chromiumNetErrors.Http2StreamClosedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-376);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_STREAM_CLOSED');
const err = new Err();

Http2ClientRefusedStreamError

Client is refusing an HTTP/2 stream.

• Name: Http2ClientRefusedStreamError
• Code: -377
• Description: HTTP2_CLIENT_REFUSED_STREAM
• Type: http

const err = new chromiumNetErrors.Http2ClientRefusedStreamError();
// or
const Err = chromiumNetErrors.getErrorByCode(-377);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_CLIENT_REFUSED_STREAM');
const err = new Err();

Http2PushedResponseDoesNotMatchError

A pushed HTTP/2 stream was claimed by a request based on matching URL and request headers, but the pushed response headers do not match the request.

• Name: Http2PushedResponseDoesNotMatchError
• Code: -378
• Description: HTTP2_PUSHED_RESPONSE_DOES_NOT_MATCH
• Type: http

const err = new chromiumNetErrors.Http2PushedResponseDoesNotMatchError();
// or
const Err = chromiumNetErrors.getErrorByCode(-378);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP2_PUSHED_RESPONSE_DOES_NOT_MATCH');
const err = new Err();

HttpResponseCodeFailureError

The server returned a non-2xx HTTP response code.

Not that this error is only used by certain APIs that interpret the HTTP response itself. URLRequest for instance just passes most non-2xx response back as success.

• Name: HttpResponseCodeFailureError
• Code: -379
• Description: HTTP_RESPONSE_CODE_FAILURE
• Type: http

const err = new chromiumNetErrors.HttpResponseCodeFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-379);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('HTTP_RESPONSE_CODE_FAILURE');
const err = new Err();

QuicCertRootNotKnownError

The certificate presented on a QUIC connection does not chain to a known root and the origin connected to is not on a list of domains where unknown roots are allowed.

• Name: QuicCertRootNotKnownError
• Code: -380
• Description: QUIC_CERT_ROOT_NOT_KNOWN
• Type: http

const err = new chromiumNetErrors.QuicCertRootNotKnownError();
// or
const Err = chromiumNetErrors.getErrorByCode(-380);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('QUIC_CERT_ROOT_NOT_KNOWN');
const err = new Err();

QuicGoawayRequestCanBeRetriedError

A GOAWAY frame has been received indicating that the request has not been processed and is therefore safe to retry on a different connection.

• Name: QuicGoawayRequestCanBeRetriedError
• Code: -381
• Description: QUIC_GOAWAY_REQUEST_CAN_BE_RETRIED
• Type: http

const err = new chromiumNetErrors.QuicGoawayRequestCanBeRetriedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-381);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('QUIC_GOAWAY_REQUEST_CAN_BE_RETRIED');
const err = new Err();

CacheMissError

The cache does not have the requested entry.

• Name: CacheMissError
• Code: -400
• Description: CACHE_MISS
• Type: cache

const err = new chromiumNetErrors.CacheMissError();
// or
const Err = chromiumNetErrors.getErrorByCode(-400);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_MISS');
const err = new Err();

CacheReadFailureError

Unable to read from the disk cache.

• Name: CacheReadFailureError
• Code: -401
• Description: CACHE_READ_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheReadFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-401);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_READ_FAILURE');
const err = new Err();

CacheWriteFailureError

Unable to write to the disk cache.

• Name: CacheWriteFailureError
• Code: -402
• Description: CACHE_WRITE_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheWriteFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-402);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_WRITE_FAILURE');
const err = new Err();

CacheOperationNotSupportedError

The operation is not supported for this entry.

• Name: CacheOperationNotSupportedError
• Code: -403
• Description: CACHE_OPERATION_NOT_SUPPORTED
• Type: cache

const err = new chromiumNetErrors.CacheOperationNotSupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-403);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_OPERATION_NOT_SUPPORTED');
const err = new Err();

CacheOpenFailureError

The disk cache is unable to open this entry.

• Name: CacheOpenFailureError
• Code: -404
• Description: CACHE_OPEN_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheOpenFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-404);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_OPEN_FAILURE');
const err = new Err();

CacheCreateFailureError

The disk cache is unable to create this entry.

• Name: CacheCreateFailureError
• Code: -405
• Description: CACHE_CREATE_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheCreateFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-405);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_CREATE_FAILURE');
const err = new Err();

CacheRaceError

Multiple transactions are racing to create disk cache entries. This is an internal error returned from the HttpCache to the HttpCacheTransaction that tells the transaction to restart the entry-creation logic because the state of the cache has changed.

• Name: CacheRaceError
• Code: -406
• Description: CACHE_RACE
• Type: cache

const err = new chromiumNetErrors.CacheRaceError();
// or
const Err = chromiumNetErrors.getErrorByCode(-406);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_RACE');
const err = new Err();

CacheChecksumReadFailureError

The cache was unable to read a checksum record on an entry. This can be returned from attempts to read from the cache. It is an internal error, returned by the SimpleCache backend, but not by any URLRequest methods or members.

• Name: CacheChecksumReadFailureError
• Code: -407
• Description: CACHE_CHECKSUM_READ_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheChecksumReadFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-407);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_CHECKSUM_READ_FAILURE');
const err = new Err();

CacheChecksumMismatchError

The cache found an entry with an invalid checksum. This can be returned from attempts to read from the cache. It is an internal error, returned by the SimpleCache backend, but not by any URLRequest methods or members.

• Name: CacheChecksumMismatchError
• Code: -408
• Description: CACHE_CHECKSUM_MISMATCH
• Type: cache

const err = new chromiumNetErrors.CacheChecksumMismatchError();
// or
const Err = chromiumNetErrors.getErrorByCode(-408);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_CHECKSUM_MISMATCH');
const err = new Err();

CacheLockTimeoutError

Internal error code for the HTTP cache. The cache lock timeout has fired.

• Name: CacheLockTimeoutError
• Code: -409
• Description: CACHE_LOCK_TIMEOUT
• Type: cache

const err = new chromiumNetErrors.CacheLockTimeoutError();
// or
const Err = chromiumNetErrors.getErrorByCode(-409);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_LOCK_TIMEOUT');
const err = new Err();

CacheAuthFailureAfterReadError

Received a challenge after the transaction has read some data, and the credentials aren't available. There isn't a way to get them at that point.

• Name: CacheAuthFailureAfterReadError
• Code: -410
• Description: CACHE_AUTH_FAILURE_AFTER_READ
• Type: cache

const err = new chromiumNetErrors.CacheAuthFailureAfterReadError();
// or
const Err = chromiumNetErrors.getErrorByCode(-410);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_AUTH_FAILURE_AFTER_READ');
const err = new Err();

CacheEntryNotSuitableError

Internal not-quite error code for the HTTP cache. In-memory hints suggest that the cache entry would not have been useable with the transaction's current configuration (e.g. load flags, mode, etc.)

• Name: CacheEntryNotSuitableError
• Code: -411
• Description: CACHE_ENTRY_NOT_SUITABLE
• Type: cache

const err = new chromiumNetErrors.CacheEntryNotSuitableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-411);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_ENTRY_NOT_SUITABLE');
const err = new Err();

CacheDoomFailureError

The disk cache is unable to doom this entry.

• Name: CacheDoomFailureError
• Code: -412
• Description: CACHE_DOOM_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheDoomFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-412);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_DOOM_FAILURE');
const err = new Err();

CacheOpenOrCreateFailureError

The disk cache is unable to open or create this entry.

• Name: CacheOpenOrCreateFailureError
• Code: -413
• Description: CACHE_OPEN_OR_CREATE_FAILURE
• Type: cache

const err = new chromiumNetErrors.CacheOpenOrCreateFailureError();
// or
const Err = chromiumNetErrors.getErrorByCode(-413);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CACHE_OPEN_OR_CREATE_FAILURE');
const err = new Err();

InsecureResponseError

The server's response was insecure (e.g. there was a cert error).

• Name: InsecureResponseError
• Code: -501
• Description: INSECURE_RESPONSE
• Type: unknown

const err = new chromiumNetErrors.InsecureResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-501);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INSECURE_RESPONSE');
const err = new Err();

NoPrivateKeyForCertError

An attempt to import a client certificate failed, as the user's key database lacked a corresponding private key.

• Name: NoPrivateKeyForCertError
• Code: -502
• Description: NO_PRIVATE_KEY_FOR_CERT
• Type: unknown

const err = new chromiumNetErrors.NoPrivateKeyForCertError();
// or
const Err = chromiumNetErrors.getErrorByCode(-502);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('NO_PRIVATE_KEY_FOR_CERT');
const err = new Err();

AddUserCertFailedError

An error adding a certificate to the OS certificate database.

• Name: AddUserCertFailedError
• Code: -503
• Description: ADD_USER_CERT_FAILED
• Type: unknown

const err = new chromiumNetErrors.AddUserCertFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-503);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('ADD_USER_CERT_FAILED');
const err = new Err();

InvalidSignedExchangeError

An error occurred while handling a signed exchange.

• Name: InvalidSignedExchangeError
• Code: -504
• Description: INVALID_SIGNED_EXCHANGE
• Type: unknown

const err = new chromiumNetErrors.InvalidSignedExchangeError();
// or
const Err = chromiumNetErrors.getErrorByCode(-504);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_SIGNED_EXCHANGE');
const err = new Err();

InvalidWebBundleError

An error occurred while handling a Web Bundle source.

• Name: InvalidWebBundleError
• Code: -505
• Description: INVALID_WEB_BUNDLE
• Type: unknown

const err = new chromiumNetErrors.InvalidWebBundleError();
// or
const Err = chromiumNetErrors.getErrorByCode(-505);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('INVALID_WEB_BUNDLE');
const err = new Err();

TrustTokenOperationFailedError

A Trust Tokens protocol operation-executing request failed for one of a number of reasons (precondition failure, internal error, bad response).

• Name: TrustTokenOperationFailedError
• Code: -506
• Description: TRUST_TOKEN_OPERATION_FAILED
• Type: unknown

const err = new chromiumNetErrors.TrustTokenOperationFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-506);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TRUST_TOKEN_OPERATION_FAILED');
const err = new Err();

TrustTokenOperationSuccessWithoutSendingRequestError

When handling a Trust Tokens protocol operation-executing request, the system was able to execute the request's Trust Tokens operation without sending the request to its destination: for instance, the results could have been present in a local cache (for redemption) or the operation could have been diverted to a local provider (for "platform-provided" issuance).

• Name: TrustTokenOperationSuccessWithoutSendingRequestError
• Code: -507
• Description: TRUST_TOKEN_OPERATION_SUCCESS_WITHOUT_SENDING_REQUEST
• Type: unknown

const err = new chromiumNetErrors.TrustTokenOperationSuccessWithoutSendingRequestError();
// or
const Err = chromiumNetErrors.getErrorByCode(-507);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('TRUST_TOKEN_OPERATION_SUCCESS_WITHOUT_SENDING_REQUEST');
const err = new Err();

FtpFailedError

A generic error for failed FTP control connection command. If possible, please use or add a more specific error code.

• Name: FtpFailedError
• Code: -601
• Description: FTP_FAILED
• Type: ftp

const err = new chromiumNetErrors.FtpFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-601);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_FAILED');
const err = new Err();

FtpServiceUnavailableError

The server cannot fulfill the request at this point. This is a temporary error. FTP response code 421.

• Name: FtpServiceUnavailableError
• Code: -602
• Description: FTP_SERVICE_UNAVAILABLE
• Type: ftp

const err = new chromiumNetErrors.FtpServiceUnavailableError();
// or
const Err = chromiumNetErrors.getErrorByCode(-602);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_SERVICE_UNAVAILABLE');
const err = new Err();

FtpTransferAbortedError

The server has aborted the transfer. FTP response code 426.

• Name: FtpTransferAbortedError
• Code: -603
• Description: FTP_TRANSFER_ABORTED
• Type: ftp

const err = new chromiumNetErrors.FtpTransferAbortedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-603);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_TRANSFER_ABORTED');
const err = new Err();

FtpFileBusyError

The file is busy, or some other temporary error condition on opening the file. FTP response code 450.

• Name: FtpFileBusyError
• Code: -604
• Description: FTP_FILE_BUSY
• Type: ftp

const err = new chromiumNetErrors.FtpFileBusyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-604);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_FILE_BUSY');
const err = new Err();

FtpSyntaxError

Server rejected our command because of syntax errors. FTP response codes 500, 501.

• Name: FtpSyntaxError
• Code: -605
• Description: FTP_SYNTAX_ERROR
• Type: ftp

const err = new chromiumNetErrors.FtpSyntaxError();
// or
const Err = chromiumNetErrors.getErrorByCode(-605);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_SYNTAX_ERROR');
const err = new Err();

FtpCommandNotSupportedError

Server does not support the command we issued. FTP response codes 502, 504.

• Name: FtpCommandNotSupportedError
• Code: -606
• Description: FTP_COMMAND_NOT_SUPPORTED
• Type: ftp

const err = new chromiumNetErrors.FtpCommandNotSupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-606);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_COMMAND_NOT_SUPPORTED');
const err = new Err();

FtpBadCommandSequenceError

Server rejected our command because we didn't issue the commands in right order. FTP response code 503.

• Name: FtpBadCommandSequenceError
• Code: -607
• Description: FTP_BAD_COMMAND_SEQUENCE
• Type: ftp

const err = new chromiumNetErrors.FtpBadCommandSequenceError();
// or
const Err = chromiumNetErrors.getErrorByCode(-607);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('FTP_BAD_COMMAND_SEQUENCE');
const err = new Err();

Pkcs12ImportBadPasswordError

PKCS #12 import failed due to incorrect password.

• Name: Pkcs12ImportBadPasswordError
• Code: -701
• Description: PKCS12_IMPORT_BAD_PASSWORD
• Type: certificate-manager

const err = new chromiumNetErrors.Pkcs12ImportBadPasswordError();
// or
const Err = chromiumNetErrors.getErrorByCode(-701);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PKCS12_IMPORT_BAD_PASSWORD');
const err = new Err();

Pkcs12ImportFailedError

PKCS #12 import failed due to other error.

• Name: Pkcs12ImportFailedError
• Code: -702
• Description: PKCS12_IMPORT_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.Pkcs12ImportFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-702);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PKCS12_IMPORT_FAILED');
const err = new Err();

ImportCaCertNotCaError

CA import failed - not a CA cert.

• Name: ImportCaCertNotCaError
• Code: -703
• Description: IMPORT_CA_CERT_NOT_CA
• Type: certificate-manager

const err = new chromiumNetErrors.ImportCaCertNotCaError();
// or
const Err = chromiumNetErrors.getErrorByCode(-703);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('IMPORT_CA_CERT_NOT_CA');
const err = new Err();

ImportCertAlreadyExistsError

Import failed - certificate already exists in database. Note it's a little weird this is an error but reimporting a PKCS12 is ok (no-op). That's how Mozilla does it, though.

• Name: ImportCertAlreadyExistsError
• Code: -704
• Description: IMPORT_CERT_ALREADY_EXISTS
• Type: certificate-manager

const err = new chromiumNetErrors.ImportCertAlreadyExistsError();
// or
const Err = chromiumNetErrors.getErrorByCode(-704);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('IMPORT_CERT_ALREADY_EXISTS');
const err = new Err();

ImportCaCertFailedError

CA import failed due to some other error.

• Name: ImportCaCertFailedError
• Code: -705
• Description: IMPORT_CA_CERT_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.ImportCaCertFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-705);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('IMPORT_CA_CERT_FAILED');
const err = new Err();

ImportServerCertFailedError

Server certificate import failed due to some internal error.

• Name: ImportServerCertFailedError
• Code: -706
• Description: IMPORT_SERVER_CERT_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.ImportServerCertFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-706);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('IMPORT_SERVER_CERT_FAILED');
const err = new Err();

Pkcs12ImportInvalidMacError

PKCS #12 import failed due to invalid MAC.

• Name: Pkcs12ImportInvalidMacError
• Code: -707
• Description: PKCS12_IMPORT_INVALID_MAC
• Type: certificate-manager

const err = new chromiumNetErrors.Pkcs12ImportInvalidMacError();
// or
const Err = chromiumNetErrors.getErrorByCode(-707);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PKCS12_IMPORT_INVALID_MAC');
const err = new Err();

Pkcs12ImportInvalidFileError

PKCS #12 import failed due to invalid/corrupt file.

• Name: Pkcs12ImportInvalidFileError
• Code: -708
• Description: PKCS12_IMPORT_INVALID_FILE
• Type: certificate-manager

const err = new chromiumNetErrors.Pkcs12ImportInvalidFileError();
// or
const Err = chromiumNetErrors.getErrorByCode(-708);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PKCS12_IMPORT_INVALID_FILE');
const err = new Err();

Pkcs12ImportUnsupportedError

PKCS #12 import failed due to unsupported features.

• Name: Pkcs12ImportUnsupportedError
• Code: -709
• Description: PKCS12_IMPORT_UNSUPPORTED
• Type: certificate-manager

const err = new chromiumNetErrors.Pkcs12ImportUnsupportedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-709);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PKCS12_IMPORT_UNSUPPORTED');
const err = new Err();

KeyGenerationFailedError

Key generation failed.

• Name: KeyGenerationFailedError
• Code: -710
• Description: KEY_GENERATION_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.KeyGenerationFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-710);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('KEY_GENERATION_FAILED');
const err = new Err();

PrivateKeyExportFailedError

Failure to export private key.

• Name: PrivateKeyExportFailedError
• Code: -712
• Description: PRIVATE_KEY_EXPORT_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.PrivateKeyExportFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-712);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('PRIVATE_KEY_EXPORT_FAILED');
const err = new Err();

SelfSignedCertGenerationFailedError

Self-signed certificate generation failed.

• Name: SelfSignedCertGenerationFailedError
• Code: -713
• Description: SELF_SIGNED_CERT_GENERATION_FAILED
• Type: certificate-manager

const err = new chromiumNetErrors.SelfSignedCertGenerationFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-713);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('SELF_SIGNED_CERT_GENERATION_FAILED');
const err = new Err();

CertDatabaseChangedError

The certificate database changed in some way.

• Name: CertDatabaseChangedError
• Code: -714
• Description: CERT_DATABASE_CHANGED
• Type: certificate-manager

const err = new chromiumNetErrors.CertDatabaseChangedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-714);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('CERT_DATABASE_CHANGED');
const err = new Err();

DnsMalformedResponseError

DNS resolver received a malformed response.

• Name: DnsMalformedResponseError
• Code: -800
• Description: DNS_MALFORMED_RESPONSE
• Type: dns

const err = new chromiumNetErrors.DnsMalformedResponseError();
// or
const Err = chromiumNetErrors.getErrorByCode(-800);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_MALFORMED_RESPONSE');
const err = new Err();

DnsServerRequiresTcpError

DNS server requires TCP

• Name: DnsServerRequiresTcpError
• Code: -801
• Description: DNS_SERVER_REQUIRES_TCP
• Type: dns

const err = new chromiumNetErrors.DnsServerRequiresTcpError();
// or
const Err = chromiumNetErrors.getErrorByCode(-801);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_SERVER_REQUIRES_TCP');
const err = new Err();

DnsServerFailedError

DNS server failed. This error is returned for all of the following error conditions: 1 - Format error - The name server was unable to interpret the query. 2 - Server failure - The name server was unable to process this query due to a problem with the name server. 4 - Not Implemented - The name server does not support the requested kind of query. 5 - Refused - The name server refuses to perform the specified operation for policy reasons.

• Name: DnsServerFailedError
• Code: -802
• Description: DNS_SERVER_FAILED
• Type: dns

const err = new chromiumNetErrors.DnsServerFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-802);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_SERVER_FAILED');
const err = new Err();

DnsTimedOutError

DNS transaction timed out.

• Name: DnsTimedOutError
• Code: -803
• Description: DNS_TIMED_OUT
• Type: dns

const err = new chromiumNetErrors.DnsTimedOutError();
// or
const Err = chromiumNetErrors.getErrorByCode(-803);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_TIMED_OUT');
const err = new Err();

DnsCacheMissError

The entry was not found in cache or other local sources, for lookups where only local sources were queried. TODO(ericorth): Consider renaming to DNS_LOCAL_MISS or something like that as the cache is not necessarily queried either.

• Name: DnsCacheMissError
• Code: -804
• Description: DNS_CACHE_MISS
• Type: dns

const err = new chromiumNetErrors.DnsCacheMissError();
// or
const Err = chromiumNetErrors.getErrorByCode(-804);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_CACHE_MISS');
const err = new Err();

DnsSearchEmptyError

Suffix search list rules prevent resolution of the given host name.

• Name: DnsSearchEmptyError
• Code: -805
• Description: DNS_SEARCH_EMPTY
• Type: dns

const err = new chromiumNetErrors.DnsSearchEmptyError();
// or
const Err = chromiumNetErrors.getErrorByCode(-805);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_SEARCH_EMPTY');
const err = new Err();

DnsSortError

Failed to sort addresses according to RFC3484.

• Name: DnsSortError
• Code: -806
• Description: DNS_SORT_ERROR
• Type: dns

const err = new chromiumNetErrors.DnsSortError();
// or
const Err = chromiumNetErrors.getErrorByCode(-806);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_SORT_ERROR');
const err = new Err();

DnsSecureResolverHostnameResolutionFailedError

Failed to resolve the hostname of a DNS-over-HTTPS server.

• Name: DnsSecureResolverHostnameResolutionFailedError
• Code: -808
• Description: DNS_SECURE_RESOLVER_HOSTNAME_RESOLUTION_FAILED
• Type: dns

const err = new chromiumNetErrors.DnsSecureResolverHostnameResolutionFailedError();
// or
const Err = chromiumNetErrors.getErrorByCode(-808);
const err = new Err();
// or
const Err = chromiumNetErrors.getErrorByDescription('DNS_SECURE_RESOLVER_HOSTNAME_RESOLUTION_FAILED');
const err = new Err();

Author: Maxkueng
Source Code: https://github.com/maxkueng/chromium-net-errors 
License: MIT license

#electron #node #error