React场景接入

安装

npm i @owl-js/react --save

使用

要使用此SDK，请在安装React组件之前调用 client('init',options)。

import React from 'react';
import ReactDOM from "react-dom";
// 在项目最开始的地方引入下面的代码
import browserClient from '@owl-js/web'// 配置参数
import { MonitorProvider } from '@owl-js/react'

browserClient('init', {
  aid: 0, // 应用唯一标识，必填参数
  token: 'xxx-xxx', // 应用 token,必填参数
})

// 开启上报
browserClient('start')

// ...

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // <React.StrictMode>
  <Provider store={store}>
      <MonitorProvider MonitorClient={browserClient}>
        <ConfigProvider locale={locale}>
          <App />
        </ConfigProvider>
      </MonitorProvider>
  </Provider>
  // </React.StrictMode >
);

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(rootNode).render(<App />);

ErrorBoundary

@owl-js/react导出ErrorBoundary组件，该组件将自动从内部发送Javascript错误组件树设置为Sentry，并设置回退UI。需要React版本>=16。

app.js

import React from 'react';
import {ErrorBoundary} from '@owl-js/react';

//当错误边界捕获错误时要呈现的 React 元素
function FallbackComponent() {
  return (
    <div>An error has occured</div>
  )
}

class App extends React.Component {
  render() {
    return (
      <ErrorBoundary fallback={FallbackComponent}>
        <OtherComponents />
      </ErrorBoundary>
    )
  }
}

export default App;