Firebase Performance Monitoring React Native integration

Question

I have install Firebase Performance monitoring on my React Native app and integrate it successfully. After i want to track my network requests performance and go through as documentation.

const trackRequest = async (url,method) => {
    // Define the network metric
    const metric = await perf().newHttpMetric(url, method);

    // Define meta details
    metric.putAttribute('testAttr', 'testValue');

    // Perform a HTTP request and provide response information
    const response = await fetch(url);
    metric.setHttpResponseCode(response.status);
    metric.setResponseContentType(response.headers.get('Content-Type'));
    metric.setResponsePayloadSize(response.headers.get('Content-Length'));

    // Stop the trace
    await metric.stop();

    return response.json();
};

I use this function from documentation and call it every network requests time

fetch("www.example.com")
trackRequest("www.example.com","GET")

Can anyone explain me what i were doing wrong ?

Answer 1

It looks like you're not using the API correctly. There appears to be a good example in the documentation. You need to call start() on the metric before calling stop(). Also, the example shows that you should use await on each method call, but I don't really know if that's necessary.

const trackRequest = async (url,method) => {
    const metric = await perf().newHttpMetric(url, method);

    // !!! Don't forget to call start()
    await metric.start();

    await metric.putAttribute('testAttr', 'testValue');

    const response = await fetch(url);

    await metric.setHttpResponseCode(response.status);
    await metric.setResponseContentType(response.headers.get('Content-Type'));
    await metric.setResponsePayloadSize(response.headers.get('Content-Length'));

    // Stop the trace only after you started it
    await metric.stop();

    return response.json();
};