react错误捕获

import {Component} from 'react';
export default class WeirwoodErrorBoundary extends Component {

    static getDerivedStateFromError(error) {
        return {error};
    }

    constructor(props) {
        super(props);
        this.state = {
            error: null
        };
    }

    componentDidCatch(error, errorInfo) {
        this.setState({
            error
        });
        if (window.__Weirwood) {
            window.__Weirwood.error.captureException(error);
        }
    }
    render() {
        if (this.state.error) {
            return <div>页面出错了！请稍后重试</div>;
        }
        return this.props.children;
    }
}

调用

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Switch} from 'react-router';
import {Provider} from 'react-redux';
import ConnectedRouter from './common/connected-react-router';
import WeirwoodErrorBoundary from './common/components/WeirwoodErrorBoundary';
import './resource/style/main.less';
import InitRoutes from './router';
ReactDOM.render(
        <WeirwoodErrorBoundary>
            <Provider store={store}>
                <ConnectedRouter history={history}>
                    <Switch>
                        <InitRoutes store={store} history={history} />
                    </Switch>
                </ConnectedRouter>
            </Provider>
        </WeirwoodErrorBoundary>,
        document.getElementById('root')
    );

src/app/entry/action.js

/**
 * @file action
 * @author [email protected]
 *
 **/

import {get, noop, omit, pick, set, size} from 'lodash';
import {get as getCookie} from 'lib/storage/cookie';
import {set as setStorage, get as getStorage, remove as removeStorage} from 'lib/storage/localStorage';
import {updateRoute, getUrlParam} from 'common/util';
import {logoutAccount} from 'common/util/logout';
import {resetShopInfo} from 'app/shopInfo/action';
import {getBizCode} from 'common/util/platform';
import {NO_AUTH} from 'src/config';
import {
    SELECTED_APP_KEY,
    INIT_API_CACHE_KEY,
    STORAGE_LOGIN_TYPE,
    INIT_FOR_DUXIAODIAN,
    FROM_MERCHANT_KEY,
    PARENT_ID_KEY
} from 'common/config/storageKey';
import {COOKIE_NAME} from 'common/config/cookieConfig';
import {appInitIsloadingSelector} from 'common/selectors/platform';
import message from 'common/containers/wrapReduxFlowForm/formItemFactory/message';
import ACTIONS from './actionTypes';
import {HOME_GUIDE_LOCAL_STORAGE_NAME, SHOW_MENU} from './config';
import {loadCommissionInfo} from './service/loadCommissionInfo';
import {INIT_SESSION_ID} from 'common/config/logConfig';
import {isPassSelector} from '../../../src/selectors';
import {checkUserQulification} from '../assetCenter/service';
import {errorInformer} from '../assetCenter/util';
import {whichBizTypeSelector} from '../../common/selectors/bizType';
import baiduMonitor, {setUserProperty} from '../../common/util/baiduMonitor';
import {basicInfoAction} from './reducer/basicInfo';
import {userIdSelector, optIdSelector, isSonAccountSelector} from 'common/selectors/platform.js';
import {getShopRegisterPath} from 'src/common/util/getPath';
import {needGetHagList} from 'src/common/config/hagInfo';
import {initSurvey} from './util';
import * as api from './service';
import * as homeApi from 'app/home/apis';
import {onlineService} from 'src/common/util/quarkRequest';

const INIT_CACHE_TIME = 43200000; // 12小时
/**
 * 更新路由
 * @param {string} options.nav      一级导航path
 * @param {Object} options.match    match
 * @param {Object} options.isPurifyQuery    路由
 * @return {Function}               回调
 */
export const onUpdateRoute = (params = {}) => (dispatch, getState) => {
    const {nav, match} = params;
    dispatch({
        type: ACTIONS.MENU_CLICK_ROUTER_CHANGE,
        payload: {
            key: nav,
            match: match
        }
    });
    // 路由点击统一增加参数，功能：单独针对生活服务有子店路由全部拼接subShopId参数，兼容强制刷新选中子店逻辑
    updateRoute(params, dispatch, getState());
};

