A step-by-step guide on detecting ERR_CERT_AUTHORITY_INVALID error in javascript

I'm working on a Web Application that requires fetching data from various IOT devices on the local network, for example:

const response = await fetch("https://192.168.0.245/api/auto/login", options);

Since this involves an https connection and each IOT device has a self-signed SSL certificate, the fetch() function throws an error "TypeError: Failed to fetch" (due to the certificate not being accepted), resulting in the following message appearing in the browser console:

OPTIONS https://192.168.0.245/api/auto/login net::ERR_CERT_AUTHORITY_INVALID

I need to be able to handle this error in JavaScript, specifically targeting different errors such as ERR_CERT_AUTHORITY_INVALID, ERR_SSL_PROTOCOL_ERROR, or ERR_CONNECTION_REFUSED, so that I can display appropriate error messages accordingly.

Unfortunately, regardless of the specific error, the fetch() function consistently throws the generic "TypeError: Failed to fetch" exception.

Is there any way to catch the specific ERR_CERT_AUTHORITY_INVALID exception?

Thanks.

Answer №1

Upon examining the fetch polyfill code, I discovered that it operates similarly to the native browser implementation, albeit with different error messages. Unfortunately, it lacks specific details about encountered errors. In a particular section of the code (lines 466 and 471), I observed instances where a TypeError is thrown with the message 'Network request failed'.

reject(new TypeError('Network request failed'))

Essentially, all you receive is an error message without any additional context. After exploring the documentation for TypeError, it appears that no extra information is provided beyond what is typically available with a standard Exception. The fetch specification mandates the throwing of a TypeError in such scenarios.

If you are seeking more detailed error reporting, you may need to explore other libraries. While researching, I came across options like:

Alternatively, consider implementing a solution using XMLHttpRequest directly. Building upon the existing fetch polyfill code could be a good place to start. You can modify the project by adding some console.log statements to see the types of errors it logs.

Answer №2

When your Internet connection is not secure, you may encounter this error which indicates it is not https.

An alternative solution is to remove the SSL Certificate from your server side so that your request format would resemble "".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to retrieve JSON data for the second time, AJAX fails to fetch the information

After successfully sending an Ajax request to a php file and receiving a JSON array of the submitted data, I encountered an error on the second attempt. The error message reads: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSO ...

What is the process for executing an HTML file on localhost3000?

After linking all my .js files and HTML to my server file, I encountered an issue when launching localhost3000 - it displayed "cannot get/". Despite attempting various solutions, the problem persists. Is there anyone who knows how to resolve this? My serv ...

Having trouble with HTML not properly rendering within a JSP if() statement

I appreciate the assistance. The issue was due to setting the variable equal to b instead of having b equal the variable. ...

Transforming PHP shortcode into JQuery functionality

My website is built on Wordpress, and I use javascript to load some of the content. Here's an example: jQuery(".portfolio-fs-slides").css({"display":"none"}).prepend('<div class="portfolio-fs-slide current-slide portfolio-ppreview"><d ...

"Animating an HTML element to track the movement of the mouse pointer

I'm currently working with an html element that looks like this: <img src="./pic/char.png" width="30" height="30" alt="me"> I'm wondering if anyone knows how to make this html element move towards the cursor using javascript. Any help wou ...

Is there a way to determine if an option includes a blank character?

I am working with a dropdown list that is populated with values from a database. <asp:DropDownList Runat="server" ID="cmbSalut" data-bind="value: drSalut"></asp:DropDownList> When a specific record is opened, I need to select the correspondin ...

Managing iframe scrolling using the parent window's scrollbar

I am currently working on an iframe to be utilized across various domains. The functionality of this iframe involves displaying a data list that updates when the bottom of the scroll is reached. An issue I encountered is that the parent window, where the ...

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

I'm attempting to update the value of the Material UI Datepicker Input using React Testing Library. Unfortunately, I have not been successful with the fireEvent.change() method. import React from "react"; import { render, screen, waitFor, fi ...

Calculate the total number of pages within an epub document

As a beginner in the world of epub, I have acquired numerous files in different epub formats and now wish to make them easily readable online. I'm not quite sure what an epub file contains. Is there a method to determine the number of pages in my epub ...

"Tips on updating the value of a BehaviorSubject with map, filter, find, or findIndex in an Angular

TS arrData = new BehaviorSubject<any>([]); ngOnInit() { const dataArr1 = [ { id: '1', name: 'Room1', spinning: true }, { id: '2', name: 'Room2&apos ...

Tips for populating input fields that are generated dynamically based on the completion of an AJAX request

I am encountering an issue with my HTML code that adds barcode[] and description[] input fields dynamically to a form. The onfocusout event triggers the get_barcode_data JS function, which is supposed to retrieve the barcode description. However, it seems ...

Troubleshooting Loading Problems in React Native Using Geny Motion

Currently utilizing react native Using react-native-cli version 2.0.1 and react-native version 0.55.3 Execution was done through react-native run-android Encountering a perpetual loading screen while running the app in debugger mode, with 127.0.0.1:8081 ...

error encountered in NestJS: unable to modify headers once they have been sent

request /login/login.html redirect /login I made a change to the redirect within the interceptor export class UricheckInterceptor implements NestInterceptor { constructor(private uri: string[]) {} intercept(context: ExecutionContext, next: CallHa ...

Dividing HTML and JavaScript using Vue

Is there a way to separate HTML from data/methods in VueJS to avoid having one long file with both? I tried moving the contents of my <script> section into a new file called "methods.js" and importing it using: <script src="methods.js"> Note ...

drag items on your smartphone with ease

Hello everyone, I am looking to make items draggable on a smartphone as well. Here is my HTML code: <input class="inputText mb-2 border border-primary rounded" v-model="newTodo" @keypress.13='addTodo' placeholder="W ...

How is it that a callback function can successfully execute with fewer arguments provided?

Code I'm really intrigued by how this code functions. In the verifyUser function, it passes a callback function as the fourth argument to the verifyToken function. However, upon examining the verifyToken function itself, I noticed that it only has th ...

Ways to send information to browser javascript from Spring MVC controller

Looking for the most efficient method to transfer data from Spring MVC to JavaScript. Let's say there is an array in JavaScript: var myArray = new Array(); And in the Java backend, there is another array: int[] myArray = new int[100]; What would ...

Integrate a variable called "counter" with the jQuery ID

I currently have the following code, which is functioning well. $('.clickable').click(function(e){ e.preventDefault(); $('#toggle').slideToggle(); }); $('.clickable1').click(function(e){ e.preventDefault(); $('# ...

Utilize the jQuery autocomplete UI Widget to trigger a select event on a dynamically generated row in a table

Currently, I have successfully implemented a jQuery autocomplete feature on the text input of a table data element called txtRow1. The data for this autocomplete is fetched remotely from a MySQL database and returned in JSON format as 'value' for ...

Is there a more secure alternative to using the risky eval() function? Do I need to take the lengthier route by implementing a switch case instead?

I've been practicing and honing my Javascript skills by working on a calculator code that initially had lots of repetitive lines. I managed to simplify it, but I am aware that using the eval() method is not generally recommended. let current = 0; f ...