question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unhandled promise rejection on redirect

See original GitHub issue

Issue Description

https://github.com/4Catalyzer/found#redirects

We successfully use redirects elsewhere in our app, but are encountering a problem with our dashboard redirect - for some reason I can’t spot. I’ve searched and cannot find a related issue.

Here is a snippet of code from the route:

      <Route
        path="/"
        Component={loadable(() => import(/* webpackChunkName: "Landing" */ './LandingPage'))}
        render={args => {
          const { Component, props } = args
          const subdomain = resolveSubdomain()
          if (subdomain) {
            throw new RedirectException('/dashboard')
          } else {
            return !Component ? undefined : <Component {...props} />
          }
        }}
      />

The results of this are:

Unhandled promise rejection 
Object { location: "/dashboard" }
es6.promise.js:110
onUnhandled/</result<
es6.promise.js:110
kiCJ/module.exports
_perform.js:3:12
onUnhandled/<
es6.promise.js:104
[6725]/module.exports
_invoke.js:5
<anonymous>
_task.js:35
run
_task.js:21
listener
_task.js:25

For context, this route is rendered within the following:

const RootRouteComponent = (props: AppFrameProps) => (
  <TenantSwitcher>
    <GoogleAnalyticsProvider>
      <AppFrame {...props} />
    </GoogleAnalyticsProvider>
  </TenantSwitcher>
)


      <Route>
        <Route Component={RootRouteComponent}>
          {this.resolve(LandingRoutes)} {/* Landing routes resolves to the code above */}
          {/* We do something similar here in renderAuthenticate and it works fine */}
          <Route render={this.renderAuthenticate}>
            {this.resolve(AccessRoutes)}
          </Route>
        </Route>
      </Route>

The routes guarded by <Route render={this.renderAuthenticate}> serve conditional redirects fine, the only thing different is that the redirect logic is on a parent route, whereas in the dashboard redirect, it is on the route with the component itself.

What am I missing here?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:15 (14 by maintainers)

github_iconTop GitHub Comments

2reactions
taioncommented, Oct 29, 2018

I don’t really know what’s going on here. A couple of possibilities:

0reactions
hisapycommented, Feb 8, 2019

Hey devs,

As requested by @taion in Slack, I’m posting my experience with a very similar error here, but in my case it was when trying to catch a request error coming from a Promise.reject.

For the record, I’m currently on the following versions: ├─ found-relay@0.4.0-alpha.3 └─ found@0.4.0-alpha.6

Basically, my problem was that the renderError of the following router (based on found-relay) was never called.

const FarceRouter = createFarceRouter({
  historyProtocol: new BrowserProtocol(),
  historyMiddlewares: [queryMiddleware],
  routeConfig: routeConfig,

  render: createRender({
    renderError({ error, router, location }) {
      if (process.env.NODE_ENV !== "test") {
        // eslint-disable-next-line no-console
        console.error(error);
      }

      switch (error.status) {
        case 401:
          return <Login router={router} location={location} />;
        case 404:
          return <h1>Página no encontrada o en construcción</h1>;
        default:
          return <h1>Ha ocurrido un error. Intente recargar la página</h1>;
      }
    }
  })
});

At first I thought it was a problem with Relay v2 … my server was returning a response with status 401 that was Promise.rejected in my Relay Network Layer, but then I realized that renderError was not being called even after removing the Relay part and creating a route just to render just a throw new HttpError(404, "hola").

The app was crashing with:

asyncToGenerator.js:24 Uncaught (in promise) HttpError {status: 404, data: "hola"}

Then I suspected the problem was caused because my Route component was imported from an internal package called auth-required-route that is added as a dependency in a CRA app, both packages in a Lerna+Yarn workspaces monorepo. Since the module is so simple and small, and because CRA is configured to load modern Javascript by default but not JSX from node_modules, I just added a build step to pass the component through @babel/plugin-transform-react-jsx. found and react are added as peerDependency in auth-required-route. So in order to discard this, I copied the code to the CRA, and the renderError started working again.

Anyway, I need this auth-required-route package to work so I imported again its AuthRequiredRoute that was just throwing the HttpError and started the debugger. The code didn’t stop by the catch, like it wasn’t a HttpError. In the process I saw some parts going into some babel stuff, so I went to see the package.json of the CRA and it had a babel-loader. I don’t remember why I installed it because CRA already has all the babel stuff, it even had a different version from the CRA.

Finally, I removed the babel-loader, from the CRA, and cleaned my node_modules and everything started working as expected. I don’t what was exactly the solution but I strongly suspect that babel-loader or other babel stuff was involved in it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Unhandled promise rejection on redirect in Nodejs
I have stumbled upon a strange issue with promises when redirecting in nodejs. In the code below I am using a function to...
Read more >
Using Express.js Routes for Promise-based Error Handling
Special Case 1: Redirecting. Suppose we want to redirect users to another URL. Let's add a function getUserProfilePicUrl() in userService.js :
Read more >
fetch() - Web APIs | MDN
A fetch() promise only rejects when a network error is encountered (which is usually when there's a permissions issue or similar). A fetch() ......
Read more >
Handle errors and exceptions in MSAL.js
For error handling in authentication flows with redirect methods ... acquireTokenPopup ) return promises, so you can use the promise pattern ...
Read more >
Error when redirecting to Okta login page - Questions
When we are redirecting to Okta login page, we see below error in the browser console: Unhandled Promise rejection: Issuer URL passed to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found