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

SSR处理404和500错误

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

// 这应该是最后的get()，使用SSR渲染
app.get('*', (req, res) => {
  res.setHeader('Content-Type', 'text/html')
  ssr.renderToString({ req, res }, (err, html) => {
    if (err) {
      if (err.url) {
        res.redirect(err.url)
      }
      else if (err.code === 404) {
        // 如果配置了“catch-all”vue路由器路由，
        // 则不应到达此处
        res.status(404).send('404 | Page Not Found')
      }
      else {
        // 渲染错误页面或重定向
        res.status(500).send('500 | Internal Server Error')
        if (ssr.settings.debug) {
          console.error(`500 on ${req.url}`)
          console.error(err)
          console.error(err.stack)
        }
      }
    }
    else {
      res.send(html)
    }
  })
})

上面的部分是在捕获其他可能的请求（如/public文件夹、manifest.json和service worker等）之后编写的。这是我们初始化您的应用的地方，您的路由器和Vue也会渲染您请求的页面。

要注意的事情

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

错误404

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

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

错误500

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

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

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

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

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

WARNING

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

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

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

阅读更多?