Error page is loaded instead of offline in offline mode.

[ashish1497]

Summary

In offline mode, the redirection to another page is not showing the _offline.js page but instead uses _error.js file.

My next.config.js pwa: { dest: 'public', register: true, skipWaiting: true, cacheOnFrontEndNav: true, disable: process.env.NODE_ENV === 'development', runtimeCaching, },

What can I help with? Please keep this clear and concise. How do I solve this?

Versions

• next-pwa: 5.5.4
• next:12.0.4

How To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Link to minimal reproduce setup repository if any.

Expected Behaviors

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional Context

Add any other context about the problem here.

[ashish1497]

Also, add if I reload the page. It will show precached or offline page. But Next link routing will throw _error.js file output.

[schorfES]

I have the same/similar issue.

In my case it seems to be related to redirects that I am using. For example a next/link refers to a page at /foo but the page of foo will redirect to /foo/[param] based on a condition. This won't be cached when the route wasn't visited. The PWA caches /foo and /_next/data/[hash]/foo.json that already contains the correct redirect target. For example /foo/123.

{
  "pageProps": {
    "__N_REDIRECT": "/foo/123",
    "__N_REDIRECT_STATUS": 307,
  },
  "__N_SSP": true
}

When the user is offline, the next router handles the redirect from /foo to foo/123 but can't fetch /_next/data/[hash]/foo/123.json. This throws an unhandled TypeError: Failed to fetch that will end up in the _error page and not the expected _offline page.

[belkocik]

Same here: I even opened a discussion a lot of time ago: https://github.com/shadowwalker/next-pwa/discussions/377 code: https://github.com/bubuq3/plumber-app

[Parnswir]

@ashish1497 how did you solve the problem in the end?

[smultar]

I solved the problem by creating a _error.jsx file. Then pass the status code/error, and render the page based on the error.

[darkkatarsis]

@smultar could you share your _error.jsx ?

[webskyus]

@smultar hi, can you share your _error.jsx file?

[smultar]

Create a page named _error.jsx

Offline.getInitialProps = ({ res, err }) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404
    return { statusCode }
}

[joshuawootonn]

Hey friends. Just mentioned this issue in a issue I created above.

I noticed the behavior you are describing in pages with getStaticProps. I am curious if that checks out for your use cases?

@smultar @webskyus @darkkatarsis can you share details about the pages you are getting client side errors in?

[smultar]

Hey friends. Just mentioned this issue in a issue I created above.

I noticed the behavior you are describing in pages with getStaticProps. I am curious if that checks out for your use cases?

@smultar @webskyus @darkkatarsis can you share details about the pages you are getting client side errors in?

Most of the pages I have use getStaticProps. I'll test if it happens on static pages.

[Parnswir]

There seems to be an issue in nextjs which is causing this behavior even without next-pwa: https://github.com/vercel/next.js/issues/41952

At least that's what I'm seeing in my project.

[isaacdarcilla]

Still exists in 5.6.0