SSR处理404和500错误 | Quasar Framework 中文网

Quasar CLI with Vite - @quasar/app-vite

SSR处理404和500错误

SSR上404和500错误的处理方式与其他模式（例如SPA）略有不同。如果您检查/src-ssr/middlewares/render.js（这是您的生产版本WEB服务器），则会注意到以下部分：

export default ({ app, resolve, render, serve }) => {
   // 我们捕获任何其他Express路由，并将其
   // 交给Vue和Vue Router来渲染我们的页面
  app.get(resolve.urlPath('*'), (req, res) => {
    res.setHeader('Content-Type', 'text/html')

    render({ req, res })
      .then(html => {
        // 现在让我们把渲染好的html发送到客户端
        res.send(html)
      })
      .catch(err => {
        // 哎呀，我们在渲染页面时出现了错误

        // 我们被告知要重定向到另一个URL
        if (err.url) {
          if (err.code) {
            res.redirect(err.code, err.url)
          }
          else {
            res.redirect(err.url)
          }
        }
        // 呃, Vue Router找不到请求的路由
        else if (err.code === 404) {
          // 只有在/src/routes中没有定义"全能"路由
          // 的情况下才会到达这里。
          res.status(404).send('404 | Page Not Found')
        }
        // 好吧，我们把任何其他代码都当作错误。
        // 如果我们处于开发模式，那么我们可以使用Quasar CLI
        // 来显示一个漂亮的错误页面，其中包含堆栈
        // 和其他有用的信息
        else if (process.env.DEV) {
          // serve.error仅在开发模式下可用
          serve.error({ err, req, res })
        }
        // 我们是在生产中，所以当我们遇到错误时，
        // 我们应该有另一种方法来向客户端显示一些东西
        //（出于安全原因，显示与开发中
        // 相同的大量信息是不行的)
        else {
          // 在生产中渲染错误页面
          // 或为错误页面创建一个路由（/src/routes）并重定向到它
          res.status(500).send('500 | Internal Server Error')
        }
      })
  })
}

上面的部分是在捕捉到其他可能的请求（如对/public文件夹、manifest.json和service worker等）后写的。这就是我们用Vue和Vue Router渲染页面的地方。

要注意的事情

我们将讨论您需要注意的一些体系结构决策。选择最适合您的应用的内容。

错误404

如果您在Vue路由/src/router/routes.js文件中定义了等效的404路由（如下所示），则上述示例中的if (err.code === 404) {永远不会是 true，因为Vue Router已经处理了它。

// 使用Vue路由捕获404的路由示例
{ path: '/:catchAll(.*)*', component: () => import('pages/Error404.vue') }

错误500

在页面顶部的/src-ssr/middlewares/render.js示例中，请注意，如果web服务器遇到任何呈现错误，我们会向客户端发送一个简单的字符串（“500 | Internal Server Error”）。如果要显示一个漂亮的页面，则可以：

在/src/router/routes.js中添加特定的路由，例如：

{ path: 'error500', component: () => import('pages/Error500.vue') }

编写Vue组件以处理此页面。在这个例子中，我们创建/src/pages/Error500.vue。
然后在/src-ssr/middlewares/render.js中:

if (err.url) { ... }
else if (err.code === 404) { ... }
else {
  // 这里我们获得500错误；
  // 我们将重定向到在步骤＃1中新定义的“error500”路由。
  res.redirect(resolve.urlPath('/error500')) // 不过，还是要记下publicPath！
}

WARNING

唯一值得注意的是，您需要确保在渲染“/error500”路由时不会再出现500错误，这会使您的应用陷入无限循环！

避免这种情况的理想方法是直接从/src-ssr/middlewares/render.js返回错误500页面的HTML（作为String）：

res.status(500).send(`<html>....</html>`)