《全栈导航》网站挂掉-我是如何排查问题《全栈导航》网站挂掉-我是如

问题我突然发现，网站刷新的时候打不开了，如果是路由跳转进去，是正常的

但是网站常常链接会被别人收藏，或者直接分享打开，直接打不开肯定不好

文章图片

问题分析：此网站我是采用的nuxt.js开发的，一般这种错误类型，通过网络请求的数据，然后在对象下的某属性丢失，造成错误类型

排查
通过检查，是在父级页面请求的数据，传到子组件数据丢失
page.js 页面

Detail子组件

查看服务器日志
nuxt.js 是node进程，启动的是用pm2，如有不懂，清查看我之前写的【文章】

pm2 logs

文章图片

此处得出结论，认为是服务没有查找数据，我们查看服务端代码

public function detail(){ $id = input('id'); $navtheme = new NavthemeModel(); $detail = $navtheme->where('id',$id)->with(['member'=>function($query){ $query->field('it_name'); },'taxonomic'=>function($query){ $query->field('name,id,parentid'); $query->with('primary'); }])->find(); $navtheme->where('id',$id)->inc('hits',1)->update(); $detail['recommended'] = $navtheme->recommended(); return $this->showWebData(['data'=>$detail]); }

推测，$navtheme去查找时失败，未查找到相关数据，导致member类型空，那么在客户端前端写法

detail.member // 为undefined detail.member.it_name // 报错，undefined 下面没有数据属性，导致nuxt.js异常

代码一直我未动过，为啥出现这种情况，不得奇解
经过排查，我尝试在这里，打印id

$id = input('id'); dump($id)

得出结论：null，那么问题找到了，也就会客户端穿过来的参数id，没有接受到，导致没有查询到数据
此时又有问题，前端和后端都是我写的，都跑了大半年没问题，怎么突然参数丢失了，为了验证，此刻我们可以查看nginx日志

nginx日志通过宝塔面板可以查看到可视化查看nginx日志，当然也可以用命令行去查看，会更细致一些

文章图片

经过排查在参数丢失

确认前端是否传入参数

async asyncData({ $axios, app, store, params, router }) { console.log('router ',router.id) console.log(params.id) },

nuxt.js asyncData 函数是在服务端执行，所以在客户端是看不到的，需要在服务端看，我继续使用pm2 logs查看

文章图片

结论：前端传递参数，后端没有接受到参数，在传输过程中丢失，前端使用的是用的axios.js

axios.js参数传输过程中丢失
首先确认axios.js版本，是否过于老旧

{ "name": "nuxt-itnavs", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "axios": "^0.21.1", }, "devDependencies": { "@nuxtjs/style-resources": "^1.0.0", "vue-img-cutter": "^2.1.10" } }

再次回到，问题所在 我突然发现，网站刷新的时候打不开了，如果是路由跳转进去，是正常的，清看开头，意思是直接进来的有问题，路由跳转的没问题

在这个问题，需要搞懂nuxt.js的执行机制，nuxt.js主要解决了seo渲染问题，原理，先拿到数据，然后拼接成html模板，返回客户端，这样有了真实数据dom节点
我记得在axios.js 0.18之前的版本存在post参数丢失，参数传递了，后端接受不了，后来版本修复了此问题

Axios-中文文档
查看axios.js封装

// loca 其妙设计如果请求的过的数据直接取，不用发送请求 const post = async(url, params, hand = { loca: false }) => { if (process.server) { const res = await http.post(handLastUrl(url), params); return res.data; } else { let key = url.replace(/\//g, 'A'); if (key && hand.loca && window[key]) { return window[key]; } const res = await http.post(handLastUrl(url), params); if (hand.loca) { window[key] = res.data; } return res.data; } }