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

问题

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

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

《全栈导航》网站挂掉-我是如何排查问题_第1张图片

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

排查

通过检查,是在父级页面请求的数据,传到子组件数据丢失

page.js 页面


Detail子组件


查看服务器日志

nuxt.js 是node进程,启动的是用pm2,如有不懂,清查看我之前写的【文章】

pm2 logs

《全栈导航》网站挂掉-我是如何排查问题_第2张图片

此处得出结论,认为是服务没有查找数据,我们查看服务端代码
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日志,当然也可以用命令行去查看,会更细致一些

《全栈导航》网站挂掉-我是如何排查问题_第3张图片

经过排查在参数丢失

确认前端是否传入参数

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

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

《全栈导航》网站挂掉-我是如何排查问题_第4张图片

结论:前端传递参数,后端没有接受到参数,在传输过程中丢失,前端使用的是用的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;
    }
}
通过排查由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,PHP后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理
import qs from 'qs'; // 引用之前记得安装 npm i qs -S
http.post(handLastUrl(url), qs.stringify(params));

方法二

如果想快速解决问题, 把参数直接带在url,不过这种情况,最好放置一些类似id,数据比较少的数据进行传输

const apiTaxonomicItems = (params) => {
    return post(`${prefix}/taxonomic/items?id=${params.id}`, params)
}
export {
    apiTaxonomicItems,
}

修改后,打包后编译

npm run build // 客户端

打包完成后上传,.nuxt,static,nuxt.config.js,package.json,这四个文件

pm2 restart all // 服务端 pm2重启

此刻网站可以正常访问,详情页面刷新也都没问题,【全栈导航】

写到最后

今天是七夕节,祝大家节日快乐,

人总是这样,大道理都懂,小情绪却难以自控,从幼稚到成熟,从单纯到复杂,我们都曾不堪一击,也终将刀枪不入。

你可能感兴趣的:(《全栈导航》网站挂掉-我是如何排查问题)