函数抛出错误时跳转错误页面的实现问题

问题 #

希望在函数抛出错误时加载新的错误页面，但目前页面卡在加载状态。已通过try-catch捕获到getStockPoints函数的错误，但页面仍无法跳转到错误页面。

相关代码 #

stocks.js

module.exports = {
  async getStocks () {
    return stocks
  },
  async getStockPoints (stockName, timestamp) {
    if (Math.random() < FAILUE_RATE) {
      throw new Error('Failed to generate stock data')
    }
    if (!stocks.includes(stockName)) {
      throw new Error(`Uknown stock ${stockName}`)
    }
    const timestamps = getTimestamps(+timestamp, 10)
    return getSeries(stockName, timestamps).map((value, idx) => ({
      value,
      timestamp: timestamps[idx]
    }))
  }
}

app.js

app.get('/stocks/:symbol', async (req, res) => {
  const { params: { symbol } } = req
  try{
    const data = await stocks.getStockPoints(symbol, new Date())
    res.render('stockPoints', {DATA: data})
  }
  catch(e){
    console.log("ERRORs: ")
    console.error(e)
  }
})

捕获到的错误信息 #

Error: Uknown stock df
    at Object.getStockPoints (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\stocks.js:47:13)
    at C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\app.js:24:31
    at Layer.handle [as handle_request] (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\index.js:284:15
    at param (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\index.js:365:14)
    at param (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\index.js:376:14)
    at Function.process_params (C:\Users\talha_znbd0fl\Desktop\JavaScript-Challenge-master-main\JavaScript-Challenge-master-main\node_modules\express\lib\router\index.js:421:3)

解决方案 #

页面卡在加载状态的核心原因是catch块未向客户端返回任何响应，浏览器持续等待服务器回复，因此无法跳转。只需在catch块中添加错误页面的渲染逻辑即可解决：

修改app.js中的路由处理代码：

app.get('/stocks/:symbol', async (req, res) => {
  const { params: { symbol } } = req
  try{
    const data = await stocks.getStockPoints(symbol, new Date())
    res.render('stockPoints', {DATA: data})
  }
  catch(e){
    console.log("ERRORs: ")
    console.error(e)
    // 渲染错误页面，可传递错误信息给模板
    res.status(404).render('errorPage', { errorMessage: e.message })
  }
})

补充说明 #

• res.status(404)：根据错误类型设置对应HTTP状态码，比如未知股票用404，服务端生成数据失败用500
• res.render('errorPage', ...)：需确保已创建对应的errorPage模板文件，模板可通过errorMessage变量展示具体错误内容
• 若无需传递错误信息，也可直接重定向到独立错误页面：res.redirect('/error')，同时需添加/error路由来渲染错误页面

内容的提问来源于stack exchange，提问作者Talha