export const getToken = state => {
    const isPass = isPassSelector(state);
    const ucToken = getCookie('CPTK__513') || getCookie('__cas__st__513') || '';
    const token = isPass
        ? ''
        : ucToken;
    return token;
};

export const changeSelectedBizAction = (appInfo = {}) => (dispatch, getState) => {
    const {appId, subAppId, appName} = appInfo;
    const shopId = get(appInfo, 'shopInfo.shopId');
    const fromMerchant = getStorage(FROM_MERCHANT_KEY);
    const monitorShopInfo = {
        appId,
        subAppId,
        appName,
        sessionId: INIT_SESSION_ID,
        fromMerchant: +fromMerchant || 0
    };
    shopId && (monitorShopInfo.shopId = shopId);
    appId && setUserProperty(monitorShopInfo);
    const bizCode = getBizCode(appInfo);
    // 存储选中的业务线到localStorage
    setStorage(SELECTED_APP_KEY, appInfo);
    dispatch({
        type: ACTIONS.SELECTED_BIZ_CHANGE,
        payload: {
            ...appInfo,
            bizCode
        }
    });
    dispatch(resetShopInfo(get(appInfo, 'shoInfo')));
};

export const initBasicInfo = (params = {}) => (dispatch, getState) => {
    dispatch({
        type: basicInfoAction['ON_BASIC_INFO_RESET']
    });
};

export const changeBasicInfo = (params = {}) => (dispatch, getState) => {
    dispatch({
        type: basicInfoAction['ON_BASIC_INFO_CHANGE'],
        payload: params
    });
    if (window.__Weirwood && window.__Weirwood.error && window.__Weirwood.error.setContext) {
        window.__Weirwood.error.setContext(params);
    }
    if (window.__Weirwood && window.__Weirwood.perf && window.__Weirwood.perf.addVar) {
        window.__Weirwood.perf.addVar(params);
    }
};

export const passBindUcAction = (params = {}) => (dispatch, getState) => {
    return dispatch(api.passBindUcService(params));
};

export const fetchAppListAction = (params = {}) => (dispatch, getState) => {
    return dispatch(api.fetchAppInfoListServer(params));
};

export const getMenuListAction = (params = {}) => (dispatch, getState) => {
    const bizCode = whichBizTypeSelector(getState());
    return dispatch(api.fetchMenuListServer(params, bizCode));
};

export const getUserHagInfo = (params = {}) => (dispatch, getState) => {
    return dispatch(api.fetchUserHagInfoServer(params));
};

export const appInitLoadingChangeAction = (payload = false) => (dispatch, getState) => {
    dispatch({
        type: ACTIONS.APP_INIT_IS_LOADING,
        payload
    });
};

export const getShopDetailAction = (params = {}) => (dispatch, getState) => {
    return dispatch(api.fetchShopDetailServer(params));
};

export const getShopContactAction = (params = {}) => (dispatch, getState) => {
    return dispatch(homeApi.getShopContactInfo(params));
};

export const checkHasRoleAction = (params = {}) => (dispatch, getState) => {
    return dispatch(api.fetchCheckHasRoleServer(params));
};

