No PowerBIReportEmbed events firing

[TylerTiller]

I have a very simple implementation of using the powerbi-client-vue-js library:

<template>
    <div class="embed-component">
        <PowerBIReportEmbed
            :embed-config="embedConfig"
            :event-handlers="eventHandlers"
            css-class-name="powerbi-component"
            :phased-embedding="true"
            @report-obj="setReportObj"
        ></PowerBIReportEmbed>
    </div>
</template>

<script setup lang="ts">
    import { Embed, service } from 'powerbi-client';
    import { PowerBIReportEmbed } from 'powerbi-client-vue-js';

    const props = defineProps({
        embedUrl: String,
        type: String,
    });

    const eventHandlers = new Map([
        ["loaded", () => console.log("Report Loaded")],
        ["rendered", () => console.log("Report Rendered")],
        ["error", (event) => console.log(event.detail)],
    ]);

    const embedConfig = computed(() => ({
        type: props.type,
        embedUrl: props.embedUrl,
        tokenType: 1,
    }));

    const setReportObj = (reportObj: Report) => {
        console.log('setting report:', reportObj);
    }
</script>

<style scoped>
    .powerbi-component {
        height: 500px;
    }
</style>

This loads the reports just fine given the embed url. However, absolutely no events fire. Loaded, rendered, and even report-obj do not fire...... Have not been able to get these to work at all. This is an incredibly basic implementation essentially going off of the documentation for this vue library as largely we just need to display the reports, but want to make sure it is fully functional in case we do have to hook into the events, but apparently it is not fully functional? 

Has anyone utilized this library and got these events to work?

[Anonymous]

Hi, @TylerTiller 
Thanks for reaching out to the Microsoft fabric community forum.

Based on my understanding, embedding Vue currently requires authentication information, including accessToken and embedUrl. In your code, I did not see a clear declaration of accessToken. Here is a screenshot from the relevant documentation:

Below is an example code snippet:

<PowerBIReportEmbed
    :embedConfig = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</PowerBIReportEmbed>

For further details, please refer to:

 GitHub - microsoft/powerbi-client-vue-js: Power BI Vue.js component. This library lets you embed Pow...

Here are some questions and answers to help you:

vue.js - PowerBI Embeded into VueJS - Stack Overflow

Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[TylerTiller]

@Anonymous 

Still didn't do anything. I even tried switching to embedding with javascript like

    const embedConfig = computed(() => ({
        type: props.type,
        id: 'embed-report',
        embedUrl: props.embedUrl,
        tokenType: models.TokenType.Embed,
        accessToken: token.value?.accessToken,
        hostname: "https://app.powerbi.com",
    }));

    onMounted(() => {
        var reportContainer = document.querySelector('.embed-component') as HTMLElement;
        console.log(reportContainer);
        const powerbi = new service.Service(factories.hpmFactory, factories.wpmpFactory, factories.routerFactory);
        powerbi.accessToken = token.value?.accessToken ?? '';
        var report = powerbi.embed(reportContainer!, embedConfig.value);
        report.on('loaded', () => {
            console.log('Report loaded');
        });
        report.on('rendered', () => {
            console.log('Report rendered');
        });
        report.on('error', (event: any) => {
            console.log(event.detail);
        });
    })

Nothing. No console.logs from my event handlers show up. And keeping accessToken to null/undefined/empty string threw a missing accessToken error. I had to either omit it or actually set it. So I set it to my access token (these are public reports, so don't need them anyway).

But yeah, nothing is getting these events to actually fire.

[Anonymous]

Hi, @TylerTiller 
 

Thank you for your prompt response.

From a responsible standpoint, I suggest you try creating a free support ticket so that Microsoft's specialized engineers can help you resolve the issue. Since I am unable to replicate the problem in my current test environment, creating a support ticket would allow them to assist you in more detail. If this is a widespread issue, they can also address the product problem promptly.

The link of Power BI Support: https://powerbi.microsoft.com/en-us/support/

For how to create a support ticket, please refer to How to create a support ticket in Power BI - Microsoft Fabric Community

Additionally, if you find the root cause or solution to the problem, it would be great if you could share it to help others facing similar issues.

Thank you for your understanding, and I hope your issue gets resolved quickly.

Best Regards,

Leroy Lu