change(ui) - axios docs

frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js

@@ -0,0 +1,60 @@
+import Highlight from 'react-highlight'
+import ToggleContent from 'Shared/ToggleContent'
+import DocLink from 'Shared/DocLink/DocLink';
+
+const AxiosDoc = (props) => {
+  const { projectKey } = props;
+  return (
+    <div className="p-4">
+      <div>This plugin allows you to capture axios requests and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.</div>
+      
+      <div className="font-bold my-2">Installation</div>
+      <Highlight className="js">
+        {`npm i @openreplay/tracker-axios`}
+      </Highlight>
+      
+      <div className="font-bold my-2">Usage</div>
+      <p>Initialize the @openreplay/tracker package as usual then load the axios plugin. Note that OpenReplay axios plugin requires axios@^0.21.2 as a peer dependency.</p>
+      <div className="py-3" />
+
+      <div className="font-bold my-2">Usage</div>
+      <ToggleContent
+        label="Server-Side-Rendered (SSR)?"
+        first={
+          <Highlight className="js">
+        {`import tracker from '@openreplay/tracker';
+import trackerAxios from '@openreplay/tracker-axios';
+const tracker = new OpenReplay({
+  projectKey: '${projectKey}'
+});
+tracker.use(trackerAxios(options)); // check list of available options below
+tracker.start();`}
+      </Highlight>
+        }
+        second={
+          <Highlight className="js">
+        {`import OpenReplay from '@openreplay/tracker/cjs';
+import trackerAxios from '@openreplay/tracker-axios/cjs';
+const tracker = new OpenReplay({
+  projectKey: '${projectKey}'
+});
+tracker.use(trackerAxios(options)); // check list of available options below
+//...
+function MyApp() {
+  useEffect(() => { // use componentDidMount in case of React Class Component
+    tracker.start();
+  }, [])
+//...
+}`}
+      </Highlight>
+        }
+      />
+
+      <DocLink className="mt-4" label="Integrate Fetch" url="https://docs.openreplay.com/plugins/axios" />
+    </div>
+  )
+};
+
+AxiosDoc.displayName = "AxiosDoc";
+
+export default AxiosDoc;

frontend/app/components/Client/Integrations/AxiosDoc/index.js

@@ -0,0 +1 @@
+export { default } from './AxiosDoc'

frontend/app/components/Client/Integrations/Integrations.js

@@ -29,6 +29,7 @@ import FetchDoc from './FetchDoc';
 import MobxDoc from './MobxDoc';
 import ProfilerDoc from './ProfilerDoc';
 import AssistDoc from './AssistDoc';
+import AxiosDoc from './AxiosDoc/AxiosDoc';
 
 const NONE = -1;
 const SENTRY = 0;
@@ -51,6 +52,7 @@ const FETCH = 16;
 const MOBX = 17;
 const PROFILER = 18;
 const ASSIST = 19;
+const AXIOS = 20;
 
 const TITLE = {
 	[ SENTRY ]: 'Sentry',
@@ -73,6 +75,7 @@ const TITLE = {
 	[ MOBX ] : 'MobX',
 	[ PROFILER ] : 'Profiler',
 	[ ASSIST ] : 'Assist',
+	[ AXIOS ] : 'Axios',
 }
 
 const DOCS = [REDUX, VUE, GRAPHQL, NGRX, FETCH, MOBX, PROFILER, ASSIST]
@@ -191,6 +194,8 @@ export default class Integrations extends React.PureComponent {
 				return <ProfilerDoc onClose={ this.closeModal } projectKey={projectKey} />
       case ASSIST:
         return <AssistDoc onClose={ this.closeModal } projectKey={projectKey} />
+      case AXIOS:
+        return <AxiosDoc onClose={ this.closeModal } projectKey={projectKey} />
       default:
         return null;
     }
@@ -313,7 +318,6 @@ export default class Integrations extends React.PureComponent {
 								onClick={ () => this.showIntegrationConfig(MOBX) }
 								// integrated={ sentryIntegrated }
 							/>
-
 							<IntegrationItem
 								title="Profiler"
 								icon="integrations/openreplay"
@@ -330,6 +334,14 @@ export default class Integrations extends React.PureComponent {
 								onClick={ () => this.showIntegrationConfig(ASSIST) }
 								// integrated={ sentryIntegrated }
 							/>
+              <IntegrationItem
+								title="Axios"
+								icon="integrations/openreplay"
+								url={ null }
+								dockLink="https://docs.openreplay.com/plugins/axios"
+								onClick={ () => this.showIntegrationConfig(AXIOS) }
+								// integrated={ sentryIntegrated }
+							/>
 						</div>
 					</div>
 				)}