export const changeSelectedBiz = (
    app = {},
    openedJumpPath,
    finallyCb = {}
) => (dispatch, getState) => {
    const appInitIsloading = appInitIsloadingSelector(getState());
    // 如果正在请求，不执行后续动作；
    if (appInitIsloading) {
        return Promise.resolve();
    }

    // 如果URL上存在fromMerchant字段，则代表来源为新登录页merchantLogin，存入redux。后续不置为false
    const urlFromMerchant = getUrlParam('fromMerchant', window.location.search) || 0;
    const urlParentid = getUrlParam('parentid', window.location.search) || 0;
    urlFromMerchant && setStorage(FROM_MERCHANT_KEY, parseInt(urlFromMerchant, 10));
    urlParentid && setStorage(PARENT_ID_KEY, parseInt(urlParentid, 10));

    const {
        initFinally,
        menuListFinally
    } = finallyCb;
    dispatch(changeSelectedBizAction(omit(app, ['mainUcId'])));
    const appId = get(app, 'appId');
    const subAppId = get(app, 'subAppId');
    // 当缓存中存在对应mainUcId，这里会传入mainUcId
    const mainUcId = get(app, 'mainUcId');
    const appParams = {
        appId,
        subAppId,
        shopId: null,
        mainUcId
    };
    dispatch(appInitLoadingChangeAction(true));
    const bizCode = whichBizTypeSelector(getState());
    const nowDate = new Date();
    const today = `${nowDate.getFullYear()}-${nowDate.getMonth() + 1}-${nowDate.getDate()}`;
    const cacheParams = {
        duxiaodian: {
            cacheKey: INIT_FOR_DUXIAODIAN,
            cacheType: 'local',
            // 获取对应日期对应用户缓存
            cacheGet: ({cacheLocalItem, paramsStr}) => {
                return get(cacheLocalItem, `${today}.${paramsStr}`, '');
            },
            // 设定缓存
            cacheSet: ({response, paramsStr}) => {
                // 仅在入驻完成后缓存
                if (get(response, 'data.shopInfo.showMenu', 0) !== SHOW_MENU) {
                    return;
                }
                // 取出缓存
                const allInit = getStorage(INIT_FOR_DUXIAODIAN) || {};
                // 追加本次缓存
                set(allInit, `${today}.${paramsStr}`, JSON.stringify(response));
                // 取当天缓存进行缓存set
                setStorage(INIT_FOR_DUXIAODIAN, pick(allInit, today));
            },
            delay: 1000 * 20
        },
        others: {
            cacheKey: INIT_API_CACHE_KEY.init,
            cacheType: 'local',
            cacheTime: INIT_CACHE_TIME,
            active: 'manual'
        }
    };
    // init接口获取ucId和passId，营销模块ucId必传，店铺保存接口必须passId，
    return dispatch(api.passBindUcService(appParams, cacheParams.others)).then(res => {
        if (res.redirect) {
            return;
        }
        // 存储账户类型
        setStorage(STORAGE_LOGIN_TYPE, getCookie(COOKIE_NAME.LOGIN_TYPE));
        dispatch(changeBasicInfo({
            userId: res.ucId,
            optId: res.sonUcId,
            userName: res.mainUcName,
            optName: res.ucName,
            hasHitSmallFlow: res.localSmallFlow || 0 // 0为未命中,1为命中
        }));
        // 多主账号子账号，跳转shopCenter
        // TODO 这里可能影响mcc需要重点回归 @wuxinru
        if (!mainUcId && res?.isSonAccount && size(res?.mainShopList) > 1) {
            dispatch(appInitLoadingChangeAction(false));
            dispatch(onUpdateRoute({nav: '/shopCenter', isReplace: true}));
            return;
        }
        // 存储账户类型
        const shopId = get(res, 'shopInfo.shopId');
        // 咨询状态改为上线
        if (shopId) {
            onlineService({
                serviceId: res.ucId,
                optId: res.sonUcId,
                shopId
            }).catch(noop);
        }
        const showMenu = get(res, 'shopInfo.showMenu');
        baiduMonitor('all_system_entry');
        dispatch(changeSelectedBizAction({
            ...app,
            shopInfo: get(res, 'shopInfo'),
            isInHag: res.isInHag,
            ...(res?.shopInfo
                ? {
                    appId: get(res, 'shopInfo.appId'),
                    subAppId: get(res, 'shopInfo.subAppId')
                }
                : {}
            )
        }));
        // 拉取当前用户的hag名单
        if (needGetHagList.length) {
            dispatch(api.fetchUserHagInfoServer({
                item: {
                    hagRoles: needGetHagList,
                    shopId
                }
            })).catch(noop);
        }
        dispatch(appInitLoadingChangeAction(false));
        const shopRegisterNav = getShopRegisterPath();
        const isSonAccount = isSonAccountSelector(getState());
        // 店铺ID存在并且showMenu为1
        if (shopId && showMenu) {
            // 请求菜单需要加菜单loading态
            dispatch(api.fetchMenuListServer({
                ...appParams,
                shopId
            }, isSonAccount ? {} : { // 子账号不缓存菜单
                cacheKey: INIT_API_CACHE_KEY.moduleList,
                cacheType: 'local',
                cacheTime: INIT_CACHE_TIME,
                delay: 60000
            })).then(() => {
                // 请求完新业务线的菜单，需要跳转首页
                if (openedJumpPath) {
                    if (openedJumpPath === shopRegisterNav) {
                        updateRoute({nav: '/home'}, dispatch, getState());
                    }
                    else {
                        updateRoute({nav: openedJumpPath}, dispatch, getState());
                    }
                }
            }).finally(() => {
                menuListFinally && menuListFinally();
            }).catch(noop);
            dispatch(api.fetchCheckHasRoleServer({roleName: 'ai_create_product'})).catch(noop);
        }
        // 未入驻成功,进入店铺入驻
        else {
            dispatch(onUpdateRoute({nav: shopRegisterNav, isReplace: true}));
        }

        if (!window.surveyApp) {
            initSurvey({
                userid: res.ucId,
                optid: res.sonUcId
            });
        }
        dispatch(authority());
    }).catch(err => {
        const errCode = +get(err, 'errors.0.code');
        let defaultMsg = '';
        if (errCode === NO_AUTH) {
            defaultMsg = '抱歉，您当前账号暂无开通业务权限。';
        }
        const errMsg = get(err, 'errors.0.message', defaultMsg);
        errMsg && message.error(errMsg);
    }).finally(re => {
        initFinally && initFinally();
    });
};

