feat(frontend): remove links to Fetch/Axios Plugin docs; add link to network options
This commit is contained in:
Alex Kaminskii
parent
1fd20f2646
commit
a0ec773a03
10 changed files with 14 additions and 187 deletions
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react';
|
||||
import Highlight from 'react-highlight';
|
||||
import ToggleContent from 'Shared/ToggleContent';
|
||||
import DocLink from 'Shared/DocLink/DocLink';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const AxiosDoc = (props) => {
|
||||
const { projectKey } = props;
|
||||
return (
|
||||
<div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
|
||||
<h3 className="p-5 text-2xl">Axios</h3>
|
||||
<div className="p-5">
|
||||
<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 OpenReplay 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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AxiosDoc.displayName = 'AxiosDoc';
|
||||
|
||||
export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(AxiosDoc)
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './AxiosDoc'
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import React from 'react';
|
||||
import Highlight from 'react-highlight';
|
||||
import ToggleContent from 'Shared/ToggleContent';
|
||||
import DocLink from 'Shared/DocLink/DocLink';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const FetchDoc = (props) => {
|
||||
const { projectKey } = props;
|
||||
return (
|
||||
<div className="bg-white h-screen overflow-y-auto" style={{ width: '500px' }}>
|
||||
<h3 className="p-5 text-2xl">Fetch</h3>
|
||||
<div className="p-5">
|
||||
<div>
|
||||
This plugin allows you to capture fetch payloads 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-fetch --save`}</Highlight>
|
||||
|
||||
<div className="font-bold my-2">Usage</div>
|
||||
<p>Use the provided fetch method from the plugin instead of the one built-in.</p>
|
||||
<div className="py-3" />
|
||||
|
||||
<div className="font-bold my-2">Usage</div>
|
||||
<ToggleContent
|
||||
label="Server-Side-Rendered (SSR)?"
|
||||
first={
|
||||
<Highlight className="js">
|
||||
{`import OpenReplay from '@openreplay/tracker';
|
||||
import trackerFetch from '@openreplay/tracker-fetch';
|
||||
//...
|
||||
const tracker = new OpenReplay({
|
||||
projectKey: '${projectKey}'
|
||||
});
|
||||
tracker.start();
|
||||
//...
|
||||
export const fetch = tracker.use(trackerFetch(<options>)); // check list of available options below
|
||||
//...
|
||||
fetch('https://api.openreplay.com/').then(response => console.log(response.json()));`}
|
||||
</Highlight>
|
||||
}
|
||||
second={
|
||||
<Highlight className="js">
|
||||
{`import OpenReplay from '@openreplay/tracker/cjs';
|
||||
import trackerFetch from '@openreplay/tracker-fetch/cjs';
|
||||
//...
|
||||
const tracker = new OpenReplay({
|
||||
projectKey: '${projectKey}'
|
||||
});
|
||||
//...
|
||||
function SomeFunctionalComponent() {
|
||||
useEffect(() => { // or componentDidMount in case of Class approach
|
||||
tracker.start();
|
||||
}, [])
|
||||
//...
|
||||
export const fetch = tracker.use(trackerFetch(<options>)); // check list of available options below
|
||||
//...
|
||||
fetch('https://api.openreplay.com/').then(response => console.log(response.json()));
|
||||
}`}
|
||||
</Highlight>
|
||||
}
|
||||
/>
|
||||
|
||||
<DocLink className="mt-4" label="Integrate Fetch" url="https://docs.openreplay.com/plugins/fetch" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FetchDoc.displayName = 'FetchDoc';
|
||||
|
||||
export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(FetchDoc)
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './FetchDoc'
|
||||
|
|
@ -22,9 +22,7 @@ import VueDoc from './VueDoc';
|
|||
import GraphQLDoc from './GraphQLDoc';
|
||||
import NgRxDoc from './NgRxDoc';
|
||||
import MobxDoc from './MobxDoc';
|
||||
import FetchDoc from './FetchDoc';
|
||||
import ProfilerDoc from './ProfilerDoc';
|
||||
import AxiosDoc from './AxiosDoc';
|
||||
import AssistDoc from './AssistDoc';
|
||||
import { PageTitle } from 'UI';
|
||||
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
||||
|
|
@ -170,9 +168,7 @@ const integrations = [
|
|||
{ title: 'GraphQL', slug: '', icon: 'integrations/graphql', component: <GraphQLDoc /> },
|
||||
{ title: 'NgRx', slug: '', icon: 'integrations/ngrx', component: <NgRxDoc /> },
|
||||
{ title: 'MobX', slug: '', icon: 'integrations/mobx', component: <MobxDoc /> },
|
||||
{ title: 'Fetch', slug: '', icon: 'integrations/openreplay', component: <FetchDoc /> },
|
||||
{ title: 'Profiler', slug: '', icon: 'integrations/openreplay', component: <ProfilerDoc /> },
|
||||
{ title: 'Axios', slug: '', icon: 'integrations/openreplay', component: <AxiosDoc /> },
|
||||
{ title: 'Assist', slug: '', icon: 'integrations/openreplay', component: <AssistDoc /> },
|
||||
{ title: 'Zustand', slug: '', icon: '', header: '🐻', component: <ZustandDoc /> }
|
||||
],
|
||||
|
|
|
|||
|
|
@ -76,15 +76,16 @@ const renderXHRText = () => (
|
|||
<QuestionMarkHint
|
||||
content={
|
||||
<>
|
||||
Use our{' '}
|
||||
Configure{' '}
|
||||
<a
|
||||
className="color-teal underline"
|
||||
target="_blank"
|
||||
href="https://docs.openreplay.com/plugins/fetch"
|
||||
href="https://docs.openreplay.com/installation/network-options"
|
||||
>
|
||||
Fetch plugin
|
||||
Configure
|
||||
</a>
|
||||
{' to capture HTTP requests and responses, including status codes and bodies.'} <br />
|
||||
network capturing
|
||||
{' to see fetch/XHR requests and response payloads.'} <br />
|
||||
We also provide{' '}
|
||||
<a
|
||||
className="color-teal underline"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import FetchBasicDetails from './components/FetchBasicDetails';
|
||||
import { Button } from 'UI';
|
||||
import FetchPluginMessage from './components/FetchPluginMessage';
|
||||
import { TYPES } from 'Types/session/resource';
|
||||
import FetchTabs from './components/FetchTabs/FetchTabs';
|
||||
import { useStore } from 'App/mstore';
|
||||
|
|
@ -52,7 +51,6 @@ function FetchDetailsModal(props: Props) {
|
|||
<h5 className="mb-2 text-2xl">Network Request</h5>
|
||||
<FetchBasicDetails resource={resource} timestamp={props.time ? DateTime.fromMillis(props.time).setZone(timezone.value).toFormat(`hh:mm:ss a`) : undefined} />
|
||||
|
||||
{isXHR && !fetchPresented && <FetchPluginMessage />}
|
||||
{isXHR && <FetchTabs resource={resource} />}
|
||||
|
||||
{rows && rows.length > 0 && (
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import { Icon } from 'UI';
|
||||
|
||||
function FetchPluginMessage() {
|
||||
return (
|
||||
<div className="bg-active-blue rounded p-3 mt-4">
|
||||
<div className="mb-2 flex items-center">
|
||||
<Icon name="lightbulb" size="18" />
|
||||
<span className="ml-2 font-medium">Get more out of network requests</span>
|
||||
</div>
|
||||
<ul className="list-disc ml-5">
|
||||
<li>
|
||||
Integrate{' '}
|
||||
<a href="https://docs.openreplay.com/plugins/fetch" className="link" target="_blank">
|
||||
Fetch plugin
|
||||
</a>{' '}
|
||||
to capture fetch payloads.
|
||||
</li>
|
||||
<li>
|
||||
Find a detailed{' '}
|
||||
<a href="https://www.youtube.com/watch?v=YFCKstPZzZg" className="link" target="_blank">
|
||||
video tutorial
|
||||
</a>{' '}
|
||||
to understand practical example of how to use fetch plugin.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FetchPluginMessage;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './FetchPluginMessage';
|
||||
|
|
@ -101,7 +101,15 @@ function FetchTabs({ resource }: Props) {
|
|||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
|
||||
<div className="mt-6 text-2xl">Body is Empty.</div>
|
||||
<div className="mt-6 text-2xl">
|
||||
Body is Empty.
|
||||
{' '}
|
||||
<a href="https://docs.openreplay.com/installation/network-options" className="link" target="_blank">
|
||||
Configure
|
||||
</a>
|
||||
{' '}
|
||||
network capturing to get more out of fetch/XHR requests.
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue