microsoft / microsoft/ApplicationInsights-JS

[BUG] Server Side Rendering fails when using Gatsby

Open
#1,094 8 comments 0 reactions 0 assignees View on GitHub

A pull request for this has already been merged.

  • #1096 by @aaronpowell — merged
  • #1167 by @MSNev — merged
bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.