APM Rum Js and APM php agent does not have the same trace id

i have imported the images of docker of WordPress and database is maria db which is automatically connected to it in WordPress

For frontend i have installed the apm rum js script in header.php of the main theme.

and i can see the both services logs injested in elastic and service map shows like this

image

but when i search the trace.id both of the services has no common trace.id it means the trace.id is not being passed or maybe i have missed any step

PHP generates the FrontEnd's html so the RUM comes later in the proces. What you can do is pass in the PHP trace Id and set it as the parent since that is coming first.
This is an example init that I used within a project:

        <script src="{{ asset('js/elastic-apm-rum.umd.min.js') }}" crossorigin></script>
        <script>
            elasticApm.init({
                serviceName: 'backend',
                serverUrl: 'https://<link to deployment>',
                environment: "{{ config('app.env') }}",
                pageLoadTraceId: "{{ Elastic\Apm\ElasticApm::getCurrentTransaction()->getTraceId() }}",
                pageLoadSpanId: "{{ Elastic\Apm\ElasticApm::getCurrentTransaction()->ensureParentId() }}",
                pageLoadSampled: {{ Elastic\Apm\ElasticApm::getCurrentTransaction()->isSampled() ? "true" : "false" }}
            })
        </script>

I am using bedrock as a theme for WordPress while using the blade engine for echoing the variabels.

thanks it worked, may i know i am unable to recieve the page not found and 404 status code and others of the front end mostly that i can see in the console that page was not found or image not found with 403, and so on but other code based error being logged ? do you have any suggestion on that

Hello i have tried that, and it works to transfer the trace.id from backend to frontend.

i am facing an issue with timestamp of transaction.

as said the php agent run first but here i see the transaction is ingested into elastic after almost 40 seconds to 1 minute and the @timestamp of that transaction has almost 24 to 29 seconds difference.

see the picture attached

so how to resolve and debug this issue right now i have disabled the custom Context on the backend.