diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d81354bd9..34ce2b4d89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Added - Add support for Expo Router navigation tracking ([#1270](https://github.com/Instabug/Instabug-React-Native/pull/1270)). +- Enhance the network interceptor to capture more client error messages ([#1257](https://github.com/Instabug/Instabug-React-Native/pull/1257)). ### Fixed diff --git a/examples/default/package.json b/examples/default/package.json index 529521802d..a618c2811c 100644 --- a/examples/default/package.json +++ b/examples/default/package.json @@ -16,6 +16,7 @@ "@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "graphql": "^16.8.1", + "axios": "^1.7.4", "graphql-request": "^6.1.0", "instabug-reactnative": "link:../..", "instabug-reactnative-ndk": "github:https://github.com/Instabug/Instabug-React-Native-NDK", diff --git a/examples/default/src/screens/apm/NetworkScreen.tsx b/examples/default/src/screens/apm/NetworkScreen.tsx index 467a621f21..40ad2b5faf 100644 --- a/examples/default/src/screens/apm/NetworkScreen.tsx +++ b/examples/default/src/screens/apm/NetworkScreen.tsx @@ -7,6 +7,7 @@ import { useQuery } from 'react-query'; import { HStack, VStack } from 'native-base'; import { gql, request } from 'graphql-request'; import { CustomButton } from '../../components/CustomButton'; +import axios from 'axios'; export const NetworkScreen: React.FC = () => { const [endpointUrl, setEndpointUrl] = useState(''); @@ -45,6 +46,32 @@ export const NetworkScreen: React.FC = () => { } } + async function sendRequestToUrlUsingAxios() { + let urlToSend = ''; + + if (endpointUrl.trim() !== '') { + urlToSend = endpointUrl; + console.log('Sending request to: ', endpointUrl); + } else { + // Use json placeholder URL as a default if endpointUrl is empty + console.log('sending request to default json placeholder'); + urlToSend = defaultRequestUrl; + } + + try { + // Perform the request using the urlToSend + const response = await axios.get(urlToSend); + // Format the JSON response for better logging + const formattedData = JSON.stringify(response.data, null, 2); + + // Log the formatted response + console.log('Response:', formattedData); + } catch (error) { + // Handle errors appropriately + console.error('Error:', error); + } + } + const fetchGraphQlData = async () => { const document = gql` query { @@ -75,6 +102,11 @@ export const NetworkScreen: React.FC = () => { value={endpointUrl} /> + + refetch} title="Reload GraphQL" /> {isLoading && Loading...} diff --git a/examples/default/yarn.lock b/examples/default/yarn.lock index 74f7ce0e3b..10aaed1cd9 100644 --- a/examples/default/yarn.lock +++ b/examples/default/yarn.lock @@ -3239,11 +3239,25 @@ async@^3.2.2: resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + at-least-node@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== +axios@^1.7.4: + version "1.7.4" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.4.tgz#4c8ded1b43683c8dd362973c393f3ede24052aa2" + integrity sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw== + dependencies: + follow-redirects "^1.15.6" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + babel-core@^7.0.0-bridge.0: version "7.0.0-bridge.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece" @@ -3729,6 +3743,13 @@ colorette@^1.0.7: resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40" integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g== +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + command-exists@^1.2.8: version "1.2.9" resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.9.tgz#c50725af3808c8ab0260fd60b01fbfa25b954f69" @@ -3941,6 +3962,11 @@ define-data-property@^1.1.1: gopd "^1.0.1" has-property-descriptors "^1.0.0" +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + denodeify@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631" @@ -4329,6 +4355,20 @@ flow-parser@^0.206.0: resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.206.0.tgz#f4f794f8026535278393308e01ea72f31000bfef" integrity sha512-HVzoK3r6Vsg+lKvlIZzaWNBVai+FXTX1wdYhz/wVlH13tb/gOdLXmlTqy6odmTBhT5UoWUbq0k8263Qhr9d88w== +follow-redirects@^1.15.6: + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== + +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fresh@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" @@ -4650,7 +4690,8 @@ inline-style-prefixer@^6.0.1: resolved "https://codeload.github.com/Instabug/Instabug-React-Native-NDK/tar.gz/3b0bac281253133852d32f52aa50cc805dd0b570" "instabug-reactnative@link:../..": - version "13.0.5" + version "0.0.0" + uid "" intl-messageformat@^10.1.0: version "10.5.0" @@ -6105,7 +6146,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2": resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== -mime-types@^2.1.27, mime-types@~2.1.34: +mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.34: version "2.1.35" resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== @@ -6664,6 +6705,11 @@ proper-lockfile@^3.0.2: retry "^0.12.0" signal-exit "^3.0.2" +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" diff --git a/src/utils/XhrNetworkInterceptor.ts b/src/utils/XhrNetworkInterceptor.ts index 9423064689..98c5ef9cc5 100644 --- a/src/utils/XhrNetworkInterceptor.ts +++ b/src/utils/XhrNetworkInterceptor.ts @@ -72,7 +72,8 @@ export default { originalXHROpen = XMLHttpRequest.prototype.open; originalXHRSend = XMLHttpRequest.prototype.send; originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader; - + // An error code that signifies an issue with the RN client. + const clientErrorCode = 9876; XMLHttpRequest.prototype.open = function (method, url, ...args) { _reset(); network.url = url; @@ -145,7 +146,7 @@ export default { // @ts-ignore if (this._hasError) { - cloneNetwork.errorCode = 0; + cloneNetwork.errorCode = clientErrorCode; cloneNetwork.errorDomain = 'ClientError'; // @ts-ignore @@ -153,6 +154,16 @@ export default { cloneNetwork.requestBody = typeof _response === 'string' ? _response : JSON.stringify(_response); cloneNetwork.responseBody = ''; + + // Detect a more descriptive error message. + if (typeof _response === 'string' && _response.length > 0) { + cloneNetwork.errorDomain = _response; + } + + // @ts-ignore + } else if (this._timedOut) { + cloneNetwork.errorCode = clientErrorCode; + cloneNetwork.errorDomain = 'TimeOutError'; } if (this.response) { @@ -162,6 +173,9 @@ export default { } else if (['text', '', 'json'].includes(this.responseType)) { cloneNetwork.responseBody = JSON.stringify(this.response); } + } else { + cloneNetwork.responseBody = ''; + cloneNetwork.contentType = 'text/plain'; } cloneNetwork.requestBodySize = cloneNetwork.requestBody.length; diff --git a/test/utils/XhrNetworkInterceptor.spec.ts b/test/utils/XhrNetworkInterceptor.spec.ts index 7ec818278f..10a8f1abb8 100644 --- a/test/utils/XhrNetworkInterceptor.spec.ts +++ b/test/utils/XhrNetworkInterceptor.spec.ts @@ -235,7 +235,7 @@ describe('Network Interceptor', () => { expect(callback).toBeCalledWith( expect.objectContaining({ errorDomain: 'ClientError', - errorCode: 0, + errorCode: 9876, responseBody: '', }), );