Handling BigInt in Axios using json-big in JavaScript
If you have not encountered this problem, I hope you never do, in case you did this blog will let you solve it.
If you are looking for the implementation you can find here directly
Introduction
In this blog, we are going to see how do we handle huge numbers ( > 9007199254740991) in JavaScript especially when this is involved in either request or response of a network call.
What is Number Type in JS?
The JavaScript Number type is a double-precision 64-bit binary format IEEE 754 value, like double in Java or C#. This means it can represent fractional values, but there are some limits to what it can store.
A Number only keeps about 17 decimal places of precision; arithmetic is subject to rounding. The largest value a Number can hold is about 1.8×10308. Numbers beyond that are replaced with the special Number constant Infinity. read more
What happens when you cross the Number type limit?
It silently converts into something else! which is very scary to deal with.
What is BigInt and how it can help?
BigInt is a built-in object that provides a way to represent whole numbers larger than 9007199254740991.
Compared to the regular number type, BigInts have arbitrary (unlimited) precision, meaning they can accept any number of digits. And as integers, they do not suffer from JavaScript’s floating-point rounding errors that can cause weird bugs in your code.
BitInt supports most of the operators such as +, *, -, **, %.
read more
Problem statement
BigInts don’t mix well with numbers. Trying to use them together in the same JavaScript statement will result in a TypeError.
BigInt and JSON don’t like each other and why does it matter?
You can’t parse BigInt nor you can stringify and if you try to parse it without BigInt n it will convert into a different value.
Let’s not use JSON.stringify and JSON.parse then? No, you can’t skip that
When you receive a JSON over the network it is typically binaries which gets converted to a JSON string and the HTTP library takes care of converting into a JSON object and they use JSON.parse to do that, the same goes when you try to send a JSON over the network is converts into JSON.stringify.
Axios source code implmentation:
If you try to use Axios directly you will be getting 144253209580962240 instead of 144253209580962251 and there is no way you can convert into original value.
Solution
Luckily there are many npm libraries that help you parse and stringy BigInt.
Awesome, so now we can parse and stringify using JSONbigNative of json-bigint library.
How to use json-bigint with Axios?
Axios let you define your own methods for transformResponse and transformRequest and here is the implement of it
Callouts
Support of BigInt is very poor in JavaScript, the native JSON.parse is not able to parse BigInt, practically it is not possible to override every JSON.parse method in all the libraries available.
If you are using JSON.parse(JSON.stringify(obj)) to create copy, it will fail, instead, you can use lodash cloneDeep.
If Axios update their library, you need to update your code as well.
Even Chrome’s developer tool uses JSON.parse and displays the wrong value in the network tab, as it’s BigInt recently came and they are still trying to figure it out how to implement.
The majority of the latest version of browsers support but not all browsers support BigInt, to handle in other browsers you can use JSONBig offered by the json-big library itself which converts into its own custom object.
Conclusion
You can write your own custom transform methods in Axios and by using json-big you can handle BigInt number following to and fro from the browser / NodeJS.
If possible try to get such big number values in a string from the backend services that would be the best way to handle this out.
It is quite surprising that Javascript being such a popular language is not able to handle this natively.
Connect with me
LinkedIn: https://www.linkedin.com/in/nikhil-talwar-6a7176130/
Twitter: https://twitter.com/its_talwar
