1. 功能介绍

为了扩展SDK的功能, 采用了注入插件化的架构方式，方便用户按需使用扩展功能。

2. 自定义插件(4.0.0版本开始支持)

为了更大程度的支持用户多元化需求，Web SDK在4.0.0开始新增了plugins配置项，支持运行用户自定义的插件。

插件的具体开发规范如下(为了在开发过程中拥有更好的类型提示，建议使用typescript开发)：

1：插件需要定义为一个class类

2：类上有4个基础属性：

name：插件名

isReady：是否运行了插件(可以启动避免重复多次运行)

init：初始化插件方法(插件的功能启动均在此方法中运行)

transform：数据上报前，可以在此方法进行数据格式化一些列操作，如果不需要进行数据上报功能，

则该方法不用进行数据返回或返回undefined

下面给出一个自定义插件的demo

2.1. 第一种场景：单独使用监控SDK

功能监听js异常事件，并上报数据。

（typescript版本）

import hinaEpm, {PerformanceOptions,PluginBase, ReportDataType, MonitorInstance} from 'hina-cloud-monitor'
/**
 * PerformanceOptions：监控SDK所有配置项信息
 * PluginBase：插件抽象类，插件继承它时可以提供详细的类型提示
 * MonitorInstance：监控SDK的实例对象，提供SDK所有的方法
 * ReportDataType：上报数据的typescript类型声明
 */
interface IData{
  a:string
  b:string
}
class CustomErrorPlugin extends PluginBase<PerformanceOptions, MonitorInstance>{
  name="CustomErrorPlugin"
  isReady=false
  constructor(public options:PerformanceOptions,public context:MonitorInstance) {
    super(options,context);
  }
  init(notify: (data: IData) => void) {
    if (this.isReady){
      return
    }
    this.isReady=true
    window.onerror=()=>{
      // 调用notify方法会触发transform方法的执行
      notify({
        a:1,
        b:2,
      })
    }
  }
  transform(data: IData): ReportDataType<IData> {
    // 在这里我想上报 H_performance_js 事件 如果不需要上报事件 直接返回undefined
    const props = this.context.getReportData('H_performance_js',data)
    return props
  }
}
// 使用方式：
hinaEpm.init({
  // 其他配置项省略
  plugins:[
    CustomClick
  ] 
})

(javascript版本)

import hinaEpm from 'hina-cloud-monitor'
class CustomErrorPlugin {
    name = "CustomErrorPlugin"
    isReady = false
    constructor(options, context) {
        this.options = options
        this.context = context
    }
    init() {
        if (this.isReady) {
            return
        }
        this.isReady = true
         window.onerror=()=>{
      // 调用notify方法会触发transform方法的执行
      notify({
        a:1,
        b:2,
      })
    }
    }
     transform(data) {
    // 在这里我想上报 H_performance_js 事件 如果不需要上报事件 直接返回undefined
    const props = this.context.getReportData('H_performance_js',data)
    return props
  }
}

// 使用方式：
hinaEpm.init({
  // 其他配置项省略
  plugins:[
    CustomClick
  ]
})

2.2. 第二种场景：集成在埋点SDK中使用监控SDK功能

功能监听js异常事件，并上报数据。

（typescript版本）

import hina, {PerformanceOptions,PluginBase, ReportDataType, MonitorInstance} from 'hina-cloud-js-sdk'
/**
 * PerformanceOptions：监控SDK所有配置项信息
 * PluginBase：插件抽象类，插件继承它时可以提供详细的类型提示
 * MonitorInstance：监控SDK的实例对象，提供SDK所有的方法
 * ReportDataType：上报数据的typescript类型声明
 */
interface IData{
  a:string
  b:string
}
class CustomErrorPlugin extends PluginBase<PerformanceOptions, MonitorInstance>{
  name="CustomErrorPlugin"
  isReady=false
  constructor(public options:PerformanceOptions,public context:MonitorInstance) {
    super(options,context);
  }
  init(notify: (data: IData) => void) {
    if (this.isReady){
      return
    }
    this.isReady=true
    window.onerror=()=>{
      // 调用notify方法会触发transform方法的执行
      notify({
        a:1,
        b:2,
      })
    }
  }
  transform(data: IData): ReportDataType<IData> {
    // 在这里我想上报 H_performance_js 事件 如果不需要上报事件 直接返回undefined
    const props = this.context.getReportData('H_performance_js',data)
    return props
  }
}
// 使用方式：
hina.init({
  // 其他配置项省略
  performanceErrorConfig:{
    plugins:[
      CustomClick
    ] 
  }
})

(javascript版本)

import hina from 'hina-cloud-js-sdk'
class CustomErrorPlugin {
    name = "CustomErrorPlugin"
    isReady = false
    constructor(options, context) {
        this.options = options
        this.context = context
    }
    init() {
        if (this.isReady) {
            return
        }
        this.isReady = true
         window.onerror=()=>{
      // 调用notify方法会触发transform方法的执行
      notify({
        a:1,
        b:2,
      })
    }
    }
     transform(data) {
    // 在这里我想上报 H_performance_js 事件 如果不需要上报事件 直接返回undefined
    const props = this.context.getReportData('H_performance_js',data)
    return props
  }
}

// 使用方式：
hina.init({
  // 其他配置项省略
  performanceErrorConfig:{
    plugins:[
      CustomClick
    ] 
  }
})