Skip to content
This repository has been archived by the owner on Jan 14, 2020. It is now read-only.

Custom 500 page #10

Open
egoist opened this issue Mar 22, 2017 · 7 comments
Open

Custom 500 page #10

egoist opened this issue Mar 22, 2017 · 7 comments

Comments

@egoist
Copy link
Collaborator

egoist commented Mar 22, 2017

No description provided.

@egoist
Copy link
Collaborator Author

egoist commented Mar 23, 2017

You can add a route {path: '*', component: NotFound} to handle 404 though. And custom 500 page is not that important.

@egoist egoist changed the title Custom 404 and 500 page Custom 500 page Mar 23, 2017
@jazoom
Copy link

jazoom commented Jul 4, 2017

Perhaps this could just be a string field in Ream's config? For example:

const app = ream({
  error500: fs.readFileSync('./error-500.html')
});

@egoist egoist removed this from the v0.10 milestone Oct 6, 2017
@egoist
Copy link
Collaborator Author

egoist commented Dec 8, 2017

I think it's a good idea to export Error component in entry file to handle errors.

@egoist
Copy link
Collaborator Author

egoist commented May 27, 2018

https://ream.js.org/guide/custom-error-page.html

Now it handles 404 error using a Vue component.

@IlyaSemenov
Copy link
Contributor

Are contributions still welcome? I need a custom 500 page but my latest PRs seem to be stuck.

@IlyaSemenov
Copy link
Contributor

IlyaSemenov commented Jul 19, 2018

For now I'm using this app enhancer plugin to show error page on demand (plus a catch block inside getInitialData, which is cumbersome, but currently there is no way to intercept getInitialData calls from the plugin):

export default ({
  ssrContext,
  router,
  event,
  getInitialDataContext
}) => {
  getInitialDataContext(context => {
    context.error = function (error) { // eslint-disable-line handle-callback-err
      if (error instanceof Error) {
        error = {
          code: 500,
          stack: __DEV__ && error.stack // eslint-disable-line no-undef
        }
      }
      router.app.setError(error)
    }
  })

  event.$on('before-server-render', () => {
    const error = router.app.error
    if (error) {
      ssrContext.globalState.error = ssrContext.reamError = error
      if (error.code >= 400 && error.code < 600) {
        ssrContext.res.statusCode = error.code
      }
    }
  })

  event.$on('before-client-render', () => {
    const error = window.__REAM__.error
    if (error) {
      router.app.setError(error)
    }
  })
}

@IlyaSemenov
Copy link
Contributor

window.__REAM__ is now referenced in at least 4 different places (client-entry, renderTemplate, vuex plugin, and the error plugin above).

This is because on the server side, the global data is handled uniformly via ssrContext.globalState, but there is no client counterpart. I believe it's a bad practice; it should be handled on the client side similarly to the server side (extracted from window only once and then passed through the stack, e.g. in createApp context).

I believe we can just unify the two into single context.globalState (not ssrContext.globalState), serialized into <script>window.__REAM__ = ...</script> on the server and then restored from window.__REAM__ on the client.

Then I think __REAM__ wording should be overridable via ream.config.js.

IlyaSemenov referenced this issue Jan 5, 2019
Replace window.__REAM__ with client-side context.globalState.
See ream/ream#10 (comment)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants