Watchtower前端监控接入到泰山开放平台

一、泰山平台接入应用流程

1.创建应用

打开 泰山开放平台 ，点击顶部创建应用按钮，填入基本信息，需要注意的是，图片必须是100*100的，否则不能下一步。

2.菜单配置

把项目中的路由一一匹配录入，需要在菜单栏展示的设置为可见。

二、微应用接入步骤

泰山平台使用 qiankun 实现微前端，接入泰山平台的应用即为微应用。 Watchtower 使用的 React 框架，接入微应用需要以下几个步骤：

1.配置微应用的打包工具（通常是 webpack）

Watchtower 使用的 rocketact 脚手架，增加如下配置

const { name } = require('./package').name;
module.exports = (api) => {
    ...
    api.chainWebpack((webpackChain) => {
        webpackChain.output
        .library(`${name}-[name]`)
        .libraryTarget('umd')
        .jsonpFunction(`webpackJsonp_${name}`)
        .globalObject('window');
    });
};

2.在 src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

3.在入口 js 导出相应的生命周期钩子

入口 js 通常就是你配置的 webpack 的 entry js，导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。 入口 js 导入新增的 public-path.js文件, 如果 Watchtower 路由使用的 hash 模式，需要改成 history 模式，并设置设置 history 模式路由的 base。

import { BrowserRouter, HashRouter } from 'react-router-dom';
import '../public-path.js';
if (!window.__POWERED_BY_QIANKUN__) {
  ReactDOM.render(
    <Provider {...towerStore}>
      <HashRouter>
        <App />
      </HashRouter>
    </Provider>,
    document.getElementById('app'),
  );
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props: any) {
    ReactDOM.render(
        <Provider {...towerStore}>
        <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? props.base || props.baseRoute : '/'}>
            <App />
        </BrowserRouter>
        </Provider>,
        props.container ? props.container.querySelector('#app') : document.getElementById('app'),
    );
}
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
    console.log('react app bootstraped');
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props: any) {
    ReactDOM.unmountComponentAtNode(
        props.container ? props.container.querySelector('#app') : document.getElementById('app'),
    );
}

4. 允许请求携带Cookie

将 withCredentials 设置为 true

axios.defaults.withCredentials = true;

设置该属性后访问会报跨域错误，需要后端修改 header 信息，设置 Access-Control-Allow-Origin 为前端项目的源地址，不可设置为 *。此外还需要设置 Access-Control-Allow-Creaentials 为 true。

# Nginx配置
add_header 'Access-Control-Allow-Private-Network' 'true';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

5.更改 axiso 的 baseUrl 接口域名，匹配不同环境

axios.defaults.baseURL = window.__POWERED_BY_QIANKUN__  ? 'http://watchtower.jd.com' : '';

6.第三方接口跨域

如果第三方接口的 Access-Control-Allow-Origin 为 *， 需要将 withCredentials 设置为 false，否则会出现跨域报错

axios({
    method: 'get',
    url: url,
    withCredentials: false,
}).then(
    (r) => {
        // dosomething
    },
    () =>  {
        // dosomething
    }
)

三、遇到的问题和解决办法

1.控制台报错

如图所示：

由于微应用中没有暴漏 qiankuan 的生命周期导致，可参考上一章节 3 解决

泰山平台也会弹窗提示错误信息，展示如图

2.控制台没有报错，但是会重定向到泰山首页

查看路由是不是 history 模式，可参考上一章节 3 设置解决。

3.页面跨域报错

如图所示：

需设置 Access-Control-Allow-Origin 为前端项目的源地址，不可设置为 *, 可参考上一章节 4 Nginx配置解决

修改之后请求如图所示：

4.接口请求获取不到cookie

如图所示：

请求要开启 credentials: "include"，可参考上一章节 4 解决

本篇文章中主要是介绍 Watchtower 如何接入到泰山开放平台，接入过程中遇到问题的探索与总结，希望对大家有所帮助。最后再次欢迎大家使用 Watchtower 前端异常监控平台 ，咚咚群号：82075599，期待你的加入哦～