跳到主要内容
版本：3.7.0

集成指南

SDK​

一、自动嵌码​

  • 登录平台，左侧菜单选择部署配置-部署中心，选择客户端SDK；

部署中心

  • 选择Web SDK，在下方自动注入标签页选择添加应用；

Web_SDK

  • 选择事先创建的Web应用后，选中需要嵌入探针的服务移动到右侧，点击保存；

添加应用

  • 刷新服务页面后，页面元素中看到探针的JS文件，且网络中有upload数据上报，说明探针嵌码成功。

二、手动嵌码​

注：以下嵌码方式要求探针版本在 2.0.0 及以上

Web 的 JS 探针手动嵌码支持代理嵌码与 Script 标签嵌码两种方式，这两种方式二选一即可。

不论使用那种方式，应首先在 One 平台上获取到 JS 探针的标签配置：

  • 在平台（平台 Rum 版本 2.4.2.0 以上）选择部署配置->部署->客户端 SDK->Web SDK->手动注入；
  • 选择目标应用后，点击复制命令，如下图：

  • 粘贴到任意文本编辑工具中，修改src后的资源路径，根据实际的相对路径或者 CDN 地址进行修改配置。

代理嵌码​

解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip暂存本地，拷贝解压文件中的BonreeSDK_JS.min.js文件，将该文件部署在可以访问的环境，例如 Nginx、Apache 的静态资源文档目录或者通过 CDN 部署。

1. Nginx 配置​

通过ngx_http_sub_module模块进行替换，ngx_http_sub_module模块的安装及配置文档请参考 官方文档

示例如下：

location / {
    sub_filter '<head>' '<head><script type="text/javascript" src="BonreeSDK_JS.min.js"></script>';
    sub_filter_once on;
}

其中，<script>标签内容即为第 1 步中准备好的标签内容，请根据实际情况配置，切勿直接复制文档中示例。

2. Apache 配置​

使用 Apache 作为 Web 容器进行内容替换，需要使用mod_substitute和mod_filter两个模块。

示例使用 Apache 2.4：

<Location />
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute "s|<head>|<head><script type="text/javascript" src="BonreeSDK_JS.min.js"></script>|in"
</Location>

其中，<script>标签内容即为第 1 步中准备好的标签内容，请根据实际情况配置，切勿直接复制文档中示例。

3. 特别说明：​

如果您的 html 中使用了标签来指定了编码，应该将标签紧接在标签之后，并且将探针紧接在最后一个标签之后。

Nginx 示例：

location / {
    sub_filter '<meta content="text/html;charset=utf-8">' '<metacontent="text/html;charset=utf-8"><script type="text/javascript" src="BonreeSDK_JS.min.js"></script>';
    sub_filter_once on;
}

Apache 示例：

<Location />
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute "s|<meta content=\"text/html;charset=utf-8\">|<metacontent=\"text/html;charset=utf-8\"><script type="text/javascript" src="BonreeSDK_JS.min.js"></script>|in"
</Location>

注：以上<script>标签内容即为手动嵌码最开始的步骤中准备好的标签内容，请根据实际情况配置，切勿直接复制文档中示例。

H5 页面 script 标签嵌码​

  • 解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip暂存本地，拷贝解压文件中的BonreeSDK_JS.min.js文件，将该文件放到项目根目录下js文件夹中

  • 在项目根目录下的index.html文件的head中引入script标签

<script id="BonreeAgent" src="./js/BonreeSDK_JS.min.js"></script>

注：引入探针的 script 标签必须被 head 标签包裹

  • 若项目中有多个 HTML 页面，每个 HTML 页面均需要用 script 标签引入探针（如在html文件夹下的user.html 文件中引入探针）

1-1.引入探针

上图引入标签的示例仅表示 html 中引入标签的形式与位置，关于探针的启动与配置请参照下文所述进行配置。

  • 探针的启动有 script 标签启动和 JS 代码启动两种方式，二选一即可。推荐 Script 标签直接启动的方式。
1. Script 标签直接启动​
  • 直接使用手动嵌码手动嵌码最开始的步骤中准备好的标签内容引入（以在该项目根目录下的 index.html 文件中嵌入探针为例）
<script
  type="text/javascript"
  src="./js/BonreeSDK_JS.min.js"
  data="%7B%22reqHeaderTraceKey%22%3A%5B%22tracestate%22%2C%22traceparent%22%5D%2C%22uploadAddrHttps%22%3A%22https%3A%2F%2Foneupload.bonree.com%2FRUM%2Fupload%22%2C%22mc%22%3A%5B%7B%22n%22%3A%22network%22%2C%22cs%22%3A%7B%22fc%22%3A0%7D%7D%5D%2C%22appId%22%3A%221234567890a9406babde338c565e7b2a%22%2C%22uploadAddrHttp%22%3A%22http%3A%2F%2Foneupload.bonree.com%2FRUM%2Fupload%22%2C%22respHeaderTraceKey%22%3A%5B%22traceresponse%22%2C%22x-br-response%22%5D%2C%22brss%22%3Afalse%7D"
  id="BonreeAgent"
