一个前端报错技术细节

关注

原创最新推荐文章于 2026-08-07 10:42:37 发布 254 阅读 AI 写同款· GEO 优化 ›

前端埋点 - 报错监控说起埋点又到了谈起前端项目中数据收集与监控，那么今天来简单的聊下前端报错监控的埋点。首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。首先我们可以看下前端做报错监控的意义在哪里：帮助灰度测试发现问题收集线上错误日志帮助优化产品稳定性收集错误数据用于分析监控第三方资源/CDN 稳定性总体来说前端监控的主要目的都是为了获取用户行为以及跟踪产品在... 阅读详情

问题：当data为null时，报错data不能为null
原因：在网页还没有请求数据，页面v-for就执行了，所以此时的data还没有赋值数组。
解决办法：在html中加入v-if=“data”,当data!=null时才渲染页面。

<template>
  <view v-if="data!=null" class="">
    <uni-list>
    	<uni-list-item v-for="(item,index) in data.data" :key="index" title="">
			<image 
			slot="header" 
			style="width: 240rpx;height:240rpx;" 
			:src="'http://101.96.128.94:9999/'+item.pic" 
			mode=""></image>
			<view class="content" slot="body">
				<text>{{item.title}}</text>
				<text>${{item.price}}</text>
			</view>
		</uni-list-item>
    </uni-list>
  </view>
</template>

<script>


export default {
  name: '',
  
  mounted() {
  	this.getData()
  },
  data () {
    return {
      data:null
    }
  },
  methods:{
    getData(){
		uni.request({
			url:'http://101.96.128.94:9999/data/product/list.php',
			method:'GET',
			data:{pno:1},
			success: (res) => {
				console.log(res)
				this.data=res.data
			}
		})
	}
  }
}
</script>

<style  scoped>
  .content{
	  display: flex;
	  flex-direction: column;
  }
</style>