@sdc-monitor/react

⚠️ attention

If you want to import in weixin miniprograme,please replace @sdc-monitor/browser to @miotjs/wx-mini

🛠️ Install

# using npm
npm install @sdc-monitor/react @sdc-monitor/browser
# using yarn
yarn add @sdc-monitor/react @sdc-monitor/browser

read the mito-doc to konw more info

🥳 Usage

Configure

import React from 'react'
import { init } from '@sdc-monitor/browser'

const MitoInstance = init({
  // set debug true to convenient debugger in dev,set false in prod
  debug:true,
  dsn: '/upload',
  maxBreadcrumbs: 100,
})

Add ErrorBoundary

If you're using React 16 or above, you can use ErrorBoundary component to catch render error and automatically send to server.Here are some configurations of ErrorBoundary component that provided by @sdc-monitor/react.

index.tsx

import React from 'react'
import App from './App'
import { MitoProvider } from '@sdc-monitor/react'
import { init } from '@sdc-monitor/browser'


const MitoInstance = init({
  dsn: 'https://test.com/yourServer',
  maxBreadcrumbs: 100,
})

const APP: React.FC = () => {
  return (
    <MitoProvider MitoInstance={MitoInstance}>
        <App />
    </MitoProvider>
  )
}

OtherComponent.tsx

ErrorBoundary component will automatically send react error if you set the correct dsn.

import { ErrorBoundary } from '@sdc-monitor/react'
import ChildComponent from './ChildComponent'

export default function OtherComponent() {
  const onError = (error: Error, componentStack: string) => {
    console.log('triggered is render error')
  }
  const ErrorFallback = <div>Opps,trigger render error</div>
  return (
    <>
    	// this is used index.tsx's MitoInstance
      <ErrorBoundary onError={onError} fallback={ErrorFallback}>
        <ChildComponent></ChildComponent>
      </ErrorBoundary>
    </>
  )
}

multiple instances

initreturn a BrowserClient, so you can define multiple instances with init.The configuration and hooks between multiple instances does not affect each other.

import React from 'react'
import App from './App'
import { MitoProvider } from '@sdc-monitor/react'
import { init } from '@sdc-monitor/browser'


const MitoInstance_one = init({
  dsn: 'https://test.com/yourServer_one',
  maxBreadcrumbs: 100,
})

const MitoInstance_two = init({
  dsn: 'https://test.com/yourServer_two',
  maxBreadcrumbs: 20,
})

const APP: React.FC = () => {
  return (
    <MitoProvider MitoInstance={MitoInstance_one}>
      // this is used MitoInstance_one
        <App />
    		<MitoProvider MitoInstance={MitoInstance_two}>
           // this is used MitoInstance_two
           <OtherComponent />
        </MitoProvider>
    </MitoProvider>
  )
}

Use in wx-mini

If you want to use in Weixin miniprogram,just replace @sdc-monitor/browser to @sdc-monitor/wx-mini.Just like this:

install

yarn add @sdc-monitor/react @sdc-monitor/wx-mini

import React from 'react'
import App from './App'
import { MitoProvider } from '@sdc-monitor/react'
import { init } from '@sdc-monitor/wx-mini'


const MitoInstance = init({
  dsn: 'https://test.com/yourServer',
  maxBreadcrumbs: 100,
})

const APP: React.FC = () => {
  return (
    <MitoProvider MitoInstance={MitoInstance}>
        <App />
    </MitoProvider>
  )
}

Using CDN in Browser

CDN way is not recommended.Because @sdc-monitor/web commonjs file is include jsxRuntime code,so it's size is larger than else package.

index.html

<header>
  <script src="https://cdn.jsdelivr.net/npm/@sdc-monitor/web/dist/web.min.js"></script>
  <script>
    MITO.init({
		  dsn: 'https://test.com/yourServer',
		  maxBreadcrumbs: 100,
    });
  </script>
</header>

there is MITO varible automatically mounted on the window when you use cdn in script tag.Then you can use in react component

index.tsx

import React from 'react'
import App from './App'

const MitoInstance = MITO.init({
  dsn: 'https://test.com/yourServer',
  maxBreadcrumbs: 100,
})

const APP: React.FC = () => {
  return (
    <MITO.MitoProvider MitoInstance={MitoInstance}>
        <App />
    </MITO.MitoProvider>
  )
}