Web SDK

SDK接入流程

注意：在完成Web端接入前，需要先获取Web端appkey。

第一步SDK接入说明

Web 端SDK接入方式有两种：CDN和NPM

注意：

1. CDN下载地址：https://g.alicdn.com/jssdk/apm/2.0.9/es5/uapm.iife.js

2. npm命令 npm install @umengfe/apm --save

3. 内网环境，请将SDK中的js文件上传到内网的静态资源服务器上，并将集成代码中的CDN地址替换为内网js文件的URL地址

方式一：通过CDN在线部署

同步加载和异步加载区别

异步加载：又称为非阻塞加载，表示浏览器在下载执行JS之后还会继续处理后续页面。若对页面性能的要求非常高，建议使用此方式。（异步加载无法捕捉到SDK加载初始化完成之前的JS错误和资源加载错误）

同步加载：又称为阻塞加载，表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误，建议使用此方式

异步加载

情景一：通过cdn异步引入sdk后，设置初始化参数。

<script>
 void (function (e, t, n, a, o, i, m) {
 (e._um_apm_namespace = o),
 (e[o] =
 e[o] ||
 function () {
 (e[o].q = e[o].q || []).push(arguments);
 }),
 (e[o].l = e[o].l || +new Date()),
 (i = t.createElement(n)),
 i.setAttribute('crossorigin', ''),
 (i.src = a),
 (m = t.getElementsByTagName(n)[0]),
 m.parentNode.insertBefore(i, m);
 })(window, document, "script", "https://g.alicdn.com/jssdk/apm/2.0.9/es5/uapm.iife.js", "_apm");
 _apm('create',{
 pid:'appkey',
 dsn:'https://example.com',
 pageFilter: { mode: 'ignore', rules: [] },
 });
</script>
 

情景二：在sdk引入之前设置初始化参数

<script>
window._apm = window._apm || {
 p: [
 [
 'create',
 {
 dsn:'https://example.com',
 pid:'appkey',
 pageFilter: {
 mode: 'ignore',
 rules: [],
 },
 },
 ],
 ],
}; 
</script>
<script>
 void (function (e, t, n, a, o, i, m) {
 (e._um_apm_namespace = o),
 (e[o] =
 e[o] ||
 function () {
 (e[o].q = e[o].q || []).push(arguments);
 }),
 (e[o].l = e[o].l || +new Date()),
 (i = t.createElement(n)),
 i.setAttribute('crossorigin', ''),
 (i.src = a),
 (m = t.getElementsByTagName(n)[0]),
 m.parentNode.insertBefore(i, m);
 })(window, document, "script", "https://g.alicdn.com/jssdk/apm/2.0.9/es5/uapm.iife.js", "_apm");
</script>

同步加载

<script>
window._um_apm_namespace = '_apm';
window[_um_apm_namespace] = window[_um_apm_namespace] || {
 p:[],
}; 
window[_um_apm_namespace].p.push([
 'create',
 {
 dsn:'https://example.com',
 pid:'appkey',
 pageFilter: {
 mode: 'ignore',
 rules: [],
 },
 },
]);
</script>
<script src="https://g.alicdn.com/jssdk/apm/2.0.9/es5/uapm.iife.js" crossorigin></script>

方式二：通过npm集成

在终端执行如下命令安装sdk @umengfe/apm@联系产品获取sdk版本号

npm install @umengfe/apm --save
ESM
import { init } from '@umengfe/apm';
init({
 pageFilter: { mode: 'ignore', rules: [] },
 pid:'appkey',
 dsn:'https://example.com',
});
CJS
const APM = require('@umengfe/apm');
APM.init({
 pageFilter: { mode: 'ignore', rules: [] },
 pid:'appkey',
 dsn:'https://example.com',
});

第二步设置/（修改）初始化参数

如您使用cdn方式，则已复制完毕初始化代码，可按照下面方式进行参数修改；

如您使用npm方式，则需要复制下面的初始化代码，并按照下面方式进行参数设置

初始化说明

初始化方法，调用示意

import { init } from '@umengfe/apm';
init({
 pageFilter: {
 mode:'ignore',
 rules:[]
 },
 pid:'appkey',
 dsn:'https://example.com',
 logLevel: 0
});

参数如下

设置应用唯一标识（appkey）

必填

设置用户产品线标志tag（可选）

设置sdk采集服务地址

私有化部署时必填

黑白名单设置pageFilter（可选）

用于设置采集的H5页面黑白名单，可以在黑名单和白名单中选择其一，如果选择白名单的方式，那么只有符合标准的页面会被采集，如果选择的是黑名单的方式，那么符合标准的页面不会被采集

此项非必须参数，用于根据页面地址判断是否过滤日志，包含如下属性

输出日志等级（可选）

非必填，表示js日志输出日志等级

第三步方法说明

1. 用户手动捕捉并上报错误日志

captureException

调用方法，通过cdn引入的使用以下方式调用
_apm && _apm('captureException', new Error('手动捕捉'));
通过npm引入的使用以下方式来调用
import { captureException } from '@umengfe/apm';

try {
 throw new Error('开发者手动捕捉到的错误');
} catch (error) {
 captureException(error);
}
在vue中的使用示范如下，以vite创建的工程为例，在main.js中
import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { init, captureException } from '@umengfe/apm';
init({
 pageFilter: {
 mode: 'ignore',
 rules: [],
 },
 pid: 'test124',
 dsn: '//aplus2-portal-lite.emas-poc.com',
 logLevel: 4,
});
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
 // 处理错误，例如：报告给一个服务
 captureException(err);
};
app.mount('#app');

附录：兼容性说明

浏览器和平台兼容性