So I'm building a React application for a client and they want me to find when a user is not authenticated, and redirect to a different site. When the user is not authenticated, the app returns the errors you see below. Apologies for the blackout, but basically the errors come from the embed itself and not my app so putting try...catch around the authentication/embedding does not work.
The code that kicks off the auth and embed process looks like this. I've simplified it to what's important and removed information about the client.
async function setupEverything(x) {
LookerEmbedSDK.init('<URL>')
await LookerEmbedSDK.createDashboardWithId(x)
.appendTo('#dashboard')
.build()
.connect()
.then(setupDashboard) // Ignore this, has nothing to do with embed.
.catch((error) => {
console.error('An unexpected error occurred', error)
})
}
Essentially the embed is in an iframe, probably the error is thrown from the iframe. Is there a way to listen to this error event given that I cannot access the code within the iFrame? Should I tell my clients it's a lost cause?
Related
I often see repeatable errors in my console that I'd like to programmatically respond to but I can't figure out how to access and parse them in my React application. In certain situations when the source of the error is known, I know error boundaries or try/catch blocks can work. There are many situations where I have no idea where the error originates from though, so I don't know what code to wrap in an error boundary.
As one specific example, I often see this SSL related networking error in my console: NET::ERR_CERT_AUTHORITY_INVALID.
When that error appears, I want to popup instructions to the user on our working fix. It's not clear exactly what code is generating that log though, so I'd like to simply detect when it pops up in the log and respond. Is this possible and is there a better approach?
Edit: Here's an example where I attempt a simple axios fetch to a site with a known network problem. In this case the error has no information about what the error is, yet in the console.log I can clearly see the error was ERR_CERT_AUTHORITY_INVALID. Is there no way for me to just retrieve that error message from the console?
const fetch = async () => {
try {
const response = await axios.get('https://self-signed.badssl.com/');
console.log(response);
} catch (error) {
if (axios.isAxiosError(error)) {
console.log(error.toJSON());
return error.message;
} else {
console.log('unexpected error: ', error);
return 'An unexpected error occurred';
}
};
Image of resulting console log.
Here's a codesandbox with the above code in a basic react application. Codesandbox doesn't show the error though so it needs to be run locally so google chrome dev tools can be used to see the error.
https://codesandbox.io/s/silly-babbage-jl11wb?file=/src/App.js
Suppose, I have this function with a wrong 'uri' string provided to fetch:
function imgChanger(uri) {
fetch('uri', { mode: 'cors' })//WRONG 'uri' to demonstrate that catch doesn't prevent console's red error
.then(function (response) {
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
}).then(function (response) {
img.src = response.data.images.original.url;
}).catch((err)=>{
console.log(err);
});
}
Despite handling the error, I can see a 404 message in the console:
I have two questions regarding this: why is it being shown despite catching it and how do I handle it?
I'm afraid there's little you can do here. There's an Issue 124534: Provide a way not to display 404 XHR errors in console open in Chromium almost 10 (!) years ago:
Chromium always displays HTTP 404s as errors in the Javascript
console. Apart from forcing line noise onto developers when they may
not want it (404s can be spotted easily in the 'Network' tab), I think
this actually goes against the spirit of HTTP. If you have a
telephone direcotry lookup, for example, and you GET
http://myHost/directory/numbers/12345678
... the server should respond with a 404 if that number was not in the
directory. This is even really an 'error' in my opinion - it's just
information. Why should Chromium display this as an error in the
console?
And as you can see, it's still open (and is essentially treated as 'by design'). Here's another telling quote:
8 years gone by and I still cannot control how a client responds to a
request. Our in-house API's have been changed to always respond with
200, with a custom status field to correctly filter what is an actual
error and what is just simply not there.
It's painfully moronic that we have to move away from REST to actually
use a semantic status.
But rejoice! there seems to be a discussion open in 2021, so hopefully we'll get things moving in the end. Now, unfortunately, it's not that easy:
There seems to be general agreement that it would be preferable to
remove these error messages from the console. But it is also very
likely that currently a lot of DevTools users depend on these error
messages in their workflow. We have not yet found a way to reconcile
these 2 sides.
And now the obligatory xkcd comic:
Error encountered
This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled.
I am trying to use signin with email link in firebase and React Apllication build using EXPO
when i run this code i get the email link but when i click on that link i get this error
My code is
const actionCodeSettings = {
url: ` https://servy-a8ef2.firebaseapp.com`,
handleCodeInApp: true,
};
await firebase
.auth()
.sendSignInLinkToEmail(email, actionCodeSettings)
.then(function () {
})
.catch(function (error) {
console.log("error", error);
// Some error occurred, you can inspect the code: error.code
});
I don’t know if it’s still relevant, I had the same error. Maybe for someone it will be useful.
First of all, check your link, there is a space before https, firebase may encode it as "%20https..." That’s why it does not work. And check your quotes as well, the back quotes can be encoded differently.
I had problem with an environmental variable, i put the value with quotes, that google encoded as "%27http......%27". So that was my error.
I am a total newbie.
I've made a small script to login in sites, but it doesn't work in a particular one (the one I made this script for)
and I get this error if I use DEBUG: in terminal
Error 403--Forbidden From RFC 2068 Hypertext Transfer Protocol -- HTTP/1.1:
10.4.4 403 Forbidden The server understood the request, but is refusing to fulfill it. Authorization will not help and the request
SHOULD NOT be repeated. If the request method was not HEAD and the
server wishes to make public why the request has not been fulfilled,
it SHOULD describe the reason for the refusal in the entity. This
status code is commonly used when the server does not wish to reveal
exactly why the request has been refused, or when no other response is
applicable.
OR instead of the webpage I get a page with the ORACLE ACCESS MANAGER logo and this message
Error System error. Please re-try your action. If you continue to
get this error, please contact the Administrator.
Is there any extra security layer that doesn't let me to enter and how to bypass it?
Here is the code:
const Nightmare = require('nightmare');
const nightmare = Nightmare({ show: true});
nightmare
.goto('path')
.type('input[name="username"]', 'username')
.type('input[name="password"]', 'password')
.click('input[type="submit"][value = "OK"]')
.wait(5000)
.evaluate(() => document.querySelector('body').innerText)
.end()
.then(console.log)
.catch(error => {
console.error('Search failed:', error)
});
So the problem was lying that the 'path' in the .goto method for that particular
site shouldn't be the url of the login page but the url that the site redirects me after I normally login or any other address that I have access to after I have logged in the site.
I'm currently developing a little Website with Firebase. I got a couple of HTML files and each file contains a logout button which calls the function
function logout(){
auth.logout();
console.log("logout successfull");
location.href="index.html";
}
After getting redirected I tried to login again but it always failed with the following error message:
Error: FirebaseSimpleLogin: An unknown server error occurred.
It took me some time to realise that the redirection to the index page caused the problem. When I delte the location.href="index.html"; line, everything works fine.
Problem is, I really need something that redirects me to the front page, when the user isn´t loged in. Is this a known problem and/or can someone come up with a solution to this problem?
Thanks in advance :)
PS.: I realised that I could "fix" the problem (after getting redirected to the index page) when I cause an error (f.e. calling a undefined function). Idk if this information helps...
Ok, thanks for your reply Kato!
I changed quite a lot, since I started the "project". Instead of using mutliple HTML files I copied everything into the index.html and work now with mutliple (hidden) DIVs.
But unfortunatly, the problem still exists.
I offer two different Login possibilites. One with Facebook (works 100% of the time for me) and one with the SimpleLogin (works barely).
I´m pretty sure I did the initialization the same way like it´s done in the tutorials on firebase.com.
This is how I connect to the Firebase DB
var ref = new Firebase('https://partyfinder-db.firebaseio.com/');
var auth = new FirebaseSimpleLogin(ref, function(error, user) {
if (error) {
// an error occurred while attempting login
alert(error);
} else if (user) {
// Here I work with user.id etc.
} else {
// user is logged out
}
});
And that is how I try to login the user...
function login() {
//I probably should use jQuery here...
var _email = document.getElementById("emailLogin").value;
var _pw1 = document.getElementById("passwordLogin").value;
var _rememberMe = document.getElementById("rememberMe").checked;
auth.login('password', {
email: _email,
password: _pw1,
rememberMe: _rememberMe
});
showMain(); //Hide and show DIVs and stuff...
}
I call this function on the SignIn Button. The whole Javascript file is linked in the head part of the HTML file.
So, calling this function is normally causing the following error
Error: FirebaseSimpleLogin: An unknown server error occurred.
I already figured out that this message only shows up when the connection to the DB already was successful. For example, when I type in an invalide email adress, the following message appears:
Error: FirebaseSimpleLogin: The specified user does not exist.
There are a few things that can "fix" the problem. For example, when I use the Facebook Login and logout after this was successful, I can sign in using firebase simpleLogin. Sometimes (unfortunatly not always) it helps when I`m causing an error, f.e. calling a non existing function. After the error message is displayed in the console, I can continue logging in (successfully).
But to be honest I`ve absolutly no idea what this tells me about the error and if this is somehow a hint to the solution. I also tried to set some breaking points and debug through the relevant code (using google chrome) but didn´t find anything.
I uploaded the page to a free webspace, where you can test this whole thing by yourself.
But please note, this project is just for testing purpos. I´m not planning to release it somehow, it´s just for me to figure out multiple things and I find it easier to learn something when I can set it in a context. I´m pretty sure it´s quite bad coded and contains many mistakes, etc. But I´m always grateful for feedback beside the actual problem :)
For the login you can use
email: user#email.com
password: user
If you use the FB-Login, your Name and your email adress will be saved to the Database (but I can delete this section of the code if you want/need to use it and feel uncomfortable about it).
http://partyfinder.lima-city.de/
Most of the comments are in german, sorry for that...