diff --git a/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js b/frontend/app/components/Client/Integrations/AxiosDoc/AxiosDoc.js
new file mode 100644
index 000000000..6d8233826
--- /dev/null
+++ b/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 (
+
+
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.
+
+
Installation
+
+ {`npm i @openreplay/tracker-axios`}
+
+
+
Usage
+
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.
+
+
+
Usage
+
+ {`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();`}
+
+ }
+ second={
+
+ {`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();
+ }, [])
+//...
+}`}
+
+ }
+ />
+
+
+
+ )
+};
+
+AxiosDoc.displayName = "AxiosDoc";
+
+export default AxiosDoc;
diff --git a/frontend/app/components/Client/Integrations/AxiosDoc/index.js b/frontend/app/components/Client/Integrations/AxiosDoc/index.js
new file mode 100644
index 000000000..a5a8a1873
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/AxiosDoc/index.js
@@ -0,0 +1 @@
+export { default } from './AxiosDoc'
\ No newline at end of file
diff --git a/frontend/app/components/Client/Integrations/Integrations.js b/frontend/app/components/Client/Integrations/Integrations.js
index f34050055..fa69d1861 100644
--- a/frontend/app/components/Client/Integrations/Integrations.js
+++ b/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
case ASSIST:
return
+ case AXIOS:
+ return
default:
return null;
}
@@ -313,7 +318,6 @@ export default class Integrations extends React.PureComponent {
onClick={ () => this.showIntegrationConfig(MOBX) }
// integrated={ sentryIntegrated }
/>
-
this.showIntegrationConfig(ASSIST) }
// integrated={ sentryIntegrated }
/>
+ this.showIntegrationConfig(AXIOS) }
+ // integrated={ sentryIntegrated }
+ />
)}