How can I properly use USParser() to get my computers CPU in ReactJS?

Question

I am fairly new to JavaScript and recently installed UAParser-JS from https://github.com/faisalman/ua-parser-js into my ReactJS project and am trying to figure out how to properly get the CPU architecture (ex: "amd64") from my computer to display in the console of my application.

"ua-parser-js": "^0.7.20" is showing in my package.json, so it seems to have been installed properly. I have looked at the example their github repo and played around with the code a lot, unsuccessfully so far. Unfortunately, I can not seem to find any other examples online. They appear to have a tag with a {{src="ua-parser.min.js"}} and am not sure if this is playing a role in being unsuccessful.

This is top portion of the code from their site and you can see the CPU-Architecture is printed at the bottom.

<!doctype html>
<html>
<head>
<script type="text/javascript" src="ua-parser.min.js"></script>
<script type="text/javascript">

    var parser = new UAParser();

// by default it takes ua string from current browser's //window.navigator.userAgent

    console.log(parser.getResult());
    /*
        /// this will print an object structured like this:
        {
            ua: "",
            browser: {
                name: "",
                version: ""
            },
            engine: {
                name: "",
                version: ""
            },
            os: {
                name: "",
                version: ""
            },
            device: {
                model: "",
                type: "",
                vendor: ""
            },
            cpu: {
                architecture: ""
            }
        }
    */

    // let's test a custom user-agent string as an example
    var uastring = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2";
    parser.setUA(uastring);

    var result = parser.getResult();
    // this will also produce the same result (without instantiation):
    // var result = UAParser(uastring);

    console.log(result.browser);        // {name: "Chromium", version: "15.0.874.106"}
    console.log(result.device);         // {model: undefined, type: undefined, vendor: undefined}
    console.log(result.os);             // {name: "Ubuntu", version: "11.10"}
    console.log(result.os.version);     // "11.10"
    console.log(result.engine.name);    // "WebKit"
    console.log(result.cpu.architecture);   // "amd64"

In it's simplest form, I get "UAParser" is undefined and don't understand what I am doing differently than the example on the github page.

  let parser = new UAParser();

  console.log(parser.getResult());

I expect to see my CPU-architecture but "UAParser" is undefined.

score 4 · Answer 1 · answered Jul 23 '19 at 19:34

4

I was able to import the UAParser like this: import { UAParser } from 'ua-parser-js'; and now the code works properly.

answered Jul 23 '19 at 19:34

Elliot Nicholson

93
1
9

score 0 · Answer 2 · answered Jul 23 '19 at 19:00

Just copie pasted the example on the GitHub repo here's what I've got

 var parser = new UAParser();

    // by default it takes ua string from current browser's window.navigator.userAgent
    console.log(parser.getResult());
    /*
        /// this will print an object structured like this:
        {
            ua: "",
            browser: {
                name: "",
                version: ""
            },
            engine: {
                name: "",
                version: ""
            },
            os: {
                name: "",
                version: ""
            },
            device: {
                model: "",
                type: "",
                vendor: ""
            },
            cpu: {
                architecture: ""
            }
        }
    */

    // let's test a custom user-agent string as an example
    var uastring = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2";
    parser.setUA(uastring);

    var result = parser.getResult();
    // this will also produce the same result (without instantiation):
    // var result = UAParser(uastring);

    console.log(result.browser);        // {name: "Chromium", version: "15.0.874.106"}
    console.log(result.device);         // {model: undefined, type: undefined, vendor: undefined}
    console.log(result.os);             // {name: "Ubuntu", version: "11.10"}
    console.log(result.os.version);     // "11.10"
    console.log(result.engine.name);    // "WebKit"
    console.log(result.cpu.architecture);   // "amd64"

    // do some other tests
    var uastring2 = "Mozilla/5.0 (compatible; Konqueror/4.1; OpenBSD) KHTML/4.1.4 (like Gecko)";
    console.log(parser.setUA(uastring2).getBrowser().name); // "Konqueror"
    console.log(parser.getOS());                            // {name: "OpenBSD", version: undefined}
    console.log(parser.getEngine());                        // {name: "KHTML", version: "4.1.4"}

    var uastring3 = 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.11 (KHTML, like Gecko) Version/7.1.0.7 Safari/534.11';
    console.log(parser.setUA(uastring3).getDevice().model); // "PlayBook"
    console.log(parser.getOS())                             // {name: "RIM Tablet OS", version: "1.0.0"}
    console.log(parser.getBrowser().name);                  // "Safari"

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>

I appreciate your response, I did the same in VSCode and got "UAParser" is undefined. — Elliot Nicholson, Jul 23 '19 at 19:06
You're welcome, I don't see any problem with the default example in VSCode https://ibb.co/p0SNX10 — nazimboudeffa, Jul 23 '19 at 19:17
Do you know why it is printing amd64 when I have an intel processor? I tried adding the user agent as a parameter in the UAParser() — Elliot Nicholson, Jul 23 '19 at 19:43
amd64 just means that your computer has a 64bits processor in general they uses x64 instead but it has the same meaning, I think it's realated to the convetion that is used by the script — nazimboudeffa, Jul 23 '19 at 20:09
That makes sense. I really appreciate your help. Thank you very much. — Elliot Nicholson, Jul 23 '19 at 20:29

How can I properly use USParser() to get my computers CPU in ReactJS?

2 Answers2

Linked