// 鉴权
export const authority = () => (dispatch, getState) => {
    const userId = userIdSelector(getState());
    const optId = optIdSelector(getState());
    const changeAuth = payload => dispatch({
        type: ACTIONS.ON_AUTH_INFO_CHANGE,
        payload
    });
    changeAuth({userId, optId});
};

// 发起登出
export const logoutUcAndPass = () => (dispatch, getState) => {
    // 手动点击退出登录
    logoutAccount();
};


export const getCommissionInfo = params => dispatch => {
    return dispatch(loadCommissionInfo(params));
};

export const checkQulification = () => dispatch => {
    dispatch(checkUserQulification({})).catch(e => {
        errorInformer(e.error);
    });
};

export const setGuideStorage = () => dispatch => {
    const {KEY, OPTIONS: {VISIBLE}} = HOME_GUIDE_LOCAL_STORAGE_NAME;
    // 用户登录时不存在localStorage：KEY时，添加KEY
    !getStorage(KEY) && setStorage(KEY, VISIBLE);
};

router/index.js

import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actionCreators from 'src/app/entry/action';
import {
    menuMapSelector,
    getShopShowMenuRes,
    getRouterPathname,
    getUrlSearch,
    isShopRegisterPage,
    querySubShopIdSelector
} from 'common/selectors/platform';

import {
    isServiceEcommerceBizSelector
} from 'common/selectors/bizType';
import Main from './Main.js';

const mapStateToProps = state => {
    const menuMap = menuMapSelector(state);
    const isShopRegister = isShopRegisterPage(state);
    const isService = isServiceEcommerceBizSelector(state);
    return {
        menuMap,
        showMenu: getShopShowMenuRes(state),
        pathname: getRouterPathname(state),
        search: getUrlSearch(state),
        isShopRegister,
        isService,
        querySubShopId: querySubShopIdSelector(state)
    };
};

const mapDispatchToProps = dispatch => {
    return bindActionCreators(actionCreators, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(Main);

react错误捕获

调用

悦读