Unhandled promise rejection on redirect

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?

[taion]

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

• This RedirectException is somehow a different class. Maybe drop a breakpoint in https://github.com/4Catalyzer/found/blob/ca594e7d1800ac7d45ab6e82fd1a7b994945c964/src/createBaseRouter.js#L142 and see if that check is failing.
• The compilation does something different in the subclass case… check if the emitted code looks somehow weird

[hisapy]

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.