Source Maps (create-react-app)

A series of

1. Quick use of Docker start Sentry-CLI – create version

An introduction to

When uploading Source maps using Sentry-CLI, you need to set up the build system to create releases and upload various source files corresponding to that version. To have Sentry decode your stack trace, also provide:

• To deploy the file (in other words, yoursCompile/compression/packaging (transpilation/minification/bundling)The result of a process; For example,app.min.js)
• The correspondingsource maps

If the Source Map file does not contain your original source content, you must also provide the original source file. If the source file is missing, Sentry CLI will attempt to automatically embed the source into your Source Maps.

Sentry uses Releases to match the correct source maps to your event. To create a new version, run the following command (for example, during release) :

sentry-cli releases new <release_name>
Copy the code

The release name must be unique in your organization and match the Release option in your SDK initialization code. Then, use the upload-sourcemaps command to scan the sourcemaps in the folder, process them, and upload them to Sentry.

sentry-cli releases files <release_name> upload-sourcemaps /path/to/files
Copy the code

You can find the artifacts uploaded to Sentry by navigating to [Project] > Project Settings > Source Maps.

This will upload all files ending in.js and.map to the specified version (release). If you want to change these extensions — for example, upload typescript source files — use the –ext option:

sentry-cli releases files <release_name> upload-sourcemaps --ext ts --ext map /path/to/files
Copy the code

As of now, this version is in draft status (” unreleased “). Once all source maps have been uploaded and your application has been successfully published, use the following command to complete release:

sentry-cli releases finalize <release_name>
Copy the code

In actual combat

Create React App Quickly creates a Demo

Create a new typescript app template project:

npx create-react-app my-app --template typescript
Copy the code

Add @sentry/react, @sentry/tracing package:

yarn add @sentry/react @sentry/tracing
Copy the code

Modify project code

Go to SRC /index.tsx and make the following adjustments:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://[email protected]/2".// Your Sentry project DSN
  release: "1.0.0".integrations: [new Integrations.BrowserTracing()]
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>.document.getElementById('root'));Copy the code

Go to SRC/app.tsx and make the following adjustments:

import React from 'react';
import logo from './logo.svg';
import './App.css';

const onError = () = > {
  // An error is intentionally thrown for sentry to catch
  throw new Error("Break the world")}const btnStyles = {width: "200px".height: "50px".cursor: "pointer".fontSize: "22px"}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button style={btnStyles} onClick={onError}>Break the world</button>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;
Copy the code

Add the.sentryclirc file, see the previous article -> Quick Use of Docker to get started with Sentry-CLI – create a version

[auth]
token=your-auth-token

[defaults]
org=sentry
project=create-react-app-sentry
url=https://x.xxx.com
Copy the code

Compile the project

yarn build
Copy the code

Final project structure

Upload the Source Maps

In the project root directory, enter the Sentry-CLI docker container shell environment:

docker run --rm -it -v $(pwd):/work getsentry/sentry-cli /bin/sh
Copy the code

Set variables:

VERSION="1.0.0" # version number
SOURCEMAPS_PATH="./build/static/js" # Build Source Maps
URL_PREFIX="~/static/js/" # that you js related documents be hosted at http://example.com/static/js/
Copy the code

Run the following command:

sentry-cli releases new "$VERSION"
# Created release 1.0.0.

sentry-cli releases files "$VERSION" upload-sourcemaps "$SOURCEMAPS_PATH" --url-prefix "$URL_PREFIX"
# > Found 8 release files
# > Analyzing 8 sources
Analyzing completed in 0.101s
# > Rewriting sources
# > Strategy for completing in 0.034s
# > Adding source map references
# > Bundling files for upload... 
# > Bundling completed in 0.064s
# > Optimizing completed in 0.002s
# > Uploading completed in 2.144s
# > Uploaded release files to Sentry
# > Processing completed in 0.077s
# > File upload complete (processing pending on server)

# Source Map Upload Report
# Minified Scripts
# ~ / static/js/a26a34. 2.42 the chunk. Js (sourcemap at 2.42 a26a34. The chunk. The js. The map)
# ~/static/js/3.edf82367.chunk.js (sourcemap at 3.edf82367.chunk.js.map)
# ~/static/js/main.d1a3df88.chunk.js (sourcemap at main.d1a3df88.chunk.js.map)
# ~/static/js/runtime-main.b608d38a.js (sourcemap at runtime-main.b608d38a.js.map)
# Source Maps
# ~ / static/js / 2.42 a26a34. The chunk. Js. The map
# ~/static/js/3.edf82367.chunk.js.map
# ~/static/js/main.d1a3df88.chunk.js.map
# ~/static/js/runtime-main.b608d38a.js.map

sentry-cli releases finalize "$VERSION"
# Finalized release 1.0.0.

exit
# Exit container
Copy the code

In the Sentry background, you should see the following image:

Local test

If you are in a Mac local development environment, you can run the following command:

pushd build; python -m SimpleHTTPServer; popd
Copy the code

Click the Break the World button:

Normally, the error has been uploaded to Sentry, and you should see the following figure in the error details: