Skip to content

Commit

Permalink
Update usage paragraph of next/script onLoad (vercel#36453)
Browse files Browse the repository at this point in the history
Changing the paragraph to not include `beforeInteractive` as one of the possible use cases of `onLoad`.

*Update:* Added docs for `onError` in the API reference of `next/script`.

@housseindjirdeh does `onError` also has the same limitation or is this only for `onLoad`?

Closes vercel#33402

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
  • Loading branch information
lfades authored Apr 25, 2022
1 parent adcd914 commit ff140a7
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 3 deletions.
26 changes: 26 additions & 0 deletions docs/api-reference/next/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,3 +73,29 @@ export default function Home() {
)
}
```

### onError

A method that executes if the script fails to load.

> **Note: `onError` can't be used with the `beforeInteractive` loading strategy.**
The following is an example of how to use the `onError` property:

```jsx
import Script from 'next/script'

export default function Home() {
return (
<>
<Script
id="will-fail"
src="https://example.com/non-existant-script.js"
onError={(e) => {
console.error('Script failed to load', e)
}}
/>
</>
)
}
```
6 changes: 3 additions & 3 deletions docs/basic-features/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,9 @@ There are two limitations to be aware of when using the Script component for inl

### Executing Code After Loading (`onLoad`)

Some third-party scripts require users to run JavaScript code after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either `beforeInteractive` or `afterInteractive` as a loading strategy, you can execute code after it has loaded using the `onLoad` property:
> **Note: Both `onLoad` and `onError` can't be used with the `beforeInteractive` loading strategy.**
Some third-party scripts require users to run JavaScript code after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either `afterInteractive` or `lazyOnload` as a loading strategy, you can execute code after it has loaded using the `onLoad` property:

```jsx
import { useState } from 'react'
Expand All @@ -273,8 +275,6 @@ export default function Home() {
}
```

> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy.**
Sometimes it is helpful to catch when a script fails to load. These errors can be handled with the `onError` property:

```jsx
Expand Down

0 comments on commit ff140a7

Please sign in to comment.