microsoft / microsoft/ApplicationInsights-JS
[BUG] Server Side Rendering fails when using Gatsby
A pull request for this has already been merged.
- Dominant language
- TypeScript
- Stars
- 685
- Forks
- 261
- Avg merge
- 21h 33m
- Merged PRs (30d)
- 5
Description
**Description/Screenshot**
I'm using [Gatsby](https://gatsbyjs.org) to create a static website but when I attempted to generate the static HTML files from the React components the Server Side Rendering (SSR) fails in AppInsights:
```
"window" is not available during server side rendering.
[14/1691]
See our docs page for more info on this error: https://gatsby.dev/debug-html
ReferenceError: window is not defined
- render-page.js:8451 new AjaxMonitor
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:8451:34
- render-page.js:10514 new Initialization
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:10514:29
- render-page.js:50798 Module../src/AppInsights.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:50798:306
- render-page.js:30 __webpack_require__
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30
- render-page.js:51172 Module../src/components/ProductSummary/index.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:51172:70
- render-page.js:30 __webpack_require__
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30
- render-page.js:51433 Module../src/templates/ProductPage.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:51433:84
- render-page.js:30 __webpack_require__
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30
- render-page.js:667 Object../.cache/sync-requires.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:667:364
- render-page.js:30 __webpack_require__
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30
- render-page.js:617 Module../.cache/static-entry.js
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:617:1526
- render-page.js:30 __webpack_require__
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:30:30
- render-page.js:94
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:94:18
- render-page.js:97
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:97:10
- render-page.js:3 webpackUniversalModuleDefinition
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:3:20
- render-page.js:10 Object.
/home/aaron/code/github/react-app-insights/AppInsights-Part2/public/render-page.js:10:3
```
**Steps to Reproduce**
1. Create a new Gatsby website (using the default starter kit, or any others)
2. Add AppInsights from npm + the React extension
3. Run `npm run build` to generate the static output
- OS/Browser: WSL2 (but confirmed failing on Windows)
- SDK Version [e.g. 22]:
```
"@microsoft/applicationinsights-react-js": "^2.3.0",
"@microsoft/applicationinsights-web": "^2.3.0",
```
- How you initialized the SDK: Following [Basic Usage](https://github.com/microsoft/ApplicationInsights-JS/blob/17ef50442f73fd02a758fbd74134933d92607ecf/extensions/applicationinsights-react-js/README.md#basic-usage) from the sample README.
**Expected behavior**
Gatsby is able to generate a set of static files.
**Additional context**
You'll find a demo that the errors can be repo'ed in [on my GitHub](https://github.com/aaronpowell/react-app-insights/tree/11fb80613f7ce9f75e8af55e72c829661d72664d/AppInsights-Part1). Gatsby works fine when run using the development webserver.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the failure with a Gatsby starter, the AppInsights.js initialization shown in the stack trace, and the Basic Usage setup, then run npm run build. Check the SSR path where render-page.js reports window is unavailable. Done means Gatsby generates the static files without the SSR error; linked pull requests indicate this work has already moved forward.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, observability, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100