></script>

image-20230113165951155

注：请根据实际情况配置，切勿直接复制文档中示例。

2. 代码启动​
  • 通过代码启动，需在head中另加script标签，调用探针启动接口进行配置与启动，其中，配置数据在手动嵌码手动嵌码最开始的步骤中准备好的标签data属性中，复制出来做 urldecode 放入参数中，启动代码如下
<script src="./js/BonreeSDK_JS.min.js"></script>
<script>
  window.BonreeAgent &&
    window.BonreeAgent.BonreeStart({
      reqHeaderTraceKey: ["tracestate", "traceparent"],
      uploadAddrHttps: "https://oneupload.bonree.com/RUM/upload",
      mc: [
        {
          n: "network",
          cs: {
            fc: 0,
          },
        },
      ],
      appId: "1234567890a9406babde338c565e7b2a",
      uploadAddrHttp: "http://oneupload.bonree.com/RUM/upload",
      respHeaderTraceKey: ["traceresponse", "x-br-response"],
      brss: false,
    });
</script>

alt text

注：请根据实际情况配置，切勿直接复制文档中示例。

项目启动后，用浏览器运行该应用，在浏览器开发者工具的调试器中查看Network，有upload请求（如下图所示），则说明嵌入探针成功

1-4.运行结果

Log​

BonreeLog用于采集浏览器中的日志数据，可自动采集上报网络错误、js错误、控制台console输出的日志数据及自定义的日志数据。

一、NPM 自动嵌码​

  • 安装
npm install bonree-log-jsagent --s
  • 导出
import { BRLogStart } from "bonree-log-jsagent";
  • 初始配置

AppID与LogUpload地址请于平台上获取或联系技术支持。

BRLogStart({
    appID: "<#AppID#>",
    uploadAddrHttp: "http://<#LogUpload地址#>",
    uploadAddrHttps: "https://<#LogUpload地址#>"
});
  • 代码中使用
window.BRLog && window.BRLog.logger.info("this is a log from web");

二、H5页面script标签手动嵌码​

  • 解压获取到的Log-SDK包BonreeLog_TDEM_JS.zip暂存本地，拷贝解压文件中的BonreeLog_JS.min.js文件，将该文件放到项目根目录下js文件夹中

  • 在项目根目录下的index.html文件的head标签中引入script标签

<script id="BonreeLog" src="./js/BonreeLog_JS.min.js"></script>

注：引入Log-SDK的script标签必须被head标签包裹

  • 若项目中有多个HTML页面，每个HTML页面均需要用script标签引入Log-SDK（如在html文件夹下的user.html文件中引入Log-SDK）

  • Log-SDK的启动有script标签启动和JS代码启动两种方式

AppID与LogUpload地址请于平台上获取或联系技术支持。

  1. script标签直接启动

    • 在script标签中设置id为BonreeLog，设置data参数，如果参数中存在特殊字符，需对data参数值的字符串整体做urlencode编码（以在该项目根目录下的index.html文件中嵌入Log-SDK为例
    <script 
      id="BonreeLog" 
      src="./js/BonreeLog_JS.min.js" 
      data='{"appID":"<#AppID#>",
             "uploadAddrHttp": "http://<#LogUpload地址#>",
             "uploadAddrHttps": "https://<#LogUpload地址#>"}'
    ></script>
    • 示例
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>home</title>
        <script 
          id="BonreeLog" 
          src="./js/BonreeLog_JS.min.js" 
          data='{"appID":"<#AppID#>",
                 "uploadAddrHttp": "http://<#LogUpload地址#>",
                 "uploadAddrHttps": "https://<#LogUpload地址#>"}'
        ></script>
    </head>

    <body>
        ...
    </body>
    </html>

  2. 代码启动

    • 通过代码启动，需在head标签中另加script标签，调用Log-SDK启动接口进行配置与启动，启动代码如下
    <script src="./js/BonreeLog_JS.min.js" ></script>
    <script>
        window.BRLog&&window.BRLog.start({
            appID:"<#AppID#>",
            uploadAddrHttp: "http://<#LogUpload地址#>",
            uploadAddrHttps: "https://<#LogUpload地址#>"
        });
    </script>
    • 示例
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>home</title>
        <script src="./js/BonreeLog_JS.min.js"></script>
        <script>
            window.BRLog&&window.BRLog.start({
                appID:"<#AppID#>",
                uploadAddrHttp: "http://<#LogUpload地址#>",
                uploadAddrHttps: "https://<#LogUpload地址#>"
            });
        </script>
    </head>

    <body>
        ...
    </body>
    </html>