@中文描述: 处理页面出错提示问题 @版本: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 处理页面出错提示问题 @版本: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent d9ee63d commit c938b0dda3a2f1f6b281501e1d63a7adbaea0ef3 caibinghong authored on 6 Mar

Showing 1 changed file

Ignore Space Show notes View assets_platform/preview/index.js
const _socketPreView = function () { const socketProtocol = (location.protocol === 'https:' ? 'wss' : 'ws'); const socketHost = location.host; const socketObj = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr'); socketObj.addEventListener('message', async ({ data }) => { var res = JSON.parse(data); // console.log(111111111111,res) if (res.type == 'error') { //判断与当前功能是否是同一路径 var src = location.pathname; if (src.indexOf('/func') > -1) { src = src.split('/func')[0]; } if (src.indexOf('/flow') > -1) { src = src.split('/flow')[0]; } if (src.indexOf('/view') > -1) { src = src.split('/view')[0]; } if (res.err.id.indexOf(src) > -1) { // console.error(res.err.frame) // console.log("%c "+res.err.frame, "background-color: #000; color: #ab8a01;"); if(!res.err.loc){ res.err.loc = { file: res.err.id, line: 0, column: 0 } res.err.frame = res.err.pluginCode.replace(/&/g, '&').replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } var str = [ '预览功能：' + document.title + ' 出错！！！', '相关文件：<span style="color:#3a96dd">' + res.err.loc.file + '</span>', '错误位置：' + '<span style="color:#3a96dd">第' + res.err.loc.line + '行，第' + res.err.loc.column + '列,请分析以下 ^ 符号所指向的行。</span>' ]; console.error('\n\n', str.join('\n'), '\n' + res.err.frame, '\n\n', res.err, '\n\n'); var errEl = document.createElement('div'); errEl.style = 'font-size:14px;color:red;width:100%;word-break: break-all;background: #000;padding: 15px;box-sizing: border-box;border-radius: 10px;'; errEl.innerHTML = str.join('<br><br>') + '<div style="color:#ab8a01">' + res.err.frame.replace(/\r\|\n/g, '<br>').replace(/ /g, ' ') + '</div>'; document.getElementById('app').appendChild(errEl) } } // }); // 心跳包消息内容 const heartbeatMessage = '{"type":"ping"}'; // 定义心跳包发送间隔（毫秒） const heartbeatInterval = 5000; // 每5秒发送一次心跳包 // 发送心跳包函数 function sendHeartbeat() { if (socketObj.readyState === WebSocket.OPEN) { socketObj.send(heartbeatMessage); } } // 监听WebSocket连接打开事件 socketObj.addEventListener("open", () => { // 开始发送心跳包 setInterval(sendHeartbeat, heartbeatInterval); }) // } _socketPreView(); const _socketPreView = function () { const socketProtocol = (location.protocol === 'https:' ? 'wss' : 'ws'); const socketHost = location.host; const socketObj = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr'); socketObj.addEventListener('message', async ({ data }) => { var res = JSON.parse(data); // console.log(111111111111,res) if (res.type == 'error') { //判断与当前功能是否是同一路径 var src = location.pathname; if (src.indexOf('/func') > -1) { src = src.split('/func')[0]; } if (src.indexOf('/flow') > -1) { src = src.split('/flow')[0]; } if (src.indexOf('/view') > -1) { src = src.split('/view')[0]; } if (res.err.id.indexOf(src) > -1) { // console.error(res.err.frame) // console.log("%c "+res.err.frame, "background-color: #000; color: #ab8a01;"); var str = [ '预览功能：' + document.title + ' 出错！！！', '相关文件：<span style="color:#3a96dd">' + res.err.loc.file + '</span>', '错误位置：' + '<span style="color:#3a96dd">第' + res.err.loc.line + '行，第' + res.err.loc.column + '列,请分析以下 ^ 符号所指向的行。</span>' ]; console.error('\n\n', str.join('\n'), '\n' + res.err.frame, '\n\n', res.err, '\n\n'); var errEl = document.createElement('div'); errEl.style = 'font-size:14px;color:red;width:100%;word-break: break-all;background: #000;padding: 15px;box-sizing: border-box;border-radius: 10px;'; errEl.innerHTML = str.join('<br><br>') + '<div style="color:#ab8a01">' + res.err.frame.replace(/\r\|\n/g, '<br>').replace(/ /g, ' ') + '</div>'; document.getElementById('app').appendChild(errEl) } } // }); // 心跳包消息内容 const heartbeatMessage = '{"type":"ping"}'; // 定义心跳包发送间隔（毫秒） const heartbeatInterval = 5000; // 每5秒发送一次心跳包 // 发送心跳包函数 function sendHeartbeat() { if (socketObj.readyState === WebSocket.OPEN) { socketObj.send(heartbeatMessage); } } // 监听WebSocket连接打开事件 socketObj.addEventListener("open", () => { // 开始发送心跳包 setInterval(sendHeartbeat, heartbeatInterval); }) // } _socketPreView();

Ignore Space Show notes View

assets_platform/preview/index.js

if (src.indexOf('/func') > -1) {
                src = src.split('/func')[0];
            }
            if (src.indexOf('/flow') > -1) {
                src = src.split('/flow')[0];
            }
            if (src.indexOf('/view') > -1) {
                src = src.split('/view')[0];
            }

if (res.err.id.indexOf(src) > -1) {
 // console.error(res.err.frame)
 // console.log("%c "+res.err.frame, "background-color: #000; color: #ab8a01;");
 if(!res.err.loc){
 res.err.loc = { file: res.err.id, line: 0, column: 0 }
 res.err.frame = res.err.pluginCode.replace(/&/g, '&amp;').replace(/</g, '&lt;')
 .replace(/>/g, '&gt;')
 .replace(/"/g, '&quot;')
 .replace(/'/g, '&#39;');
 }
 var str = [
 '预览功能：' + document.title + ' 出错！！！',
 '相关文件：' + res.err.loc.file + '',
 '错误位置：' + '第' + res.err.loc.line + '行，第' + res.err.loc.column + '列,请分析以下 ^ 符号所指向的行。'
 ];
 console.error('\n\n', str.join('\n'), '\n' + res.err.frame, '\n\n', res.err, '\n\n');
 var errEl = document.createElement('div');
 errEl.style = 'font-size:14px;color:red;width:100%;word-break: break-all;background: #000;padding: 15px;box-sizing: border-box;border-radius: 10px;';

errEl.innerHTML = str.join(' ') + '<div style="color:#ab8a01">' + res.err.frame.replace(/\r|\n/g, ' ').replace(/ /g, '&nbsp;') + '</div>';
 document.getElementById('app').appendChild(errEl)
 }
 }
 // 
 });
 // 心跳包消息内容
 const heartbeatMessage = '{"type":"ping"}';
 // 定义心跳包发送间隔（毫秒）
 const heartbeatInterval = 5000; // 每5秒发送一次心跳包
 // 发送心跳包函数
 function sendHeartbeat() {
 if (socketObj.readyState === WebSocket.OPEN) {
 socketObj.send(heartbeatMessage);
 }
 }
 // 监听WebSocket连接打开事件
 socketObj.addEventListener("open", () => {
 // 开始发送心跳包
 setInterval(sendHeartbeat, heartbeatInterval);
 })
 //
}
_socketPreView();

if (res.err.id.indexOf(src) > -1) {
 // console.error(res.err.frame)
 // console.log("%c "+res.err.frame, "background-color: #000; color: #ab8a01;");
 var str = [
 '预览功能：' + document.title + ' 出错！！！',
 '相关文件：' + res.err.loc.file + '',
 '错误位置：' + '第' + res.err.loc.line + '行，第' + res.err.loc.column + '列,请分析以下 ^ 符号所指向的行。'
 ];
 console.error('\n\n', str.join('\n'), '\n' + res.err.frame, '\n\n', res.err, '\n\n');
 var errEl = document.createElement('div');
 errEl.style = 'font-size:14px;color:red;width:100%;word-break: break-all;background: #000;padding: 15px;box-sizing: border-box;border-radius: 10px;';

Show line notes below