1019 lines
29 KiB
Vue
1019 lines
29 KiB
Vue
<template>
|
||
<!-- 对应页面： js报错 -->
|
||
<view class="fix-top-window">
|
||
<view class="uni-header">
|
||
<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
|
||
<view class="uni-group hide-on-phone">
|
||
<view class="uni-sub-title">开发者可以在这里快速查询应用最近出现的具体错误内容，了解错误概况信息，以便快速修复问题</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-container">
|
||
<view class="uni-stat--x flex p-1015">
|
||
<uni-data-select collection="opendb-app-list" field="appid as value, name as text" orderby="text asc" :defItem="1" label="应用选择" v-model="query.appid" :clear="false" />
|
||
<uni-data-select collection="opendb-app-versions" :where="versionQuery" class="ml-m" field="_id as value, version as text, uni_platform as label, create_date as date" format="{label} - {text}" orderby="date desc" label="版本选择" v-model="query.version_id" />
|
||
</view>
|
||
<view class="uni-stat--x flex">
|
||
<uni-stat-tabs label="日期选择" :current="currentDateTab" :yesterday="false" mode="date"
|
||
@change="changeTimeRange" />
|
||
<uni-datetime-picker type="datetimerange" :end="new Date().getTime()" v-model="query.start_time"
|
||
returnType="timestamp" :clearIcon="false" class="uni-stat-datetime-picker"
|
||
:class="{'uni-stat__actived': currentDateTab < 0 && !!query.start_time.length}"
|
||
@change="useDatetimePicker" />
|
||
</view>
|
||
<view class="uni-stat--x">
|
||
<uni-stat-tabs label="平台选择" type="boldLine" mode="platform" v-model="query.platform_id" @change="changePlatform"/>
|
||
<uni-data-select ref="version-select" v-if="query.platform_id && query.platform_id.indexOf('==') === -1" collection="uni-stat-app-channels" :where="channelQuery" class="p-channel" field="_id as value, channel_name as text" orderby="text asc" label="渠道/场景值选择" v-model="query.channel_id" />
|
||
</view>
|
||
<view class="uni-stat--x" style="padding: 15px 0;">
|
||
<uni-stat-panel :items="panelData" class="uni-stat-panel" />
|
||
<uni-stat-tabs type="box" v-model="chartTab" :tabs="chartTabs" class="mb-l" />
|
||
<view class="uni-charts-box">
|
||
<qiun-data-charts type="area" :chartData="chartData" :eopts="{notMerge:true}" echartsH5 echartsApp tooltipFormat="tooltipCustom" :errorMessage="errorMessage"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-stat--x p-m">
|
||
<view class="flex-between">
|
||
<view class="uni-stat-card-header">信息列表</view>
|
||
<view class="uni-group">
|
||
<!-- #ifdef H5 -->
|
||
<button v-if="sourceMapEnabled" class="uni-button" type="primary" size="mini"
|
||
@click="openUploadPopup">上传
|
||
sourceMap</button>
|
||
<!-- #endif -->
|
||
</view>
|
||
</view>
|
||
<uni-table :loading="loading" border stripe :emptyText="errorMessage || $t('common.empty')">
|
||
<uni-tr>
|
||
<block v-for="(mapper, index) in fieldsMap" :key="index">
|
||
<uni-th v-if="mapper.title" :key="index" align="center">
|
||
<!-- #ifdef MP -->
|
||
{{mapper.title}}
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP -->
|
||
<uni-tooltip>
|
||
{{mapper.title}}
|
||
<uni-icons v-if="mapper.tooltip" type="help" color="#666" />
|
||
<template v-if="mapper.tooltip" v-slot:content>
|
||
<view class="uni-stat-tooltip-s">
|
||
{{mapper.tooltip}}
|
||
</view>
|
||
</template>
|
||
</uni-tooltip>
|
||
<!-- #endif -->
|
||
</uni-th>
|
||
</block>
|
||
<uni-th align="center" v-if="sourceMapEnabled">
|
||
操作
|
||
</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="(item ,i) in tableData" :key="i">
|
||
<block v-for="(mapper, index) in fieldsMap" :key="index">
|
||
<uni-td v-if="mapper.field === 'count'" :key="mapper.field" align="center">
|
||
<text class="link-btn" @click="navTo('detail', item)">
|
||
{{item[mapper.field] !== undefined ? item[mapper.field] : '-'}}
|
||
</text>
|
||
</uni-td>
|
||
<uni-td v-else :key="mapper.field" align="center">
|
||
{{item[mapper.field] !== undefined ? item[mapper.field] : '-'}}
|
||
</uni-td>
|
||
</block>
|
||
<uni-td v-if="sourceMapEnabled">
|
||
<button size="mini" type="primary" style="white-space: nowrap;"
|
||
@click="openErrPopup(item)">详 情</button>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
<view class="uni-pagination-box">
|
||
<uni-pagination show-icon show-page-size :page-size="options.pageSize"
|
||
:current="options.pageCurrent" :total="options.total" @change="changePageCurrent"
|
||
@pageSizeChange="changePageSize" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="errMsg" type="center" :animation="false" :maskClick="true" @change="errMsgPopupChange">
|
||
<view class="modal black-theme">
|
||
<view class="modal-header">
|
||
错误详情
|
||
</view>
|
||
<scroll-view scroll-x="true" scroll-y="true">
|
||
<view class="modal-content" style="padding: 20px 30px;">
|
||
<view v-if="msgLoading" style="margin: 150px 0;text-align: center;font-size: 14px;">
|
||
<uni-load-more class="mb-m" :showText="false" status="loading" />
|
||
<view>正在解析，请稍等...</view>
|
||
</view>
|
||
<text>{{errMsg}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="dialog-close" @click="closeErrPopup">
|
||
<view class="dialog-close-plus" data-id="close"></view>
|
||
<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<!-- #ifdef H5 -->
|
||
<uni-drawer class="sourcemap-drawser" ref="upload" mode="right" :mask-click="true" :width="340">
|
||
<view class="modal" style="max-width: none; min-width: auto;padding: 0 10px;">
|
||
<view class="modal-header">
|
||
上传 sourceMap
|
||
</view>
|
||
<view class="modal-content" style="height: 300px;padding: 0;">
|
||
<view style="margin-top: 10px;">
|
||
<uni-data-select collection="opendb-app-list" field="appid as value, name as text" orderby="text asc" label="应用" v-model="uploadOptions.appid" />
|
||
</view>
|
||
<view style="margin-top: 10px;">
|
||
<uni-data-select collection="uni-stat-app-platforms" field="code as value, name as text" orderby="text asc" label="平台" v-model="uploadOptions.uni_platform" />
|
||
</view>
|
||
<view style="margin-top: 10px;">
|
||
<uni-data-select collection="opendb-app-versions" :where="uploadVersionQuery" field="version as value, version as text" orderby="text desc" label="版本" v-model="uploadOptions.version" />
|
||
</view>
|
||
<view class="flex m-m">
|
||
<view class="label-text">选择文件:</view>
|
||
<button class="uni-button ml-m" type="primary" @click="choosefile">选择文件并上传</button>
|
||
</view>
|
||
<view v-if="!vaildate" class="upload-msg-warning">
|
||
{{uploadMsg}}
|
||
</view>
|
||
</view>
|
||
<view class="dialog-close" @click="closeUploadPopup">
|
||
<view class="dialog-close-plus" style="background-color: #333;" data-id="close"></view>
|
||
<view class="dialog-close-plus dialog-close-rotate" style="background-color: #333;" data-id="close">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="upload-task-header">
|
||
<text>上传任务：{{uploadSuccessTasks.length}}/{{uploadFile.tempFileTasks.length}}</text>
|
||
</view>
|
||
<scroll-view v-if="uploadFile.tempFileTasks.length" style="height: calc(100vh - 362px);" scroll-y="true">
|
||
<view v-if="uploadFile.tempFileTasks.length > uploadSuccessTasks.length">
|
||
<view class="upload-task-header">
|
||
<text>正在上传</text>
|
||
</view>
|
||
<uploadTask :uploadTasks="sortUploadFileTempFileTasks"></uploadTask>
|
||
</view>
|
||
<view v-if="uploadSuccessTasks.length">
|
||
<view class="upload-task-header">
|
||
<text style="color:#42b983;">上传成功</text>
|
||
</view>
|
||
<uploadTask :uploadTasks="uploadSuccessTasks" :showProgress="false"></uploadTask>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-drawer>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifndef H5 -->
|
||
<fix-window />
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapfields,
|
||
stringifyQuery,
|
||
getTimeOfSomeDayAgo,
|
||
division,
|
||
format,
|
||
formatDate,
|
||
parseDateTime,
|
||
fileToUrl,
|
||
debounce,
|
||
getAllDateCN,
|
||
createUniStatQuery
|
||
} from '@/js_sdk/uni-stat/util.js'
|
||
import {
|
||
fieldsMap,
|
||
popupFieldsMap
|
||
} from './fieldsMap.js'
|
||
import uploadTask from './uploadTask.vue'
|
||
import {
|
||
stacktracey,
|
||
uniStracktraceyPreset
|
||
} from '@dcloudio/uni-stacktracey';
|
||
import adminConfig from '@/admin.config.js'
|
||
|
||
const panelOption = [{
|
||
title: '错误总数',
|
||
value: 0,
|
||
tooltip: '指应用在某个时间段内出现错误的总数'
|
||
}, {
|
||
title: '错误率',
|
||
value: 0,
|
||
tooltip: '时间范围内的总错误数/应用启动次数，如果小于0.01%，默认显示为0'
|
||
}]
|
||
|
||
const db = uniCloud.database(); // 初始化数据库实例
|
||
const _ = db.command; // 定义数据库操作符
|
||
|
||
const dbNameSourceMap = `uni-stat-error-source-map`; // sourceMap资源存放的表名
|
||
const sourcemapPrefix = `__UNI__/uni-stat/sourcemap`;
|
||
let sourcemapFileCache = {};
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
uniStat: adminConfig.uniStat,
|
||
fieldsMap,
|
||
popupFieldsMap,
|
||
query: {
|
||
// type: "js",
|
||
dimension: "day",
|
||
appid: "",
|
||
platform_id: '',
|
||
uni_platform: '',
|
||
version_id: '',
|
||
start_time: []
|
||
},
|
||
uploadOptions: createUniStatQuery({
|
||
appid: "",
|
||
uni_platform: '',
|
||
}),
|
||
uploadMsg: '',
|
||
options: {
|
||
pageSize: 20,
|
||
pageCurrent: 1, // 当前页
|
||
total: 0, // 数据总量
|
||
},
|
||
loading: false,
|
||
popupLoading: false,
|
||
currentDateTab: 0,
|
||
// currentChartTab: ,
|
||
tableData: [],
|
||
popupTableData: [],
|
||
panelData: JSON.parse(JSON.stringify(panelOption)),
|
||
chartData: {},
|
||
chartTab: 'errorCount',
|
||
chartTabs: [{
|
||
_id: 'errorCount',
|
||
name: '错误次数'
|
||
}, {
|
||
_id: 'errorRate',
|
||
name: '错误率'
|
||
}],
|
||
errMsg: '',
|
||
msgLoading: false,
|
||
uploadFile: {
|
||
tempFileTasks: [],
|
||
tempFiles: [],
|
||
clear() {
|
||
this.tempFileTasks.length = this.tempFiles.length = 0
|
||
}
|
||
},
|
||
uploadSuccessTaskNames: [],
|
||
errorItem: '',
|
||
errorMessage: "",
|
||
}
|
||
},
|
||
components: {
|
||
uploadTask
|
||
},
|
||
computed: {
|
||
queryStr() {
|
||
return stringifyQuery(this.query)
|
||
},
|
||
versionQuery() {
|
||
const {
|
||
appid,
|
||
uni_platform
|
||
} = this.query
|
||
const query = stringifyQuery(createUniStatQuery({
|
||
appid,
|
||
uni_platform
|
||
}))
|
||
return query
|
||
},
|
||
uploadVersionQuery() {
|
||
const {
|
||
appid,
|
||
uni_platform
|
||
} = this.uploadOptions
|
||
const query = stringifyQuery(createUniStatQuery({
|
||
appid,
|
||
uni_platform
|
||
}))
|
||
return query
|
||
},
|
||
vaildate() {
|
||
// 检验 this.uploadOptions 所有项都有值
|
||
const allItemHasVaule = Object.keys(this.uploadOptions).every(k => this.uploadOptions[k])
|
||
if (allItemHasVaule && this.uploadMsg) {
|
||
this.uploadMsg = ''
|
||
}
|
||
return allItemHasVaule
|
||
},
|
||
uploadSuccessTasks() {
|
||
return this.uploadFile.tempFileTasks.filter(task => task.state === 1)
|
||
},
|
||
sortUploadFileTempFileTasks() {
|
||
return this.uploadFile.tempFileTasks.filter(task => task.state !== 1).sort((a, b) => a.state - b.state)
|
||
},
|
||
sourceMapEnabled() {
|
||
//return !!this.uniStat.uploadSourceMapCloudSpaceId
|
||
return true;
|
||
},
|
||
channelQuery() {
|
||
const platform_id = this.query.platform_id
|
||
return stringifyQuery({
|
||
platform_id
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.parsedErrors = {}
|
||
|
||
if (this.sourceMapEnabled) {
|
||
// sourceMap 功能需初始化上传的目标云空间
|
||
if (this.uniStat.uploadSourceMapCloudSpaceId) {
|
||
if (this.uniStat.uploadSourceMapCloudPlatform === "aliyun") {
|
||
// 使用阿里云服务空间
|
||
let endpoint = this.uniStat.uploadSourceMapCloudSpaceId.indexOf("mp-") === 0 ? 'https://api.next.bspapp.com':'https://api.bspapp.com';
|
||
this.uploadSourcemapCloud = uniCloud.init({
|
||
provider: 'aliyun',
|
||
spaceId: this.uniStat.uploadSourceMapCloudSpaceId,
|
||
clientSecret: this.uniStat.uploadSourceMapCloudClientSecret,
|
||
endpoint
|
||
})
|
||
} else {
|
||
// 使用腾讯云服务空间
|
||
this.uploadSourcemapCloud = uniCloud.init({
|
||
provider: 'tencent',
|
||
spaceId: this.uniStat.uploadSourceMapCloudSpaceId
|
||
})
|
||
}
|
||
} else {
|
||
// 使用本项目绑定的服务空间
|
||
this.uploadSourcemapCloud = uniCloud;
|
||
}
|
||
}
|
||
|
||
this.getCloudDataDebounce = debounce(() => {
|
||
this.getAllData(this.queryStr)
|
||
}, 300);
|
||
this.getCloudDataDebounce();
|
||
},
|
||
watch: {
|
||
query: {
|
||
deep: true,
|
||
handler(val, old) {
|
||
this.options.pageCurrent = 1 // 重置分页
|
||
this.getCloudDataDebounce()
|
||
}
|
||
},
|
||
chartTab(val) {
|
||
this.getChartData(this.queryStr)
|
||
}
|
||
},
|
||
methods: {
|
||
useDatetimePicker(res) {
|
||
this.currentDateTab = -1
|
||
},
|
||
changePlatform(id, index, name, item) {
|
||
this.query.version_id = 0
|
||
this.uploadOptions.uni_platform = item.code
|
||
this.query.uni_platform = item.code
|
||
},
|
||
changeTimeRange(id, index) {
|
||
this.currentDateTab = index
|
||
const start = getTimeOfSomeDayAgo(id),
|
||
end = getTimeOfSomeDayAgo(0) - 1
|
||
this.query.start_time = [start, end]
|
||
},
|
||
changePageCurrent(e) {
|
||
this.options.pageCurrent = e.current
|
||
this.getTableData(this.queryStr)
|
||
},
|
||
|
||
changePageSize(pageSize) {
|
||
this.options.pageSize = pageSize
|
||
this.options.pageCurrent = 1 // 重置分页
|
||
this.getTableData(this.queryStr)
|
||
},
|
||
|
||
getAllData(query) {
|
||
if (query.indexOf("appid") === -1) {
|
||
this.errorMessage = "请先选择应用";
|
||
return; // 如果appid为空，则不进行查询
|
||
}
|
||
this.errorMessage = "";
|
||
this.getChartData(query);
|
||
this.getTableData(query);
|
||
},
|
||
|
||
getChartData(query, field = 'day_count') {
|
||
let querystr = stringifyQuery(this.query, false, ['uni_platform'])
|
||
this.chartData = {}
|
||
const {
|
||
pageCurrent
|
||
} = this.options
|
||
const db = uniCloud.database()
|
||
const [start_time, end_tiem] = this.query.start_time
|
||
const timeAll = getAllDateCN(new Date(start_time), new Date(end_tiem))
|
||
db.collection('uni-stat-error-result')
|
||
.where(querystr)
|
||
.groupBy('start_time')
|
||
.groupField('sum(count) as total_day_count')
|
||
.orderBy('start_time', 'desc')
|
||
.get({
|
||
getCount: true
|
||
})
|
||
.then(async res => {
|
||
const count = res.result.count
|
||
const resData = res.result.data
|
||
let data = []
|
||
|
||
|
||
timeAll.forEach(v => {
|
||
let item = resData.find(item => item.start_time === v)
|
||
if (item) {
|
||
data.push(item)
|
||
} else {
|
||
data.push({
|
||
start_time: v,
|
||
total_day_count: 0
|
||
})
|
||
}
|
||
})
|
||
|
||
const options = {
|
||
categories: [],
|
||
series: [{
|
||
name: '暂无数据',
|
||
data: []
|
||
}]
|
||
}
|
||
if (this.chartTab === 'errorCount') {
|
||
const countLine = options.series[0] = {
|
||
name: '错误次数',
|
||
data: []
|
||
}
|
||
const xAxis = options.categories
|
||
for (const item of data) {
|
||
let date = item.start_time
|
||
const x = formatDate(date, 'day')
|
||
const countY = item[`total_${field}`]
|
||
xAxis.push(x)
|
||
countLine.data.push(countY)
|
||
}
|
||
this.chartData = options
|
||
} else {
|
||
let dayAppLaunchs = await this.getDayLaunch(querystr)
|
||
const rateLine = options.series[0] = {
|
||
name: '错误率(%)',
|
||
data: [],
|
||
lineStyle: {
|
||
color: '#EE6666',
|
||
width: 1,
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: '#EE6666',
|
||
color: '#EE6666'
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#EE6666', // 0% 处的颜色
|
||
}, {
|
||
offset: 1,
|
||
color: '#FFFFFF' // 100% 处的颜色
|
||
}]
|
||
}
|
||
}
|
||
}
|
||
const xAxis = options.categories
|
||
for (const item of data) {
|
||
let date = item.start_time
|
||
const x = formatDate(date, 'day')
|
||
const countY = item[`total_${field}`]
|
||
xAxis.push(x)
|
||
if (dayAppLaunchs.length) {
|
||
const day = dayAppLaunchs.find(day => day.start_time === item.start_time)
|
||
const index = xAxis.indexOf(x)
|
||
if (day) {
|
||
let rateY = (countY * 100) / day.day_app_launch_count
|
||
rateY = rateY.toFixed(2)
|
||
rateLine.data[index] = rateY
|
||
} else {
|
||
rateLine.data[index] = 0
|
||
}
|
||
}
|
||
}
|
||
this.chartData = options
|
||
}
|
||
|
||
}).catch((err) => {
|
||
console.error(err)
|
||
// err.message 错误信息
|
||
// err.code 错误码
|
||
}).finally(() => {})
|
||
},
|
||
|
||
getTotalCount(query) {
|
||
const db = uniCloud.database()
|
||
return db.collection('uni-stat-error-result')
|
||
.where(query)
|
||
.groupBy('appid')
|
||
.groupField('sum(count) as total_count')
|
||
.get()
|
||
},
|
||
|
||
getTotalLaunch(query) {
|
||
const db = uniCloud.database()
|
||
return db.collection('uni-stat-result')
|
||
.where(query)
|
||
.groupBy('appid')
|
||
.groupField('sum(app_launch_count) as total_app_launch_count')
|
||
.get()
|
||
},
|
||
|
||
/**
|
||
* 从结果表里获取范围时间内的启动次数
|
||
* @param {Object} query
|
||
*/
|
||
async getDayLaunch(query) {
|
||
const db = uniCloud.database()
|
||
const res = await db.collection('uni-stat-result')
|
||
.where(query)
|
||
.groupBy('start_time')
|
||
.groupField('sum(app_launch_count) as day_app_launch_count')
|
||
.orderBy('start_time', 'asc')
|
||
.get()
|
||
return res.result.data || []
|
||
},
|
||
|
||
getTableData(query = stringifyQuery(this.query)) {
|
||
|
||
let querystr = stringifyQuery(this.query, false, ['uni_platform'])
|
||
const {
|
||
pageCurrent
|
||
} = this.options
|
||
this.loading = true
|
||
const db = uniCloud.database()
|
||
const filterAppid = stringifyQuery(createUniStatQuery({
|
||
appid: this.query.appid
|
||
}))
|
||
const mainTableTemp = db.collection('uni-stat-error-result').where(querystr).getTemp()
|
||
const versions = db.collection('opendb-app-versions')
|
||
.where(filterAppid)
|
||
.getTemp()
|
||
|
||
const platforms = db.collection('uni-stat-app-platforms')
|
||
.getTemp()
|
||
|
||
db.collection(mainTableTemp, versions, platforms)
|
||
.orderBy('count', 'desc')
|
||
.skip((pageCurrent - 1) * this.options.pageSize)
|
||
.limit(this.options.pageSize)
|
||
.get({
|
||
getCount: true
|
||
})
|
||
.then(res => {
|
||
const {
|
||
count,
|
||
data
|
||
} = res.result
|
||
const tempData = []
|
||
this.panelData = JSON.parse(JSON.stringify(panelOption))
|
||
for (const item of data) {
|
||
item.last_time = parseDateTime(item.last_time, 'dateTime')
|
||
item.msgTooltip = item.msg
|
||
item.msg = !item.msg ? '' : item.msg.substring(0, 100) + '...'
|
||
const v = item.version_id[0]
|
||
const p = item.platform_id[0]
|
||
item.version = v && v.version
|
||
item.platform = p && p.name
|
||
item.platform_code = p && p.code
|
||
tempData.push(item)
|
||
}
|
||
this.getTotalCount(querystr).then(res => {
|
||
const total = res.result.data[0]
|
||
const total_count = total && total.total_count
|
||
if (total_count) {
|
||
tempData.forEach(item => item.total_count = Number(total_count))
|
||
this.panelData[0].value = total_count
|
||
}
|
||
let launch_count = ''
|
||
this.getTotalLaunch(querystr).then(res => {
|
||
const total = res.result.data[0]
|
||
launch_count = total && total.total_app_launch_count
|
||
if (total_count && launch_count) {
|
||
let errorRate = total_count / launch_count
|
||
errorRate = (errorRate * 100).toFixed(2) + '%'
|
||
this.panelData[1].value = errorRate
|
||
}
|
||
})
|
||
|
||
}).finally(() => {
|
||
this.tableData = []
|
||
this.options.total = count
|
||
tempData.forEach(item => mapfields(fieldsMap, item, item))
|
||
this.tableData = tempData
|
||
})
|
||
|
||
}).catch((err) => {
|
||
console.error(err)
|
||
// err.message 错误信息
|
||
// err.code 错误码
|
||
}).finally(() => {
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
navTo(url, item) {
|
||
if (url.indexOf('http') > -1) {
|
||
window.open(url)
|
||
} else {
|
||
if (item) {
|
||
url = `${url}?error_hash=${item.hash}&create_time=${item.start_time}`
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
},
|
||
|
||
closeErrPopup() {
|
||
this.$refs.errMsg.close()
|
||
},
|
||
errMsgPopupChange(res) {
|
||
if (res.show) {
|
||
const err = this.errorItem.msgTooltip
|
||
if (this.msgLoading) {
|
||
this.closeErrPopup()
|
||
return;
|
||
}
|
||
if (!err) {
|
||
this.errMsg = '暂无错误数据'
|
||
}
|
||
this.errMsg = ''
|
||
const oldMsg = this.parsedErrors[err]
|
||
// || oldMsg === err
|
||
this.msgLoading = true
|
||
this.parseError(this.errorItem)
|
||
return
|
||
if (!oldMsg) {
|
||
this.msgLoading = true
|
||
this.parseError(this.errorItem)
|
||
} else {
|
||
this.errMsg = oldMsg
|
||
}
|
||
} else {
|
||
this.msgLoading = false
|
||
}
|
||
},
|
||
async parseError(item) {
|
||
let {
|
||
msgTooltip: err,
|
||
appid,
|
||
platform_code,
|
||
version
|
||
} = item
|
||
//console.log('item: ', item)
|
||
let base = `/${appid}/${platform_code}/${version}/`
|
||
let fileList;
|
||
if (sourcemapFileCache[base] && sourcemapFileCache[base].length > 0) {
|
||
fileList = sourcemapFileCache[base];
|
||
} else {
|
||
fileList = await this.getSourceMapFileList({
|
||
base
|
||
});
|
||
if (fileList && fileList.length > 0) {
|
||
sourcemapFileCache[base] = fileList;
|
||
} else {
|
||
console.error(`缺少${base}对应的sourceMap，请先上传sourceMap`)
|
||
}
|
||
}
|
||
//console.log('fileList: ', fileList)
|
||
|
||
try {
|
||
err = JSON.parse(err)
|
||
} catch (e) {}
|
||
|
||
// console.log("originalErrMsg: ", err);
|
||
|
||
const stacktraceyOptions = {
|
||
base,
|
||
uniPlatform: platform_code,
|
||
splitThirdParty: true
|
||
}
|
||
if (['ios', 'android', 'app'].indexOf(platform_code)>-1) {
|
||
stacktraceyOptions.lineOffset = -1
|
||
}
|
||
stacktracey(err, {
|
||
preset: {
|
||
...uniStracktraceyPreset(stacktraceyOptions),
|
||
/**
|
||
*
|
||
* 微信特殊处理
|
||
* 微信解析步骤：
|
||
* 1. //usr/app-service.js -> 'weixin/__APP__/app-service.map.map'
|
||
* 2. //usr/pages/API/app-service.js -> 'weixin/pages/API/app-service.map.map'
|
||
* 3. uni-list-item/uni-list-item.js -> ${base}/uni-list-item/uni-list-item.js.map
|
||
*/
|
||
parseSourceMapUrl(file, fileName, fileRelative){
|
||
// 组合 sourceMapUrl
|
||
if (fileRelative.indexOf('(') !== -1){
|
||
let fileRelativeMatch = fileRelative.match(/\((.*)/);
|
||
fileRelative = fileRelativeMatch && fileRelativeMatch[1];
|
||
}
|
||
if (!base || !fileRelative) return ''
|
||
if (typeof sourceRoot !== "undefined") {
|
||
return `${fileRelative.replace(sourceRoot, base + '/')}.map`
|
||
}
|
||
let baseAfter = ''
|
||
if (platform_code.indexOf("mp-")>-1) {
|
||
if (fileRelative.indexOf('app-service.js') !== -1) {
|
||
baseAfter = (base.match(/\w$/) ? '/' : '') + '__WEIXIN__'
|
||
if (fileRelative === fileName) {
|
||
baseAfter += '/__APP__'
|
||
}
|
||
// fileRelative = fileRelative.replace('.js', '.map')
|
||
}
|
||
}
|
||
if (baseAfter && !!fileRelative.match(/^\w/)) baseAfter += '/'
|
||
let path = `${base}${baseAfter}${fileRelative}.map`;
|
||
let cloud_path = `${sourcemapPrefix}${path}`;
|
||
|
||
let cloud_path_web;
|
||
if (platform_code === "web") {
|
||
// 尝试去掉第一级的项目名（web端可能会设置h5基础运行路径）
|
||
let fileRelativeWeb = fileRelative.substring(fileRelative.indexOf("/")+1);
|
||
let pathWeb = `${base}${baseAfter}${fileRelativeWeb}.map`;
|
||
cloud_path_web = `${sourcemapPrefix}${pathWeb}`;
|
||
}
|
||
|
||
let fileItem = fileList.find((item) => {
|
||
return [cloud_path, cloud_path_web].indexOf(item.cloud_path) > -1;
|
||
});
|
||
//console.log('cloud_path: ', cloud_path, fileItem.url)
|
||
return fileItem ? fileItem.url : cloud_path;
|
||
}
|
||
}
|
||
}).then(res => {
|
||
const {
|
||
userError,
|
||
thirdParty
|
||
} = res
|
||
const separate = userError.length && thirdParty.length ?
|
||
`\n\n------------${platform_code.indexOf('mp-') !== -1 ? platform_code : 'uni-app'} runtime error------------\n\n` :
|
||
''
|
||
this.errMsg = `${userError}${separate}${thirdParty}`
|
||
this.parsedErrors[err] = this.errMsg
|
||
}).finally(() => {
|
||
this.msgLoading = false
|
||
});
|
||
},
|
||
openUploadPopup() {
|
||
const {
|
||
appid,
|
||
uni_platform
|
||
} = this.query
|
||
|
||
this.uploadOptions = {
|
||
appid,
|
||
uni_platform
|
||
}
|
||
this.$refs.upload.open()
|
||
},
|
||
closeUploadPopup() {
|
||
this.$refs.upload.close()
|
||
},
|
||
createUploadFileTask(prefix, fileDiskPath, filePath, onUploadProgress) {
|
||
const cloudPath = prefix + fileDiskPath
|
||
|
||
return this.uploadSourcemapCloud.uploadFile({
|
||
filePath,
|
||
cloudPath,
|
||
onUploadProgress
|
||
})
|
||
},
|
||
async choosefile() {
|
||
if (!this.vaildate) {
|
||
this.uploadMsg = '请先将应用、平台、版本填写完整'
|
||
return
|
||
}
|
||
const {
|
||
appid,
|
||
uni_platform,
|
||
version
|
||
} = this.uploadOptions
|
||
|
||
const base = `/${appid}/${uni_platform}/${version}/`;
|
||
const prefix = `${sourcemapPrefix}${base}`
|
||
|
||
|
||
// 原生 input 上传逻辑
|
||
const inputEl = document.createElement('input')
|
||
inputEl.type = 'file'
|
||
inputEl.directory = true
|
||
inputEl.webkitdirectory = true
|
||
inputEl.click()
|
||
inputEl.addEventListener('change', async () => {
|
||
this.uploadFile.clear()
|
||
|
||
const fileList = inputEl.files; /* now you can work with the file list */
|
||
if (!fileList.length) return
|
||
|
||
Array.prototype.forEach.call(fileList, (file) => {
|
||
const path = fileToUrl(file)
|
||
this.uploadFile.tempFileTasks.push({
|
||
fileDiskPath: file.webkitRelativePath.split('/').slice(1).join('/'),
|
||
path,
|
||
size: `${(file.size / 1024).toFixed(2)}kb`,
|
||
name: file.name,
|
||
state: 0,
|
||
progress: 0,
|
||
file
|
||
})
|
||
Object.defineProperty(file, 'path', {
|
||
get() {
|
||
return path
|
||
},
|
||
})
|
||
this.uploadFile.tempFiles.push(file)
|
||
})
|
||
// 因为上传有并发限制，故还是一个一个上传靠谱
|
||
let dataArr = [];
|
||
for (let i = 0; i < this.uploadFile.tempFileTasks.length; i++) {
|
||
let cur = this.uploadFile.tempFileTasks[i];
|
||
let res = await new Promise((resolve, reject) => {
|
||
// 已上传的文件
|
||
if (this.uploadSuccessTaskNames.indexOf(cur.name) !== -1) {
|
||
cur.progress = 1
|
||
setTimeout(() => {
|
||
cur.state = 1
|
||
resolve()
|
||
}, 200)
|
||
} else {
|
||
this.createUploadFileTask(
|
||
prefix,
|
||
cur.fileDiskPath,
|
||
cur.path,
|
||
(OnUploadProgressRes) => {
|
||
const {
|
||
loaded,
|
||
total
|
||
} = OnUploadProgressRes
|
||
cur.progress = loaded / total
|
||
}
|
||
).then((uploadRes) => {
|
||
const cloudPath = prefix + cur.fileDiskPath
|
||
let fileID = uploadRes.fileID;
|
||
uniCloud.getTempFileURL({
|
||
fileList: [fileID]
|
||
})
|
||
.then(res => {
|
||
let url = res.fileList[0].tempFileURL;
|
||
let file = {
|
||
appid,
|
||
uni_platform,
|
||
version,
|
||
file_id: fileID,
|
||
url,
|
||
name: cur.name,
|
||
size: cur.file.size,
|
||
cloud_path: cloudPath,
|
||
base
|
||
};
|
||
setTimeout(() => {
|
||
this.uploadSuccessTaskNames.push(name)
|
||
cur.state = 1
|
||
resolve(file)
|
||
}, 100)
|
||
});
|
||
}).catch((err) => {
|
||
cur.state = -1
|
||
reject(`${cur.name} 上传失败：` + JSON.stringify(err))
|
||
})
|
||
}
|
||
})
|
||
if (res) dataArr.push(res);
|
||
}
|
||
|
||
if (dataArr && dataArr.length>0){
|
||
// 将sourceMap资源文件写入数据库
|
||
await this.addSourceMapFile(dataArr);
|
||
}
|
||
})
|
||
},
|
||
createStr(maps, fn, prefix = 'total_') {
|
||
const strArr = []
|
||
maps.forEach(mapper => {
|
||
if (field.hasOwnProperty('value')) {
|
||
const fieldName = mapper.field
|
||
strArr.push(`${fn}(${fieldName}) as ${prefix + fieldName}`)
|
||
}
|
||
})
|
||
return strArr.join()
|
||
},
|
||
openErrPopup(item) {
|
||
this.errorItem = item
|
||
this.$refs.errMsg.open()
|
||
},
|
||
|
||
// 将sourceMap资源文件写入数据库
|
||
async addSourceMapFile(dataArr){
|
||
let cloud_path_arr = [];
|
||
dataArr.map((item, index) => {
|
||
cloud_path_arr.push(item.cloud_path);
|
||
});
|
||
// 先删除同版本的文件（避免重复上传时出现错误）
|
||
await db.collection(dbNameSourceMap).where({
|
||
cloud_path: _.in(cloud_path_arr)
|
||
}).remove();
|
||
// 再添加
|
||
await db.collection(dbNameSourceMap).add(dataArr);
|
||
},
|
||
// 从数据库中获取sourceMap资源文件
|
||
async getSourceMapFileList(obj){
|
||
let {
|
||
base
|
||
} = obj;
|
||
let fileListRes = await db.collection(dbNameSourceMap).where({
|
||
base
|
||
}).limit(1000).get();
|
||
return fileListRes.result.data || [];
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.flex-between {
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.uni-stat-panel {
|
||
box-shadow: unset;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 0;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.uni-stat-tooltip-s {
|
||
width: 160px;
|
||
white-space: normal;
|
||
}
|
||
|
||
.black-theme {
|
||
background-color: #333;
|
||
color: #fff;
|
||
}
|
||
|
||
.dialog-close {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.dialog-close-plus {
|
||
width: 20px;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
border-radius: 2px;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.dialog-close-rotate {
|
||
position: absolute;
|
||
transform: rotate(-45deg);
|
||
}
|
||
|
||
.upload-msg-warning {
|
||
padding: 0px 15px;
|
||
color: red;
|
||
font-size: 14px;
|
||
}
|
||
|
||
::v-deep .sourcemap-drawser .uni-select {
|
||
flex: 1;
|
||
}
|
||
|
||
::v-deep .sourcemap-drawser .uni-select .uni-select__input-text {
|
||
width: 100%;
|
||
}
|
||
|
||
.upload-task-header {
|
||
font-size: 14px;
|
||
color: #666;
|
||
padding: 15rpx 25rpx;
|
||
border-top: 1px solid #eee;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
</style>
|