Failed to connect custom domain (DNS_PROBE_FINISHED_NXDOMAIN)

🧑‍💻 Technical Support
1

Hello,
we were trying to connect our 8th Wall-hosted project to custom domain which we purchased at namecheap.com. The process of establishing the linking with CNAMEs and 8th Wall Dashboard went smoothly, but visiting the url with the new domain simply does not open the 8th wall effect. DNS_PROBE_FINISHED_NXDOMAIN error appears.

Do you have an idea what could be wrong? Do we have to setup SSL at the domain registrar?

The domain seems to be correctly linked, as it shows when inspecting dnschecker.org
When sharing the link with the new domain, it automatically embeds a thumbnail of the 8th wall experience, which also points at the notion that the linking was successful.

Any help would be much appreciated!

2

It could be that your DNS is still propagating, I would check again in a few days, but there’s no exact way to tell how long it could take without more information.

2 Likes
3

Thank you for the response! It turned out it was just the propagation delay, after all.

However, another issue arose. The project is a react project using react-router-dom for routing to multiple screens. Everything works fine in public and staging 8th wall links, but the routing simply does not work with the custom domain. The website correctly renders the landing page but after clicking buttons or changing the url, the app simply stays in the landing page with no change. The buttons work, but the routing does not. Also, there are no errors in the console.

Do you have an idea what could be the issue? Is there something to be configured?

Thank you.

4

@GeorgeButler It seems like the issue is the client-side routing - clicking on correctly changes the URL but the content of the page is not changed in any way. Neither does directly manipulating the URL.
I am attaching react-app.tsx render() just in case

<BrowserRouter>
          <Switch>
            <Route exact path={`${base}`} render={props => <LandingPage {...props} />}/>
            <Route exact path={`${base}/:lang`} render={props => <LandingPage {...props} />}/>
            
            <Route exact path={`${base}/authorization/:lang`} component={AuthorizationPage} />
            <Route exact path={`${base}/character/:lang`} component={CharacterPage} />

            <Route exact path={`${base}/scene/:lang`} render={props => <Scene {...props} />} />

            <Route exact path={`${base}/form/:lang`} component={VictoryForm} />
            <Route exact path={`${base}/congratulations/:lang`} component={Congratulations} />
            <Route exact path={`${base}/ranking/:lang`} component={Ranking} />
            <Route component={NotFound} />
          </Switch>
        </BrowserRouter>

These helpers for routing are directly from 8th wall

// Utility method for constructing absolute paths from a location and a relative path.
const path = ({pathname}, rel: string) => {
  const full = `${pathname}/${rel}`
  const pathComponents =
    full.split('/').filter(pathComponent => pathComponent && pathComponent !== '.')
  const pathComponentStack = []
  pathComponents.forEach((pathComponent) => {
    if (pathComponent === '..') {
      if (!pathComponentStack.length) {
        throw new Error(`Invalid path ${rel} relative to ${pathname}`)
      }
      pathComponentStack.pop()
      return
    }
    pathComponentStack.push(pathComponent)
  })
  return `/${pathComponentStack.join('/')}`
}

// Get the base URL for this cloud editor project. This will typically be /[project-name], unless
// certain connected domain configurations are used, in which case it might be ''.
const appBase = () => {
  const project : any = document.querySelector('meta[name="8thwall:project"]') || {content: ''}
  const projectPath = `/${project.content}`
  return location.pathname.startsWith(projectPath) ? projectPath : ''
}

I can confirm that everything works in the editor and both public and staging 8th wall links, but not when accessing it through the custom domain. Due to time constraints I can’t experiment with connecting 8th wall example projects with custom domains to see the differences. Do you have any idea about what should I look at?

5

I managed to fix the problem via using HashRouter instead of BrowserRouter, which works as expected on the deployed version on the new domain. However, I am just not entirely sure what is wrong with BrowserRouter and if and how it can be solved for BrowserRouter

3 Likes
6

Great to hear, thanks for sharing your fix. I’ll look into the BrowserRouter issue.