门户定制案例-自定义异常页

运行效果

桌面端在进行页面访问时，遇到403，404，500等页面错误时，显示异常页

移动端在进行页面访问时，遇到403，404，500等页面错误时，显示异常页

实现方法

定制企业门户应用，参考《门户定制》
按照异常处理需求，在 model\UI2\comp\portalConfig\components\portalConfig\portalConfig.config.(pc\mobile).js 中 onConfigContextInit 方法下定义 LoadErrorPage.prototype.render 异常渲染内容

portalConfig.config.js：同时适用于pc端及移动端，该文件不能删除 portalConfig.config.pc.js：适用于pc端，可复制 portalConfig.config.js 文件后修改名称 portalConfig.config.mobile.js:适用于移动端，可复制 portalConfig.config.js 文件后修改名称 portalConfig.config.(pc\mobile).js 内业务处理逻辑优先级高于 portalConfig.config.js

添加图片

异常页支持显示图片，本例在 UI2/comp/portalConfig/components/portalConfig/dialog/images 目录下添加图片 error.svg，在异常页中显示图片的示例代码如下

    let errorImg=_this.getUIUrl("$UI/comp/portalConfig/components/portalConfig/dialog/images/error.svg");          
    return <div style={{ textAlign: "center", position: "relative", top: "50%", marginTop: "-200px" }}>              
        <div><Image  preview={false} width={150} src={errorImg} /></div>
        <div style={{fontSize:"15px",marginTop:"30px"}}>页面访问异常，可能是无权限或页面不存在</div>
    </div>;

添加页面

异常页支持使用 iframe 嵌入页面，本例在 UI2/comp/portalConfig/components/portalConfig/dialog 目录下添加页面 error.w，在异常页中通过 iframe 嵌入，示例代码如下

    return <iframe style={{width:"100%",height:"100%",border:0}} src={"/entry/pcxapp/#/entry/pcxapp/comp/portalConfig/components/portalConfig/dialog/error"}></iframe>;

定义异常页面

异常错误需要在 model\UI2\comp\portalConfig\components\portalConfig\portalConfig.config.(pc\mobile).js 下 onConfigContextInit 方法内定义

前端访问错误页面可以通过 LoadErrorPage.prototype.render（该方法内暂不支持403,404,500等错误分类）进行错误提示自定义
前端调用请求错误可以通过 wx.request.on("requestError", (err) => {})（该方法内支持请求错误403,404,500等错误分类）抓取，并按需进行业务操作

//自定义
async onConfigContextInit(configContextProcessor) {
    //获取当前页
    let _this = configContextProcessor.page;

    //页面加载异常，暂不支持分类（404，400）
    LoadErrorPage.prototype.render = function () {
        //获取页面属性
        console.log(this.props);
        let errorImg=_this.getUIUrl("$UI/comp/portalConfig/components/portalConfig/dialog/images/error.svg");          
        return <div style={{ textAlign: "center", position: "relative", top: "50%", marginTop: "-200px" }}>              
            <div><Image  preview={false} width={150} src={errorImg} /></div>
            <div style={{fontSize:"15px",marginTop:"30px"}}>页面访问异常，可能是无权限或页面不存在</div>
        </div>;
    }

    //API 请求异常
    wx.request.on("requestError", (err) => {
        console.error("抓取Mobile错误请求：" + JSON.stringify(err));
    });

    //接口拦截
    let portalConfig = {
        "config": {
        }
    };
    //处理自定义内容
    merge(_this.configContext, portalConfig);
    ConfigContextProcessor.enhancePageAdvice(_this);
}

完整代码

移动端

model\UI2\comp\portalConfig\components\portalConfig\portalConfig.config.mobile.js 文件的完整代码如下

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import React from 'react';
import { Image } from "antd";
import LoadErrorPage from "core/container/LoadErrorPage";

export default {

    processConfigContext(configContext) {
    },

    //自定义
    async onConfigContextInit(configContextProcessor) {
        //获取当前页
        let _this = configContextProcessor.page;

        //页面加载异常，暂不支持分类（404，400）
        LoadErrorPage.prototype.render = function () {
            //获取页面属性
            console.log(this.props);          
            let errorImg=_this.getUIUrl("$UI/comp/portalConfig/components/portalConfig/dialog/images/error.svg");          
            return <div style={{ textAlign: "center", position: "relative", top: "50%", marginTop: "-200px" }}>              
                <div><Image  preview={false} width={150} src={errorImg} /></div>
                <div style={{fontSize:"15px",marginTop:"30px"}}>页面访问异常，可能是无权限或页面不存在</div>
            </div>;
        }

        //API 请求异常
        wx.request.on("requestError", (err) => {
            console.error("抓取Mobile错误请求：" + JSON.stringify(err));
        });

        //接口拦截
        let portalConfig = {
            "config": {
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}

桌面端

model\UI2\comp\portalConfig\components\portalConfig\portalConfig.config.pc.js 文件的完整代码如下

import { merge } from "lodash";
import ConfigContextProcessor from 'core/framework/ConfigContextProcessor';
import React from 'react';
import LoadErrorPage from "core/container/LoadErrorPage";

export default {

    processConfigContext(configContext) {
    },

    //自定义
    async onConfigContextInit(configContextProcessor) {
        //获取当前页
        let _this = configContextProcessor.page;

        //页面加载异常，暂不支持分类（404，400）
        LoadErrorPage.prototype.render = function () {
            //获取页面属性
            console.log(this.props);            
            return <iframe style={{width:"100%",height:"100%",border:0}} src={"/entry/pcxapp/#/entry/pcxapp/comp/portalConfig/components/portalConfig/dialog/error"}></iframe>;
        }

        //API 请求异常
        wx.request.on("requestError", (err) => {
            console.error("抓取PC错误请求："+JSON.stringify(err));
        });

        //接口拦截
        let portalConfig = {
            "config": {
            }
        };
        //处理自定义内容
        merge(_this.configContext, portalConfig);
        ConfigContextProcessor.enhancePageAdvice(_this);
    }
}

案例-自定义异常页