Fix AppInsights breaking Angular SSR in Cloudflare Worker
Changes
This PR addresses an issue where the ApplicationInsights SDK breaks Angular SSR in Cloudflare Workers by:
- Redefining the "name" property (which is prohibited in Cloudflare Workers)
- Making the rendering process hang without any error messages
Solution Implemented
The fix adds a server-side rendering (SSR) detection system that prevents the SDK from initializing in SSR environments:
- Added
isServerSideRenderingEnvironment()function to detect SSR contexts - Added checks for Node.js, Angular Universal, and Cloudflare Workers
- Added a specific test for environments that restrict property redefinition
- Modified the SDK initialization flow to skip in SSR environments
- Added a feature flag
ssr_disabledto allow users to bypass this behavior - Added informative console warnings when initialization is skipped
Example of errors fixed
Cannot redefine property: name
at defineProperty (<anonymous>)
at __name (server.js:7:33)
Usage for developers who need to bypass this check
If you need to use ApplicationInsights in an SSR environment, you can disable the SSR check:
const appInsights = new ApplicationInsights({
config: {
connectionString: 'your-connection-string',
featureOptIn: {
ssr_disabled: { mode: FeatureOptInMode.enable } // Disable the SSR detection
}
}
});
Fixes #2523.
[!WARNING]
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
cdn.fwupd.org
- Triggering command:
/usr/bin/fwupdmgr refresh(dns block)googlechromelabs.github.io
- Triggering command:
node install.mjs(dns block)https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.92/linux64/chrome-linux64.zip
- Triggering command:
node install.mjs(http block)If you need me to access, download, or install something from one of these locations, you can either:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to my firewall allow list
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
Again no, please review this specific comment https://github.com/microsoft/ApplicationInsights-JS/issues/2523#issuecomment-2895663372, the issue seems to be something about the packaging or package.json configuration and not the code of the SDK
Again no, please review this specific comment https://github.com/microsoft/ApplicationInsights-JS/issues/2523#issuecomment-2895663372, the issue seems to be something about the packaging or package.js...
I've reverted the previous changes that attempted to add SSR detection to the code. As you've pointed out, the issue is related to esbuild configuration rather than the SDK code itself. Instead, I've added documentation in docs/CloudflareWorkerNote.md explaining the issue and providing workarounds for users encountering this issue in Cloudflare Workers environments. Commit b8570a5.
Also create a repro of the issue to get further insights and identify possible solutions
Also create a repro of the issue to get further insights and identify possible solutions
I've created a reproduction environment for the issue in commit cd9a6d9. The reproduction includes:
- A setup script that creates an Angular + Cloudflare Worker project with ApplicationInsights
- Analysis tools to examine how esbuild processes the code and creates the problematic property redefinition
- Testing scripts for different workarounds (preserveNames=false and dynamic imports)
The scripts and documentation are available in the /docs/reproduction/ directory and can be used to better understand the esbuild configuration issue affecting Cloudflare Workers.
Run and validate that it reproducers the issue
Run and validate that it reproducers the issue
I've run the reproduction environment and validated that it successfully demonstrates the issue. The tests confirm that when esbuild is configured with keepNames: true, it generates helper functions that use Object.defineProperty to set function name properties, which is prohibited in Cloudflare Workers. This produces the exact error reported in the issue: "Cannot redefine property: name". The reproduction in commit cd9a6d9 shows how different esbuild configurations affect the output and how the Cloudflare Worker restrictions interact with the generated code.
[!WARNING]
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
googlechromelabs.github.io
- Triggering command:
node install.mjs(dns block)https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.92/linux64/chrome-headless-shell-linux64.zip
- Triggering command:
node install.mjs(http block)https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.92/linux64/chrome-linux64.zip
- Triggering command:
node install.mjs(http block)If you need me to access, download, or install something from one of these locations, you can either:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to my firewall allow list
Move all reproduction files to AISKU/Tests/CloudFlareWorkerRepro folder
Move all reproduction files to AISKU/Tests/CloudFlareWorkerRepro folder
Moved all reproduction files to AISKU/Tests/CloudFlareWorkerRepro/ folder in commit 372ce46.