Hi, I am getting a blank screen in react if there is an error in the backend during authentication or if the backend is down. Is there any way to do a redirect to an error page on error?

Hey! Is this for your own routes? Or the routes which are handled by the SDK?

for the sdk routes and the routes wrapped into Thirdpartyemailpassword components

<Route path={'*'} element={<ThirdPartyEmailPasswordAuth>
       <ProtectedZone/>
       </ThirdPartyEmailPasswordAuth>}
       />

Right. And have you enabled email verification feature?

no

Hmmm. So which api requests are failing in that case? From the network tab

its activated, sorry i've read failure instad of feature

Ah right. So I assume the api that checks if an email is verified fails?

all requests to my backend are failing because i turned if off

Does your frontend have an error boundary?

there is no error bounery. I am running in dev mode. But normally, if there is an error, an error screen is shown. But here, the page is blank

Agreed. So this might be a bug on our side

The same problem occures, ater deleting users which are currently logged in. If they refresh the page, it is blank. This can only be fixed by deleting the cookies but this is not a valid solution for end users

Hmmmm. Can you enable your backend, but just switch of the supertokens core. And then see what the behaviour is?

i am using the hosted service. I can disable supertokens.init

Change the connection uri to some random domain

same result - blank page

Can we get on a quick debugging call?

Unfortunately, no

hmm. Okay. Then i'll try and reproduce the issue myself

The error message with a wrong api key is like expected:

supertokens_python.exceptions.GeneralError: SuperTokens core threw an error for a GET request to path: /apiversion with status code: 401 and message: Invalid API key

right.

only if i am logged in

got it. Thanks.

respectively if supertokens cookies are set

cool

Thanks, i will try it out in 1-2h

Hmm. Are you sure you are using the right version? Did a rebuild? Cleared cache?

from ackage.json:

"supertokens-auth-react": "github:supertokens/supertokens-auth-react#next-breaking-change",

Can you delete node modules, package-lock.json and reinstall?

yes. It will take some time. My internet connection is very slow

Cool

also, can you check the console logs please?

@rp_st still a blank page

Which api call is failing from the network tab?

/auth/user/email/verify

Hmm. I ran the exact same scenario, and for me it shows the error stack

My root container is empty . should that be?

Yeah, if an error is thrown like this it unmounts the entire react tree.

Ok. But i cant see an error.

that's strange. if you refresh with the console open nothing gets logged?

But if a do something like console.log(undefined.test) i am getting an error

do you have an error boundary around it your app? that might be catching the error.

No error boundary

oh, sorry, didn't see.

@Luca would it be possible to upload some part of your code on GitHub so that we can replicate this?

After reinstallig my dependencies all errors are not resulting in an error page

Not or now?

not - page is blank

Would it be possible to get on a call at all to help fix this?

@rp_st M Internet connection is slow last days - zoom is loosing connection all 2 minutes or so. But i fixed the issue and now i am getting

TypeError: Failed to fetch

that happens when the backend is not running and you query it. So yea.. it's expected

ok, this wasn't shown before

oh yea.

npm i git+https://github.com:supertokens/supertokens-auth-react.git#0.25

i am getting still a blank page if i provide an invalid api key. What works is something like in my global fetch override:

javascript
const res = await origFetch(input, init)
const url = input.url || input
if (isApiDomain(url)) {
    ...
    if (url.includes('/auth') && res.status === 500) {
        throw new Error('Suppertokens error')
    }
}

hmmm

Yey. I will extract the relavant parts and upload it to gitup

perfect! thanks

I added you to my frontend repo. You need to use the dev branch

ok thanks

@rp_st could you show me what you've changed plase?

I just created an error boundary component like this:

ts
class ErrorBoundary extends React.Component<unknown, ErrorBoundaryState> {
    constructor(props: { hasError: boolean }) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(): ErrorBoundaryState {
        return { hasError: true };
    }

    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
        console.info(error, errorInfo);
    }

    render(): JSX.Element | ReactNode | undefined {
        if (this.state.hasError) {
            return "Error boundry UI";
        }

        return this.props.children;
    }
}

And wrapped the whole app with this component.

Ok, this works. But i am wondering why react is not showing the error overlay by default

no idea

The problem now with the error boundary is, that is catches all errors. But i want to do something if an error occurres during supertokens auth

well this only catches error that'd otherwise crash your entire app

@rp_st @porcellus thanks for all your help. Now I have a status page if my Backend is not reachable and automatic logout in case of there are stored cookies for an user which does not exist anymore - exactly what i need.