关于集成成功后没有数据的说明

1.请先进入采样率配置页面查看采样率是否有不到100%的配置项

2.如果有，请修改成100%，并清空SDK需要采集的项目的缓存后重新加载项目拉取云配信息

3.如果没有，请将SDK集成代码配置项中的logLevel（Number类型）修改为3，并完整的将APM的日志和集成代码提交至工单

SDK接入说明

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

通过CDN在线部署

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

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

<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.10/es5/uapm.iife.js", "_apm");
 _apm('create',{
 pid:'appkey',
 pageFilter: { mode: 'ignore', rules: [] },
 });
</script>

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

<script>
window._apm = window._apm || {
 p: [
 [
 'create',
 {
 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.10/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',
 {
 pid:'appkey',
 pageFilter: {
 mode: 'ignore',
 rules: [],
 },
 },
]);
</script>
<script src="https://g.alicdn.com/jssdk/apm/2.0.10/es5/uapm.iife.js" crossorigin></script>

通过npm集成

在终端执行如下命令安装最新版sdk @umengfe/apm， 注意SDK版本必须大于2.0.0

npm install @umengfe/apm --save

ESM

import { init } from '@umengfe/apm';
init({
 pageFilter: { mode: 'ignore', rules: [] },
 pid:'appkey',
});

CJS

const APM = require('@umengfe/apm');
APM.init({
 pageFilter: { mode: 'ignore', rules: [] },
 pid:'appkey',
});

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

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

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

初始化说明

初始化方法，调用示意

import { init } from '@umengfe/apm';
init({
 pageFilter: {
 mode:'ignore',
 rules:[]
 },
 pid:'appkey',
 logLevel: 0,
 traceKey:'trace-x',
});

参数如下

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

pageFilter

apiFilter

errorFilter

特别注意，开启后还需要配合服务端同学，在业务接口返回的header中添加traceId:xxxidxxid，同时在header中返回access-control-expose-headers: traceId,以允许浏览器读取header中key为traceId的字段

自定义错误采集

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',
  logLevel: 4,
});
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
  // 处理错误，例如：报告给一个服务
  captureException(err);
};
app.mount('#app');

用户手动上报API请求日志

sendAPILog

（该api调用要求版本不低于2.0.10）

// 调用方法，通过cdn引入的使用以下方式调用
_apm && _apm('sendAPILog', {
   url: 'https://example.com/getUserName',
   method: 5,
   rc: 500,
   rt: 2000,
   traceid: '1234567',
   req_body: '{a:1}',
   req_query: '&aaa=1'
});

// 通过npm引入的使用以下方式来调用
import { sendAPILog } from '@umengfe/apm';

sendAPILog({
   url: 'https://example.com/getUserName',
   method: 5,
   rc: 500,
   rt: 2000,
   traceid: '1234567',
   req_body: '{a:1}',
   req_query: '&aaa=1'
});

修改用户配置

npm 方式

import { setUserConfig } from '@umengfe/apm';
setUserConfig({puid:"用户自己的账号"});

cdn方式

<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.10/es5/uapm.iife.js", "_apm");
  _apm('create',{
    pid:'appkey',
    pageFilter: { mode: 'ignore', rules: [] },
  });
</script>

<script>
  // 此处为用户可以在自己的业务代码中设置
 _apm('set','puid','用户自己的账号');
</script>

修改sdk的命名空间

在cdn引入时，需要从全局变量中获取apm的句柄，如下图，第五个参数"_apm"可修改为开发者期望的全局句柄，比如改为_um_apm，后面sdk的初始化和调用都是通过_um_apm()来调用。

<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.10/es5/uapm.iife.js", "_apm");
  _apm('create',{
    pid:'appkey',
    pageFilter: { mode: 'ignore', rules: [] },
  });
</script>

避免sdk被移除，sdk调用时报错

window._apm = window._apm || {p: []}; 
_apm.push([
      'create',
      {
        pid:'appkey',
        pageFilter: {
          mode: 'ignore',
          rules: [],
        },
      },
]);
_apm.push([
      'set',
      'puid',
      '用户自己的账号id'
]);

附录：

浏览器兼容性说明

常见问题

1. 已经开通功能的情况下，开发人员本地调试没有数据上报？

答：由于云端配置存在多级缓存，因此数据上报会有延迟，如您清理缓存，则在清理缓存后5分钟后生效，可5分钟后再尝试测试上报；若不清理缓存，2小时后，页面刷新时会自动重新拉取云配接口更新配置

2. uni-app怎么集成？

   1. 答:参考apm相关的demo https://github.com/umeng/apm_demos_fe/blob/main/uni-app/README.md

加入开发者钉钉交流群

如您正在接入U-APM SDK 恰好有问题需要我们支持,或想和其他开发者交流 崩溃问题的优化与解决 都可以加入到该钉钉群.

点击获取入群二维码