How to handle the error of over MAU limit?

ijufumi · April 16, 2022, 6:36am

I would like to handle the error when the MAU rate limit is over.

Could you please tell me how to handle this error?
I guess that I can use error of useAuth0, but I couldn’t find any documents about this.

Thanks

Which SDK this is regarding: auth0-react
SDK Version: 1.8.0
Platform Version: Node 16.4.10

dan.woda · April 18, 2022, 9:59pm

Hi @ijufumi,

Welcome to the Auth0 Community!

Can you post the full error you are seeing? And can you expand on your expectations of how to handle this? Do you have an example of what you mean?

ijufumi · April 21, 2022, 2:36am

Sorry, I can not.

Previously, I faced a MAU rate limit error and upgraded my plan to resolve this issue.
However, I would like to implement MAU rate limit error handling for the future.

dan.woda · April 21, 2022, 3:13pm

Without more information, it is difficult to understand what you are asking. What is the error name and description at least?

ijufumi · April 25, 2022, 1:49am

Sorry for your confusion.

I don’t know what errors are returned when the count of Monthy Active Users is larger than contract one.
Is it possible that the error message is You have reached the global limit for your account?

Like this → Global limit has been reached

dan.woda · April 25, 2022, 3:51pm

That is a rate limit error, and isn’t associated with MAUs.

From what I remember, there is no error that is thrown if you are over the MAU limit.

ijufumi · May 6, 2022, 9:54pm

Thanks for your response!
I got it.

Can I handle the rate limit error using error of useAuth0 of auth0-react ?

dan.woda · May 9, 2022, 4:10pm

How do you want to handle the error? With an error page?

ijufumi · May 10, 2022, 11:10pm

Yes, exactly!

I want to show the error page when the rate limit error happened.

If possible, I would like to switch error pages depending on the cause.

dan.woda · May 11, 2022, 3:00pm

Can you share the existing code that is causing the error? Also, to be clear, you are calling the management API and getting a rate limit error? I ask because the management API is very limited for use with SPAs, and hitting the rate limit suggests something unintended is causing the increase in request volume.

Otherwise, it sounds like you just need information on how to handle any HTTP error in react.

ijufumi · May 14, 2022, 8:22am

Thank you for your response!

Our codes use auth0-react like the code of Getting started.

Therefore, I think it seems there are no problems with our codes.

Otherwise, it sounds like you just need information on how to handle any HTTP error in react.

It seems we can handle with error of useAuth0.
Is it correct?

github.com

auth0/auth0-react/blob/main/src/auth0-provider.tsx#L262


      
          );
          
          const handleRedirectCallback = useCallback(
            async (url?: string): Promise<RedirectLoginResult> => {
              try {
                return await client.handleRedirectCallback(url);
              } catch (error) {
                throw tokenError(error);
              } finally {
                dispatch({
                  type: 'HANDLE_REDIRECT_COMPLETE',
                  user: await client.getUser(),
                });
              }
            },
            [client]
          );
          
          const contextValue = useMemo<Auth0ContextInterface<User>>(() => {
            return {
              ...state,

dan.woda · May 16, 2022, 4:08pm

As long as the error is being returned in the useAuth0 hook, the state of the hook should include an error and you can render a component/element. There is an example in our demo. You can see it in action here:

github.com

auth0-samples/auth0-react-samples/blob/master/Sample-01/src/App.js#L24


      
          // styles
          import "./App.css";
          
          
// fontawesome
          import initFontAwesome from "./utils/initFontAwesome";
          initFontAwesome();
          
          
const App = () => {
            const { isLoading, error } = useAuth0();
          
          
  if (error) {
              return <div>Oops... {error.message}</div>;
            }
          
          
  if (isLoading) {
              return <Loading />;
            }
          
          
  return (
              <Router history={history}>
                <div id="app" className="d-flex flex-column h-100">

ijufumi · May 22, 2022, 7:23am

Thank you for your sharing!

I’ll try it!